做点小本意 哪个网站拿货便宜点,wordpress菜单栏移动下移,wordpress自动加p标签,新华书店网上商城之——布局
目录
之——布局
杂谈
正文
1.布局基础知识
2.Column
3.Row
4.实践 杂谈 布局容器组件。 一个丰富的页面需要很多组件组成#xff0c;那么#xff0c;我们如何才能让这些组件有条不紊地在页面上布局呢#xff1f;这就需要借助容器组件来实现。 容器组件是…之——布局
目录
之——布局
杂谈
正文
1.布局基础知识
2.Column
3.Row
4.实践 杂谈 布局容器组件。 一个丰富的页面需要很多组件组成那么我们如何才能让这些组件有条不紊地在页面上布局呢这就需要借助容器组件来实现。 容器组件是一种比较特殊的组件它可以包含其他的组件而且按照一定的规律布局帮助开发者生成精美的页面。容器组件除了放置基础组件外也可以放置容器组件通过多层布局的嵌套可以布局出更丰富的页面。 正文
1.布局基础知识 线性布局容器表示按照垂直方向或者水平方向排列子组件的容器ArkTS提供了Column和Row容器来实现线性布局。 Column表示沿垂直方向布局的容器。Row表示沿水平方向布局的容器。 在布局容器中默认存在两根轴分别是主轴和交叉轴这两个轴始终是相互垂直的。不同的容器中主轴的方向不一样的。 主轴在Column容器中的子组件是按照从上到下的垂直方向布局的其主轴的方向是垂直方向在Row容器中的组件是按照从左到右的水平方向布局的其主轴的方向是水平方向。交叉轴与主轴垂直相交的轴线如果主轴是垂直方向则交叉轴就是水平方向如果主轴是水平方向则交叉轴是垂直方向。 不同的组件的主轴方向不一样。 容器组件是可以使用入参space来设置子组件的间距 Column和Row有两个属性 来设置布局在轴上的对齐 子组件在主轴方向上的对齐使用justifyContent属性来设置其参数类型是FlexAlign。FlexAlign定义了以下几种类型 Start元素在主轴方向首端对齐Center元素在主轴方向中心对齐End元素在主轴方向尾部对齐SpaceBetween元素在主轴方向均匀分配弹性元素首尾没有间距SpaceAround元素在主轴方向均匀分配弹性元素首尾一半间距SpaceEvenly元素在主轴方向等间距布局首尾一样间距 子组件在交叉轴方向上的对齐方式使用alignItems属性来设置。 Column容器的主轴是垂直方向交叉轴是水平方向其参数类型为HorizontalAlign水平对齐HorizontalAlign定义了以下几种类型 Start设置子组件在水平方向上按照起始端对齐Center默认值设置子组件在水平方向上居中对齐End设置子组件在水平方向上按照末端对齐 Row容器的主轴是水平方向交叉轴是垂直方向其参数类型为VerticalAlign垂直对齐VerticalAlign定义了以下几种类型 Top设置子组件在垂直方向上居顶部对齐Center默认值设置子组件在竖直方向上居中对齐Bottom设置子组件在竖直方向上居底部对齐 2.Column 使用样例见下方Row中的图。 3.Row 使用样例 4.实践
常用组件与布局ArkTS (huawei.com) 相关概念 Text显示一段文本的组件。 ImageImage为图片组件常用于在应用中显示图片。Image支持加载string、PixelMap和Resource类型的数据源支持png、jpg、bmp、svg和gif类型的图片格式。 TextInput单行文本输入框组件。 Button按钮组件可快速创建不同样式的按钮。 LoadingProgress用于显示加载动效的组件。 Flex以弹性方式布局子组件的容器组件。 Column沿垂直方向布局的容器。 Row沿水平方向布局容器。 List列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据例如图片和文本。 Swiper滑块视图容器提供子组件滑动轮播显示的能力。 Grid网格容器由“行”和“列”分割的单元格所组成通过指定“项目”所在的单元格做出各种各样的布局。
