NativeScript - Layout布局

NativeScript - Layout布局 首页 / NativeScript入门教程 / NativeScript - Layout布局

NativeScript提供集合组件的集合只是为了布置UI小部件组件。布局集合充当父组件，并且可以具有一个或多个子组件。

NativeScript支持六个布局集合，它们如下-

让无涯教程在本章中详细了解所有布局集合的概念。

Absolute Layout

AbsoluteLayout 集合是NativeScript中最简单的布局集合。 AbsoluteLayout不会对其子项施加任何约束，并将使用以左上角为原点的二维坐标系将其子项放置在其内部。

AbsoluteLayout使用其子项的四个属性来定位它们，如下所示-

     top      - 定义从原点开始沿y方向向下移动的子项的位置。

     left      - 定义从原点开始沿x方向横向移动的子代的位置。

     width  - 定义子集合的宽度。

     height - 定义子集合的高度。

在应用程序的主页中添加AbsoluteLayout集合，如下所示:

复制代码
<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 

<AbsoluteLayout width="200" height="300" backgroundColor="blue"> 
   <Label text="Top Left" left="0" top="0" width="100" height="150" backgroundColor="green">
   </Label> 
   <Label text="Top Right" left="100" top="0" width="100" height="150" backgroundColor="blue"></Label> 
   <Label text="Bottom Left" left="0" top="150" width="100" height="150" backgroundColor="orange">
   </Label>
   <Label text="Bottom Right" left="100" top="150" width="100" height="150" backgroundColor="red"></Label> 
</AbsoluteLayout>

运行上面代码输出

无涯教程网

AbsoluteLayout

DockLayout

Docklayout 集合组件使它的子集合可以停靠在其中。

Dock属性的可能值如下-

    top         - 布局集合将子集合停靠在右上角。

    bottom  - 布局集合将子集合停靠在底角。    

    left         - 布局集合将子集合停靠在左上角。

    right      - 布局集合将子集合停靠在右上角。

默认情况下，DockLayout 集合停靠其最后一个子集合。可以通过将其StretchLastChild属性设置为零来覆盖它。

在应用程序的主页中添加 DockLayout 集合，如下所示-

复制代码
<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<DockLayout width="250" height="300" backgroundColor="blue" stretchLastChild="false"> 
   <Label text="left" dock="left" width="50" backgroundColor="green"></Label> 
   <Label text="top" dock="top" height="50" backgroundColor="orange"></Label> 
   <Label text="right" dock="right" width="50" backgroundColor="red"></Label< 
   <Label text="bottom" dock="bottom" height="50" 
   backgroundColor="orange"></Label> 
</DockLayout>

运行上面代码输出

无涯教程网

DockLayout

GridLayout

GridLayout集合组件是复杂的布局集合之一，它以表格格式排列行和列的子元素。默认情况下，它具有一行和一列。它具有以下属性-

columns - 用于表示以分隔的每列的默认宽度。可能的值为number，*和auto关键字。

  • number  - 表示绝对列宽。

  • *              - 表示一列相对于其他列的宽度。可以在其前面加上数字以指示列宽应相对于其他列多少次。

  • auto        - 表示列的宽度与其最宽的子项一样宽。

rows     - 用于表示每行的默认高度，以分隔。值表示类似于列。

复制代码
<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<GridLayout columns="50, auto, *" rows="50, auto, *" width="210" height="210"
   backgroundColor="blue"> 
   <Label text="Row: 0; Column 0" row="0" col="0" backgroundColor="green"></Label> 
   <Label text="Row: 0; Column 1" row="0" col="1" colSpan="1" backgroundColor="brown"></Label> 
   <Label text="Row: 1; Column 0" row="1" col="0" rowSpan="1" backgroundColor="red"></Label> 
   <Label text="Row: 1; Column 1" row="1" col="1" backgroundColor="orange"></Label> 
</GridLayout>

运行上面代码输出

无涯教程网

网格布局

StackLayout

StackLayout在水平或垂直的一维行中组织其子级。可以使用布局选项根据布局中的空间调整大小。它具有方向属性，可用于指定水平或垂直方向。

让无涯教程在应用程序的主页中添加StackLayout集合，如下所示:

复制代码
<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<StackLayout orientation="vertical" width="200" height="200" backgroundColor="blue"> 
   <Label text="Label1" width="50" height="50" backgroundColor="green"></Label> 
   <Label text="Label2" width="50" height="50" backgroundColor="brown"></Label> 
   <Label text="Label3" width="50" height="50" backgroundColor="red"></Label> 
   <Label text="Label4" width="50" height="50" backgroundColor="orange"></Label> 
</StackLayout>

运行上面代码输出

无涯教程网

StackLayout

WrapLayout

WrapLayout用于将内容包装在新的行或列上。

它具有以下三个属性-

    orientation  -  水平或垂直显示。

    itemWidth   -  每个child的布局宽度。

    itemHeight  - 每个child的布局高度。

在应用程序的主页中添加WrapLayout集合，如下所示:

复制代码
<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> <WrapLayout orientation="horizontal" width="200" height="200" backgroundColor="blue">
   <Label text="Label1" width="70" height="70" backgroundColor="green"></Label> 
   <Label text="Label2" width="70" height="70" backgroundColor="brown"></Label 
   <Label text="Label3" width="70" height="70" backgroundColor="red"></Label> 
   <Label text="Label4" width="70" height="70" backgroundColor="orange"></Label> 
</WrapLayout>

运行上面代码输出

无涯教程网

WrapaLayout

Flexbox Layout

FlexboxLayout集合组件是高级布局集合之一。它提供了将简单布局呈现为非常复杂和复杂的布局的选项。它基于CSS Flexbox。

