纯血鸿蒙ArkUI线性布局详解

丝  金牌会员 | 2025-1-7 03:09:02 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 970|帖子 970|积分 2910

线性布局说明

线性布局（LinearLayout）是开发中最常用的布局，通过线性容器Row和Column构建。线性布局是其他布局的基础，其子元素在线性方向上（水平方向和垂直方向）依次排列。线性布局的排列方向由所选容器组件决定，Column容器内子元素按照垂直方向排列，Row容器内子元素按照水平方向排列。根据不同的排列方向，开发者可选择使用Row或Column容器创建线性布局。

Column容器内子元素排列示意图


Row容器内子元素排列示意图

基础概念



  • 布局容器：具有布局能力的容器组件，可以承载其他元素作为其子元素，布局容器会对其子元素举行尺寸计算和布局排列。
  • 布局子元素：布局容器内部的元素。
  • 主轴：线性布局容器在布局方向上的轴线，子元素默认沿主轴排列。Row容器主轴为水平方向，Column容器主轴为垂直方向。
  • 交织轴：垂直于主轴方向的轴线。Row容器交织轴为垂直方向，Column容器交织轴为水平方向。
  • 间距：布局子元素的间距。
布局子元素在排列方向上的间距

在布局容器内，可以通过space属性设置排列方向上子元素的间距，使各子元素在排列方向上有等间距效果。
Column容器内排列方向上的间距


Column容器内排列方向的间距图

  1. @Entry
  2. @Component
  3. struct LinearLayout {
  4.     build() {
  5.         // Column容器组件默认情况下在垂直方向从上向下对子组件进行布局
  6.         // space的值设置为20，表示子组件之间的距离为20vp
  7.         Column({ space: 20 }) {
  8.             Text('space: 20').fontSize(15).fontColor(Color.Gray).width('90%')
  9.             Row().width('90%').height(50).backgroundColor(0xF5DEB3)
  10.             Row().width('90%').height(50).backgroundColor(0xD2B48C)
  11.             Row().width('90%').height(50).backgroundColor(0xF5DEB3)
  12.         }.width('100%')
  13.     }
  14. }
复制代码

Row容器内排列方向上的间距


Row容器内排列方向的间距图

  1. @Entry
  2. @Component
  3. struct LinearLayout {
  4.     build() {
  5.         // 默认情况下，Row对子组件在水平方向上从左向右布局
  6.         // space设置为35表示子组件之间在主轴方向上间距为35vp
  7.         Row({ space: 35 }) {
  8.             Text('space: 35').fontSize(15).fontColor(Color.Gray)
  9.             Row().width('10%').height(150).backgroundColor(0xF5DEB3)
  10.             Row().width('10%').height(150).backgroundColor(0xD2B48C)
  11.             Row().width('10%').height(150).backgroundColor(0xF5DEB3)
  12.         }.width('90%')
  13.     }
  14. }
复制代码

布局子元素在交织轴上的对齐方式

在布局容器内，可以通过alignItems属性设置子元素在交织轴（排列方向的垂直方向）上的对齐方式。且在各类尺寸屏幕中，体现同等。此中，交织轴为垂直方向时，取值为VerticalAlign范例，水平方向取值为HorizontalAlign范例。
alignSelf属性用于控制单个子元素在容器交织轴上的对齐方式，其优先级高于alignItems属性，如果设置了alignSelf属性，则在单个子元素上会覆盖alignItems属性。
Column容器内子元素在水平方向上的排列


Column容器内子元素在水平方向上的排列图1

1. HorizontalAlign.Start：子元素在水平方向左对齐。
  1. @Entry
  2. @Component
  3. struct LinearLayout03 {
  4.     build() {
  5.         // 列容器组件默认情况下对子组件从上向下布局
  6.         Column({}) {
  7.             Column() {
  8.             }.width('80%').height(50).backgroundColor(0xF5DEB3)
  10.             Column() {
  11.             }.width('80%').height(50).backgroundColor(0xD2B48C)
  13.             Column() {
  14.             }.width('80%').height(50).backgroundColor(0xF5DEB3)
  15.         }
  16.         .width('100%')
  17.         // 设置列容器组件子元素在水平方向左对齐
  18.         .alignItems(HorizontalAlign.Start)
  19.         .backgroundColor('rgb(242,242,242)')
  20.     }
  21. }
