【译】关于NativeScript布局的指南

结构的问题，这些结构构成了移动应用程序。在NativeScript布局中，我们有一些预定义的布局，用户可以从中选择，我们将在本主题中进一步了解。在这里，我们将看到NativeScript布局是如何被用于一个好的用户界面的，以及什么是它的布局容器。

这些布局容器作为父组件，可以有一个或多个子组件。子组件可以根据父容器提供的技术进行排列。

6大NativeScript布局与实例

以下是6种NativeScript布局容器。

• 绝对布局。
• Dock Layout。
• 网格布局。
• 堆栈布局。
• 包裹式布局。
• FlexBox布局

我们将看到每一种布局容器、每一种布局的语法以及它是如何工作的。

1.绝对布局容器

它是NativeScript中最简单的布局容器之一。它允许用户通过它的坐标来设置视图，绝对布局不对子节点执行任何约束，并将它们的子节点放在以左上角为原点的二维坐标系中。根据不同的屏幕尺寸，布局的响应性可能很麻烦。

它使用子节点的4个属性进行定位。

• **左边。**是指从原点向X方向侧向移动的孩子的位置。
• **顶部：从原点开始，在X方向向侧边移动。**是指从原点开始，在y方向上向下移动的孩子的位置。
• **宽度和高度：**是指儿童的宽度和高度。

语法（绝对布局）。

<AbsoluteLayout> …….. </AbsoluteLayout>

示例#1：绝对布局容器示例

<Page loaded="pageLoaded" xmlns="http://www.nativescript.org/tns.xsd"> <ActionBar> <Label text="Absolute Layout Container"></Label> </ActionBar> <AbsoluteLayout width="250" height="250"> <Label left="0" top="100" width="150" height="150" text="Top Left" backgroundColor="yellow"></Label> <Label left="120" top="0" width="100" height="150" text="Top Right" backgroundColor="gray"></Label> <Label left="0" top="150" width="150" height="150" text="Bottom Left" backgroundColor="green"></Label> <Label left="140" top="150" width="150" height="150" text="Bottom Right" backgroundColor="red"></Label> </AbsoluteLayout> </Page>

输出。

在这里，我们正在显示一个NativeScript的绝对布局容器。宽度和高度被定义为250。顶部是指Y方向的位置，左侧是指X方向的位置。

2.Dock布局容器

如果用户想把布局钉在屏幕的任何地方，这是一个有用的容器，也就是说，使子容器停靠在父容器内。容器的每一面都可以被停靠。它使用子容器的停靠属性进行停靠。

• **底部。**它将子组件停靠在屏幕的底部角落。
• **顶部：将子组件停靠在屏幕的底角。**它将子组件停靠在屏幕的顶角。
• **左边。**将子组件停靠在屏幕的左角。
• **right:**将子组件停靠在屏幕的右角。

语法（Dock Layout）。

<DockLayout> …… </DockLayout>

例2:Dock Layout容器实例

<Page loaded="pageLoaded" xmlns="http://www.nativescript.org/tns.xsd"> <ActionBar> <Label text="Dock Layout Container"></Label> </ActionBar> <DockLayout width="300" height="250" backgroundColor="yellow" stretchLastChild="false"> <Label text="Top dock" dock="top" height="50" backgroundColor="gray"></Label> <Label text="Bottom dock" dock="bottom" height="50" backgroundColor="gray"></Label> <Label text="Left dock" dock="left" width="90" backgroundColor="orange"></Label> <Label text="Right dock" dock="right" width="90" backgroundColor="red"> </Label> </DockLayout> </Page>

输出。

根据这个布局，我们可以很容易地说，这个布局在左边、上面、下面和右边都有停靠。这里的黄色是整个布局的背景。

3.网格布局容器

它是一个复杂的组件，允许在行和列的表格格式中，将复杂的视图安排在彼此之上。

这里需要注意的属性是。

• 行和列。它是行和列的编号
• **rowSpan和colSpan。**它是子组件在布局中所跨越的行或列的总数。

语法（Grid Layout）。

<GridLayout> …… </GridLayout>

例3：网格布局容器实例

<Page loaded="pageLoaded" xmlns="http://www.nativescript.org/tns.xsd"> <ActionBar> <Label text="Grid Layout Container"></Label> </ActionBar> <GridLayout columns="70, auto, *" rows="70, auto, *" width="165" height="170" backgroundColor="gray"> <Label text="Grid 0,0" row="0" col="0" backgroundColor="yellow"></Label> <Label text="Grid 0,1" row="0" col="1" colSpan="2" backgroundColor="orange"></Label> <Label text="Grid 1,0" row="1" col="0" rowSpan="2" backgroundColor="red"></Label> <Label text="Grid 1,1" row="1" col="1" backgroundColor="yellow"></Label> </GridLayout> </Page>