FlexboxLayout组件具有很多属性，它们如下-

flexDirection

它表示子组件的排列方向。 flexDirection的可能值如下-

    row                      - 子组件并排排列。

    row-reverse       - 子组件并排排列，但方向相反。    

    column               - 子组件一个接一个地排列。

    column-reverse - 子组件在另一个组件的下方排列，但方向相反。

让无涯教程在您的应用程序的主页中添加Flex Layout集合，如下所示-

复制代码
<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<FlexboxLayout flexDirection="row"> 
   <Label text="First Item" backgroundColor="red"></Label> 
   <Label text="Second Item" backgroundColor="green"></Label> 
   <Label text="Third Item" backgroundColor="red"></Label> 
   <Label text="Fourth Item" backgroundColor="green"></Label> 
   <Label text="Fifth Item" backgroundColor="red"></Label> 
</FlexboxLayout>

运行上面代码输出

无涯教程网

FlexLayout

现在，将flexDirection值从行改为行反向，并检查它如何影响布局。

复制代码
<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> <FlexboxLayout flexDirection="row-reverse"> 
   <Label text="First Item" backgroundColor="red"></Label> 
   <Label text="Second Item" backgroundColor="green"></Label> 
   <Label text="Third Item" backgroundColor="red"></Label> 
   <Label text="Fourth Item" backgroundColor="green"></Label> 
   <Label text="Fifth Item" backgroundColor="red"></Label> 
</FlexboxLayout>

运行上面代码输出

无涯教程网

FlexLayout1

将flexDirection值从行反向更改为列，并检查它如何影响布局。

复制代码
<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<FlexboxLayout flexDirection="column"> 
   <Label text="First Item" backgroundColor="red"></Label> 
   <Label text="Second Item" backgroundColor="green"></Label> 
   <Label text="Third Item" backgroundColor="red"></Label> 
   <Label text="Fourth Item" backgroundColor="green"></Label> 
   <Label text="Fifth Item" backgroundColor="red"></Label> 
</FlexboxLayout>

运行上面代码输出

无涯教程网

FlexLayout Column

将flexDirection值从column更改为column-reverse，并检查它如何影响布局。

复制代码
<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<FlexboxLayout flexDirection="column-reverse"> 
   <Label text="First Item" backgroundColor="red"></Label> 
   <Label text="Second Item" backgroundColor="green"></Label> 
   <Label text="Third Item" backgroundColor="red"></Label> 
   <Label text="Fourth Item" backgroundColor="green"></Label> 
   <Label text="Fifth Item" backgroundColor="red"></Label> 
</FlexboxLayout>

运行上面代码输出

无涯教程网

Column Reverse

flexWrap

它表示通过沿flexDirection设置的方向进行包装，子组件是在单行/列中呈现还是在多行中呈现。

可能的值如下-

    wrap                - 如果给定方向(flexDirection)上没有可用空间，则包装子组件。

    wrap-reverse - 与wrap相同，只不过组件的流动方向相反。

复制代码
<ActionBar> 
   <Label text="Home"></Label> 
&tl;/ActionBar> 
<FlexboxLayout flexDirection="row" φλεξΏραπ="wrap"> 
   <Label text="First Item" backgroundColor="red"></Label> 
   <Label text="Second Item" backgroundColor="green"></Label> 
   <Label text="Third Item" backgroundColor="red"></Label> 
   <Label text="Fourth Item" backgroundColor="green"></Label> 
   <Label text="Fifth Item" backgroundColor="red"></Label>
   <Label text="Sixth Item" backgroundColor="green"></Label> 
   <Label text="Seventh Item" backgroundColor="red"></Label> 
   <Label text="Eighth Item" backgroundColor="green"></Label> 
</FlexboxLayout>

运行上面代码输出

无涯教程网

FlexWrap

JustifyContent

它表示子组件之间如何相对布置以及整体结构。它具有以下指定的三个属性-  

    flex-end              - 将子组件打包到端线。

    space-between  - 它通过均匀分布在行中来包装子组件。

    space-around     - 类似于space-between，不同之处在于它通过均匀分布在行中以及围绕它们的相等空间来包装子组件。

让无涯教程也添加justifyContent并检查其行为-

复制代码
<ActionBar> 
   <Label text="Home"></Label>
</ActionBar> 
<FlexboxLayout flexDirection="row" φλεξΏραπ="wrap" justifyContent="space-around"> 
   <Label text="First Item" backgroundColor="red"></Label> 
   <Label text="Second Item" backgroundColor="green"></Label> 
   <Label text="Third Item" backgroundColor="red"></Label> 
   <Label text="Fourth Item" backgroundColor="green"></Label> 
   <Label text="Fifth Item" backgroundColor="red">&lt/Label> 
   <Label text="Sixth Item" backgroundColor="green"></Label> 
   <Label text="Seventh Item" backgroundColor="red"></Label> 
   <Label text="Eighth Item" backgroundColor="green"></Label> 
</FlexboxLayout>

运行上面代码输出

无涯教程网

证明内容

祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)

技术教程推荐

AI技术内参 -〔洪亮劼〕

深入浅出区块链 -〔陈浩〕

OpenResty从入门到实战 -〔温铭〕

小马哥讲Spring核心编程思想 -〔小马哥〕

正则表达式入门课 -〔涂伟忠〕

To B市场品牌实战课 -〔曹林〕

说透区块链 -〔自游〕

手把手带你搭建秒杀系统 -〔佘志东〕

Midjourney入门实践课 -〔Jovi〕

好记忆不如烂笔头。留下您的足迹吧 :)
休闲君评测 |  TOOLFK工具网 |  chrome插件网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  豪评测 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630