复制代码

2. HorizontalAlign.Center：子元素在水平方向居中对齐。
  1. @Entry
  2. @Component
  3. struct LinearLayout04 {
  4.     build() {
  5.         // 列容器组件默认情况下对子组件在垂直方向从上向下布局
  6.         Column({}) {
  7.             Column() {
  8.             }.width('80%').height(50).backgroundColor(0xF5DEB3)
  10.             Column() {
  11.             }.width('80%').height(50).backgroundColor(0xD2B48C)
  13.             Column() {
  14.             }.width('80%').height(50).backgroundColor(0xF5DEB3)
  15.         }
  16.         .width('100%')
  17.         // 设置列容器组件子组件在水平方向居中对齐
  18.         .alignItems(HorizontalAlign.Center)
  19.         .backgroundColor('rgb(242,242,242)')
  20.     }
  21. }
复制代码

3. HorizontalAlign.End：子元素在水平方向右对齐。
  1. @Entry
  2. @Component
  3. struct LinearLayout05 {
  4.     build() {
  5.         // 列容器组件默认情况下对子组件在垂直方向从上向下布局
  6.         Column({}) {
  7.             Column() {
  8.             }.width('80%').height(50).backgroundColor(0xF5DEB3)
  10.             Column() {
  11.             }.width('80%').height(50).backgroundColor(0xD2B48C)
  13.             Column() {
  14.             }.width('80%').height(50).backgroundColor(0xF5DEB3)
  15.         }
  16.         .width('100%')
  17.         // 设置列容器组件的子组件在水平方向右对齐
  18.         .alignItems(HorizontalAlign.End)
  19.         .backgroundColor('rgb(242,242,242)')
  20.     }
  21. }
复制代码

Row容器内子元素在垂直方向上的排列


Row容器内子元素在垂直方向上的排列图

1. VerticalAlign.Top：子元素在垂直方向顶部对齐。
  1. @Entry
  2. @Component
  3. struct LinearLayout06 {
  4.     build() {
  5.         // 行容器组件默认情况下对子组件在水平方向从左向右布局
  6.         Row({}) {
  7.             Column() {
  8.             }.width('20%').height(30).backgroundColor(0xF5DEB3)
  10.             Column() {
  11.             }.width('20%').height(30).backgroundColor(0xD2B48C)
  13.             Column() {
  14.             }.width('20%').height(30).backgroundColor(0xF5DEB3)
  15.         }
  16.         .width('100%')
  17.         .height(200)
  18.         // 设置行容器子组件在垂直方向顶部对齐
  19.         .alignItems(VerticalAlign.Top)
  20.         .backgroundColor('rgb(242,242,242)')
  21.     }
  22. }
复制代码

2. VerticalAlign.Center：子元素在垂直方向居中对齐。
  1. @Entry
  2. @Component
  3. struct LinearLayout07 {
  4.     build() {
  5.         // 行容器组件默认情况下对子组件在水平方向从左向右布局
  6.         Row({}) {
  7.             Column() {
  8.             }.width('20%').height(30).backgroundColor(0xF5DEB3)
  10.             Column() {
  11.             }.width('20%').height(30).backgroundColor(0xD2B48C)
  13.             Column() {
  14.             }.width('20%').height(30).backgroundColor(0xF5DEB3)
  15.         }
  16.         .width('100%')
  17.         .height(200)
  18.         // 设置行容器组件的子组件在垂直方向居中对齐
  19.         .alignItems(VerticalAlign.Center)
  20.         .backgroundColor('rgb(242,242,242)')
  21.     }
  22. }
复制代码

