NativeScript - Layout布局

首页 / NativeScript入门教程 / NativeScript - Layout布局
Nginx核心知识150讲
Netty源码剖析与实战
Web安全攻防实战
陶辉的网络协议集训班02期
说透数字化转型
陈天 · Rust 编程第一课
NativeScript - Layout布局

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

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

  • Absolute Layout 

  • Dock Layout

  • Grid Layout

  • Stack Layout

  • Wrap Layout

  • FlexBox Layout

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

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>

运行上面代码输出

证明内容

祝学习愉快！(如果内容有误？选中内容 -> 右键 -> 编辑提交！)

猜你喜欢

软件工程之美 -〔宝玉〕

Vue开发实战 -〔唐金州〕

苏杰的产品创新课 -〔苏杰〕

JavaScript核心原理解析 -〔周爱民〕

数据中台实战课 -〔郭忆〕

大数据经典论文解读 -〔徐文浩〕

去无方向的信 -〔小麥〕

自动化测试高手课 -〔柳胜〕

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

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