输出。

在这里，网格布局已经被展示出来，它以行和列的形式显示。

4.堆栈布局容器

它将把它的子元素组织成一维线，无论是水平还是垂直，都取决于所设定的方向。

语法。(堆栈式布局)

<StackLayout> ….. </StackLayout>

例子4：堆栈式布局容器例子

<Page loaded="pageLoaded" xmlns="http://www.nativescript.org/tns.xsd"> <ActionBar> <Label text="Stack Layout Container"></Label> </ActionBar> <StackLayout orientation="horizontal" width="300" height="100" backgroundColor="gray"> <Label text="Grid 1" width="60" height="50" backgroundColor="yellow"> </Label> <Label text="Grid 2" width="60" height="50" backgroundColor="red"> </Label> <Label text="Grid 3" width="60" height="50" backgroundColor="yellow"> </Label> <Label text="Grid 4" width="60" height="50" backgroundColor="red"> </Label> <Label text="Grid 5" width="60" height="50" backgroundColor="yellow"> </Label> </StackLayout> </Page>

输出。

这里，我们展示了水平方向的堆叠布局。

5.包裹式布局容器

它用于根据屏幕尺寸将内容包在新的行和列上。

语法。(Wrap Layout)

<WrapLayout> ….. </WrapLayout>

例子5：包装布局容器例子

<Page loaded="pageLoaded" xmlns="http://www.nativescript.org/tns.xsd"> <ActionBar> <Label text="Wrap Layout Container"></Label> </ActionBar> <WrapLayout orientation="vertical" width="150" height="200" backgroundColor="gray"> <Label text="Grid 1" width="75" height="70" backgroundColor="yellow"> </Label> <Label text="Grid 2" width="75" height="70" backgroundColor="orange"> </Label> <Label text="Grid 3" width="75" height="70" backgroundColor="orange"> </Label> <Label text="Grid 4" width="75" height="70" backgroundColor="yellow"> </Label> </WrapLayout> </Page>

输出。

在这里，我们展示了一个以垂直方式包装的布局。

6.FlexBox 布局容器

它是先进的布局容器之一，提供了一个从简单到复杂的布局的选项，可以渲染复杂的布局。它是基于CSS FlexBox的。

它有很多的属性。

• **flexDirection。**它是子组件的排列方向。flexDirection的可能值是。
• 行和列。子元素在行中并排排列，在列中一个在另一个下面。
• 行-反转和列-反转。子元素在行中并排排列，在列中一个在另一个下面，方向相反。
• **flexWrap。**它表示子元素是否会被渲染成单行或单列，或者流向多行，并由flexDirection设置包装。
• **wrap:**如果在flexDirection中没有可用的空间，它将包裹子元素。
• **wrap-reverse。**与wrap类似，但方向相反。
• **justifyContent。**它表示子元素是如何基于彼此和整体结构而排列的。
• **flex-end。**将子元素向行的末端打包。
• **space-between：将子元素向行尾打包。**将子元素均匀地分布在行中。
• **space-around:**它类似于space-between，但将子元素均匀地分布在行中，也可以环绕它们。

语法。

<FlexboxLayout> ….. </FlexboxLayout>

例6:Flex Box Layout Container示例

<Page loaded="pageLoaded" xmlns="http://www.nativescript.org/tns.xsd"> <ActionBar> <Label text="FlexBox Layout Container"></Label> </ActionBar> <FlexboxLayout flexDirection="row-reverse"> <Label text="1st Grid Item" backgroundColor="yellow"></Label> <Label text="2nd Grid Item" backgroundColor="gray"></Label> <Label text="3rd Grid Item" backgroundColor="orange"></Label> <Label text="4th Grid Item" backgroundColor="gray"></Label> <Label text="5th Grid Item" backgroundColor="pink"></Label> <Label text="6th Grid Item" backgroundColor="gray"></Label> <Label text="7th Grid Item" backgroundColor="red"></Label> </FlexboxLayout> </Page>

输出。

在这里，我们已经实现了FlexBox布局，其中flexDirection为反向。我们也有flexWrap和justifyContent。

总结

至此，我们将结束 "NativeScript布局 "这一主题。我们已经看到了什么是NativeScript布局，以及这些布局中包含的所有类型是什么。大约有6种类型的NativeScript布局，我们在这里用一个例子来实现它们，以使你更好地理解这个概念。

推荐文章

这是一份关于NativeScript布局的指南。在这里，我们也讨论了NativeScript的定义和6种布局，以及不同的例子和代码的实现。你也可以看看下面的文章来了解更多 --

1. 二进制树 JavaScript
2. JavaScript计算器
3. 脚本中的下划线
4. Lua vs JavaScript

The postNativeScript Layoutsappeared first onEDUCBA.