3. VerticalAlign.Bottom：子元素在垂直方向底部对齐。
  1. @Entry
  2. @Component
  3. struct LinearLayout08 {
  4.     build() {
  5.         // 行容器组件默认情况下对子组件在水平方向上从左向右布局
  6.         Row({}) {
  7.             Column() {
  8.             }.width('20%').height(30).backgroundColor(0xF5DEB3)
  10.             Column() {
  11.             }.width('20%').height(30).backgroundColor(0xD2B48C)
  13.             Column() {
  14.             }.width('20%').height(30).backgroundColor(0xF5DEB3)
  15.         }.width('100%').height(200)
  16.         // 设置行容器组件的子组件在垂直方向上底部对齐
  17.         .alignItems(VerticalAlign.Bottom).backgroundColor('rgb(242,242,242)')
  18.     }
  19. }
复制代码

布局子元素在主轴上的排列方式

在布局容器内，可以通过justifyContent属性设置子元素在容器主轴上的排列方式。可以从主轴起始位置开始排布，也可以从主轴结束位置开始排布，或者均匀分割主轴的空间。
Column容器内子元素在垂直方向上的排列


Column容器内子元素在垂直方向上的排列图

1. justifyContent(FlexAlign.Start)：元素在垂直方向顶部对齐，第一个元素与顶部对齐，后续元素与前一个对齐。
  1. @Entry
  2. @Component
  3. struct LinearLayout09 {
  4.     build() {
  5.         // 列容器组件默认情况下对子组件在垂直方向从上向下布局
  6.         Column({}) {
  7.             Column() {
  8.             }.width('80%').height(50).backgroundColor(0xF5DEB3)
  10.             Column() {
  11.             }.width('80%').height(50).backgroundColor(0xD2B48C)
  13.             Column() {
  14.             }.width('80%').height(50).backgroundColor(0xF5DEB3)
  15.         }
  16.         .width('100%')
  17.         .height(300)
  18.         .backgroundColor('rgb(242,242,242)')
  19.         // 设置列容器组件子组件在垂直方向顶部对齐，第一个元素与顶部对齐，后续元素与前一个对齐。
  20.         .justifyContent(FlexAlign.Start)
  21.     }
  22. }
复制代码

2. justifyContent(FlexAlign.Center)：元素在垂直方向中心对齐，第一个元素与顶部的距离与最后一个元素与底部距离雷同。
  1. @Entry
  2. @Component
  3. struct LinearLayout10 {
  4.     build() {
  5.         // 列容器组件默认情况下对子组件在垂直方向上从上向下布局
  6.         Column({}) {
  7.             Column() {
  8.             }.width('80%').height(50).backgroundColor(0xF5DEB3)
  10.             Column() {
  11.             }.width('80%').height(50).backgroundColor(0xD2B48C)
  13.             Column() {
  14.             }.width('80%').height(50).backgroundColor(0xF5DEB3)
  15.         }.width('100%').height(300).backgroundColor('rgb(242,242,242)')
  16.         // 设置列容器子组件在垂直方向中心对齐，第一个元素与顶部的距离与最后一个元素与底部距离相同。
  17.         .justifyContent(FlexAlign.Center)
  18.     }
  19. }
复制代码
3. justifyContent(FlexAlign.End)：元素在垂直方向底部对齐，最后一个元素与底部对齐，其他元素与后一个对齐。
  1. @Entry
  2. @Component
  3. struct LinearLayout11 {
  4.     build() {
  5.         // 列容器组件默认情况下对子组件在垂直方向上从上向下布局
  6.         Column({}) {
  7.             Column() {
  8.             }.width('80%').height(50).backgroundColor(0xF5DEB3)
  10.             Column() {
  11.             }.width('80%').height(50).backgroundColor(0xD2B48C)
  13.             Column() {
  14.             }.width('80%').height(50).backgroundColor(0xF5DEB3)
  15.         }.width('100%').height(300).backgroundColor('rgb(242,242,242)')
  16.         // 设置列容器子组件在垂直方向底部对齐，最后一个元素与底部对齐，其他元素与后一个对齐。
  17.         .justifyContent(FlexAlign.End)
  18.     }
  19. }
复制代码

4. justifyContent(FlexAlign.SpaceBetween)：垂直方向均匀分配元素，相邻元素之间距离雷同。第一个元素与容器顶部对齐，最后一个元素与容器底部对齐。
  1. @Entry
  2. @Component
  3. struct LinearLayout12 {
  4.     build() {
  5.         // 列容器组件默认情况下对子组件在垂直方向从上向下布局
  6.         Column({}) {
  7.             Column() {
  8.             }.width('80%').height(50).backgroundColor(0xF5DEB3)
  10.             Column() {
  11.             }.width('80%').height(50).backgroundColor(0xD2B48C)
  13.             Column() {
  14.             }.width('80%').height(50).backgroundColor(0xF5DEB3)
  15.         }.width('100%').height(300).backgroundColor('rgb(242,242,242)')
  16.         // 垂直方向均匀分配元素，相邻元素之间距离相同。第一个元素与容器顶部对齐，最后一个元素与容器底部对齐。
  17.         .justifyContent(FlexAlign.SpaceBetween)
  18.     }
  19. }
复制代码

5. justifyContent(FlexAlign.SpaceAround)：垂直方向均匀分配元素，相邻元素之间距离雷同。第一个元素到容器顶部的距离和最后一个元素到容器底部的距离是相邻元素之间距离的一半。
  1. @Entry
  2. @Component
  3. struct LinearLayout13 {
  4.     build() {
  5.         // 列容器组件默认情况下对子组件在垂直方向从上向下布局
  6.         Column({}) {
  7.             Column() {
  8.             }.width('80%').height(50).backgroundColor(0xF5DEB3)
  10.             Column() {
  11.             }.width('80%').height(50).backgroundColor(0xD2B48C)
  13.             Column() {
  14.             }.width('80%').height(50).backgroundColor(0xF5DEB3)
  15.         }.width('100%').height(300).backgroundColor('rgb(242,242,242)')
  16.         // 设置列容器组件子组件垂直方向均匀分配元素，相邻元素之间距离相同。
  17.         // 第一个元素到容器顶部的距离和最后一个元素到容器底部的距离是相邻元素之间距离的一半。
  18.         .justifyContent(FlexAlign.SpaceAround)
  19.     }
  20. }
复制代码


6. justifyContent(FlexAlign.SpaceEvenly)：垂直方向均匀分配元素，相邻元素之间的距离、第一个元素与容器顶部的间距、最后一个元素到容器底部的间距都完全一样。
  1. @Entry
  2. @Component
  3. struct LinearLayout14 {
  4.     build() {
  5.         // 列容器组件默认情况下对子组件在垂直方向上并从上向下布局
  6.         Column({}) {
  7.             Column() {
  8.             }.width('80%').height(50).backgroundColor(0xF5DEB3)
  10.             Column() {
  11.             }.width('80%').height(50).backgroundColor(0xD2B48C)
  13.             Column() {
  14.             }.width('80%').height(50).backgroundColor(0xF5DEB3)
  15.         }.width('100%').height(300).backgroundColor('rgb(242,242,242)')
  16.         // 设置列容器子组件垂直方向均匀分配元素，
  17.         // 相邻元素之间的距离、第一个元素与容器顶部的间距、最后一个元素到容器底部的间距都完全一样。
  18.         .justifyContent(FlexAlign.SpaceEvenly)
  19.     }
  20. }
复制代码

Row容器内子元素在水平方向上的排列


Row容器内子元素在水平方向上的排列图

1. ustifyContent(FlexAlign.Start)：元素在水平方向左对齐，第一个元素与容器左侧对齐，同时后续的元素与前一个对齐。
  1. @Entry
  2. @Component
  3. struct LinearLayout15 {
  4.     build() {
  5.         // 行容器组件默认情况下对子组件在水平方向上从左向右布局
  6.         Row({}) {
  7.             Column() {
  8.             }.width('20%').height(30).backgroundColor(0xF5DEB3)
  10.             Column() {
  11.             }.width('20%').height(30).backgroundColor(0xD2B48C)
  13.             Column() {
  14.             }.width('20%').height(30).backgroundColor(0xF5DEB3)
  15.         }.width('100%').height(200).backgroundColor('rgb(242,242,242)')
  16.         // 设置行容器组件的子组件在水平方向左对齐，第一个元素与容器左侧对齐，同时后续的元素与前一个对齐。
  17.         .justifyContent(FlexAlign.Start)
  18.     }
  19. }
复制代码

2. justifyContent(FlexAlign.Center)：元素在水平方向居中对齐，第一个元素与容器左侧的距离与最后一个元素与容器右侧距离雷同。
  1. @Entry
  2. @Component
  3. struct LinearLayout16 {
  4.     build() {
  5.         // 行容器组件默认情况下对子组件在水平方向从左向右布局
  6.         Row({}) {
  7.             Column() {
  8.             }.width('20%').height(30).backgroundColor(0xF5DEB3)
  10.             Column() {
  11.             }.width('20%').height(30).backgroundColor(0xD2B48C)
  13.             Column() {
  14.             }.width('20%').height(30).backgroundColor(0xF5DEB3)
  15.         }.width('100%').height(200).backgroundColor('rgb(242,242,242)')
  16.         // 设置行容器子组件在水平方向居中对齐，第一个元素与容器左侧的距离与最后一个元素与容器右侧距离相同。
  17.         .justifyContent(FlexAlign.Center)
  18.     }
  19. }
复制代码

3. justifyContent(FlexAlign.End)：元素在水平方向右对齐，最后一个元素与行容器右侧对齐，其他元素与后一个对齐。
  1. @Entry
  2. @Component
  3. struct LinearLayout17 {
  4.     build() {
  5.         // 行容器组件默认情况下对子组件在水平方向从左向右布局
  6.         Row({}) {
  7.             Column() {
  8.             }.width('20%').height(30).backgroundColor(0xF5DEB3)
  10.             Column() {
  11.             }.width('20%').height(30).backgroundColor(0xD2B48C)
  13.             Column() {
  14.             }.width('20%').height(30).backgroundColor(0xF5DEB3)
  15.         }.width('100%').height(200).backgroundColor('rgb(242,242,242)')
  16.         // 设置行容器子组件在水平方向右对齐，最后一个元素与行容器右侧对齐，其他元素与后一个对齐。
  17.         .justifyContent(FlexAlign.End)
  18.     }
  19. }
复制代码

4. justifyContent(FlexAlign.SpaceBetween)：水平方向均匀分配元素，相邻元素之间距离雷同。第一个元素与行首对齐，最后一个元素与行尾对齐。
  1. @Entry
  2. @Component
  3. struct LinearLayout18 {
  4.     build() {
  5.         // 行容器组件默认情况下对子组件在水平方向从左向右布局
  6.         Row({}) {
  7.             Column() {
  8.             }.width('20%').height(30).backgroundColor(0xF5DEB3)
  10.             Column() {
  11.             }.width('20%').height(30).backgroundColor(0xD2B48C)
  13.             Column() {
  14.             }.width('20%').height(30).backgroundColor(0xF5DEB3)
  15.         }.width('100%').height(200).backgroundColor('rgb(242,242,242)')
  16.         // 设置行容器子组件水平方向均匀分配元素，
  17.         // 相邻元素之间距离相同。第一个元素与容器左侧对齐，最后一个元素与容器右侧对齐。
  18.         .justifyContent(FlexAlign.SpaceBetween)
  19.     }
  20. }
复制代码

5. justifyContent(FlexAlign.SpaceAround)：水平方向均匀分配元素，相邻元素之间距离雷同。第一个元素到行容器左侧的距离和最后一个元素到行容器右侧的距离是相邻元素之间距离的一半。
  1. @Entry
  2. @Component
  3. struct LinearLayout19 {
  4.     build() {
  5.         // 行容器组件默认情况下对子组件在水平方向从左向右布局
  6.         Row({}) {
  7.             Column() {
  8.             }.width('20%').height(30).backgroundColor(0xF5DEB3)
  10.             Column() {
  11.             }.width('20%').height(30).backgroundColor(0xD2B48C)
  13.             Column() {
  14.             }.width('20%').height(30).backgroundColor(0xF5DEB3)
  15.         }.width('100%').height(200).backgroundColor('rgb(242,242,242)')
  16.         // 设置行容器子组件水平方向均匀分配元素，相邻元素之间距离相同。
  17.         // 第一个元素到行容器左侧的距离和最后一个元素到行容器右侧的距离是相邻元素之间距离的一半。
  18.         .justifyContent(FlexAlign.SpaceAround)
  19.     }
  20. }
复制代码

6. justifyContent(FlexAlign.SpaceEvenly)：水平方向均匀分配元素，相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。
  1. @Entry
  2. @Component
  3. struct LinearLayout20 {
  4.     build() {
  5.         // 行容器组件默认情况下对子组件在水平方向从左向右布局
  6.         Row({}) {
  7.             Column() {
  8.             }.width('20%').height(30).backgroundColor(0xF5DEB3)
  10.             Column() {
  11.             }.width('20%').height(30).backgroundColor(0xD2B48C)
  13.             Column() {
  14.             }.width('20%').height(30).backgroundColor(0xF5DEB3)
  15.         }.width('100%').height(200).backgroundColor('rgb(242,242,242)')
  16.         // 设置行容器子组件在水平方向均匀分配元素，
  17.         // 相邻元素之间的距离、第一个元素与容器左侧的间距、最后一个元素到容器右侧的间距都完全一样。
  18.         .justifyContent(FlexAlign.SpaceEvenly)
  19.     }
  20. }
复制代码

自顺应拉伸

在线性布局下，常用空白添补组件Blank，在容器主轴方向自动添补空白空间，到达自顺应拉伸效果。Row和Column作为容器，只需要添加宽高为百分比，当屏幕宽高发生变化时，会产生自顺应效果。
  1. @Entry
  2. @Component
  3. struct LinearLayout21 {
  4.     build() {
  5.         // 列容器组件默认情况下对子组件在垂直方向从上向下布局
  6.         Column() {
  7.             Row() {
  8.                 Text('Bluetooth').fontSize(18)
  9.                 // 空白填充组件Blank，在容器主轴方向自动填充空白空间，达到自适应拉伸效果
  10.                 Blank()
  11.                 Toggle({ type: ToggleType.Switch, isOn: true })
  12.             }.backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 }).width('100%')
  13.         }.backgroundColor(0xEFEFEF).padding(20).width('100%')
  14.     }
  15. }
复制代码

竖屏


横屏

自顺应缩放

自顺应缩放是指子元素随容器尺寸的变化而按照预设的比例自动调解尺寸，顺应各种不同巨细的设备。在线性布局中，可以使用以下两种方法实现自顺应缩放。
1. 父容器尺寸确定时，使用layoutWeight属性设置子元素和兄弟元素在主轴上的权重，忽略元素自己尺寸设置，使它们在恣意尺寸的设备下自顺应占满剩余空间。



横屏


竖屏

2. 父容器尺寸确定时，使用百分比设置子元素和兄弟元素的宽度，使他们在恣意尺寸的设备下保持固定的自顺应占比。
  1. @Entry
  2. @Component
  3. struct WidthExample {
  4.     build() {
  5.         Column() {
  6.             Row() {
  7.                 Column() {
  8.                     Text('left width 20%')
  9.                         .textAlign(TextAlign.Center)
  10.                 }.width('20%').backgroundColor(0xF5DEB3).height('100%')
  11.                 Column() {
  12.                     Text('center width 50%')
  13.                         .textAlign(TextAlign.Center)
  14.                 }.width('50%').backgroundColor(0xD2B48C).height('100%')
  15.                 Column() {
  16.                     Text('right width 30%')
  17.                         .textAlign(TextAlign.Center)
  18.                 }.width('30%').backgroundColor(0xF5DEB3).height('100%')
  19.             }.backgroundColor(0xffd306).height('30%')
  20.         }
  21.     }
  22. }
复制代码

横屏


竖屏

自顺应延伸

自顺应延伸是指在不同尺寸设备下，当页面的内容超出屏幕巨细而无法完全显示时，可以通过滚动条举行拖动展示。这种方法适用于线性布局中内容无法一屏展示的场景。通常有以下两种实现方式。


  • 在List中添加滚动条：当List子项目过多一屏放不下时，可以将每一个子元素放置在不同的组件中，通过滚动条举行拖动展示。可以通过scrollBar属性设置滚动条的常驻状态，edgeEffect属性设置拖动到内容最末端的回弹效果。
  • 使用Scroll组件：在线性布局中，开发者可以举行垂直方向或者水平方向的布局。当一屏无法完全显示时，可以在Column或Row组件的外层包裹一个可滚动的容器组件Scroll来实现可滑动的线性布局。
    垂直方向布局中使用Scroll组件：
    1. @Entry
    2. @Component
    3. struct ScrollExample {
    4.     scroller: Scroller = new Scroller();
    5.     private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
    7.     build() {
    8.         Scroll(this.scroller) {
    9.             Column() {
    10.                 ForEach(this.arr, (item?:number|undefined) => {
    11.                     if(item){
    12.                         Text(item.toString())
    13.                             .width('90%')
    14.                             .height(150)
    15.                             .backgroundColor(0xFFFFFF)
    16.                             .borderRadius(15)
    17.                             .fontSize(16)
    18.                             .textAlign(TextAlign.Center)
    19.                             .margin({ top: 10 })
    20.                     }
    21.                 }, (item:number) => item.toString())
    22.             }.width('100%')
    23.         }
    24.         .backgroundColor(0xDCDCDC)
    25.         .scrollable(ScrollDirection.Vertical) // 滚动方向为垂直方向   
    26.         .scrollBar(BarState.On) // 滚动条常驻显示  
    27.         .scrollBarColor(Color.Gray) // 滚动条颜色  
    28.         .scrollBarWidth(10) // 滚动条宽度  
    29.         .edgeEffect(EdgeEffect.Spring) // 滚动到边沿后回弹
    30.     }
    31. }
    复制代码

水平方向布局中使用Scroll组件：
  1. @Entry
  2. @Component
  3. struct ScrollExample {
  4.     scroller: Scroller = new Scroller();
  5.     private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
  7.     build() {
  8.         Scroll(this.scroller) {
  9.             Row() {
  10.                 ForEach(this.arr, (item?:number|undefined) => {
  11.                     if(item){
  12.                         Text(item.toString())
  13.                             .height('90%')
  14.                             .width(150)
  15.                             .backgroundColor(0xFFFFFF)
  16.                             .borderRadius(15)
  17.                             .fontSize(100)
  18.                             .textAlign(TextAlign.Center)
  19.                             .margin({ left: 10 })
  20.                     }
  21.                 })
  22.             }.height('100%')
  23.         }
  24.         .backgroundColor(0xDCDCDC)
  25.         .scrollable(ScrollDirection.Horizontal) // 滚动方向为水平方向   
  26.         .scrollBar(BarState.On) // 滚动条常驻显示   
  27.         .scrollBarColor(Color.Gray) // 滚动条颜色   
  28.         .scrollBarWidth(10) // 滚动条宽度   
  29.         .edgeEffect(EdgeEffect.Spring) // 滚动到边沿后回弹
  30.     }
  31. }
复制代码






免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

丝

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表