鸿蒙HarmonyOS实战-ArkUI组件（Row/Column）

前言

HarmonyOS的布局组件是一组用于构建用户界面布局的组件，包括线性布局、相对布局、网格布局等。这些组件帮助开发者以简单和灵活的方式管理和组织应用程序中的视图，并支持多种不同的设备屏幕尺寸和方向。使用HarmonyOS的布局组件可以提高应用程序的可读性和可维护性，并帮助快速构建适应不同设备的用户界面。

常见页面结构图：
在这里插入图片描述
不就元素组成：
在这里插入图片描述

一、Row/Column

1.线性布局

线性布局（LinearLayout）是一种常用的UI布局方式，通过线性容器 Row 和 Column 构建。线性布局是其他布局的基础，其子元素在线性方向上（水平方向和垂直方向）依次排列。线性布局的排列方向由所选容器组件决定，Column 容器内子元素按照垂直方向排列，Row 容器内子元素按照水平方向排列。根据不同的排列方向，开发者可选择使用 Row 或 Column 容器创建线性布局。线性布局的优点是可以根据不同的排列需求创建灵活的布局，同时也方便管理子元素的位置和大小。

容器组件排列方向特点
Column垂直子元素按垂直方向排列
Row水平子元素按水平方向排列

Column容器内子元素排列示意图：
在这里插入图片描述
Row容器内子元素排列示意图：
在这里插入图片描述

2.间距

  1. Column({ space: 20 }) 
  2. Row({ space: 35 })

在这里插入图片描述
在这里插入图片描述

3.对齐方式

3.1 水平对齐

Column({}) {}.alignItems(HorizontalAlign.Start)

在这里插入图片描述

3.2 垂直对齐

Column({}) {}.alignItems(VerticalAlign.Top)

在这里插入图片描述

4.排列方式

4.1 水平排列

Column({}) {}.justifyContent(FlexAlign.Start)

在这里插入图片描述

4.2 垂直排列

Row({}) {}.justifyContent(FlexAlign.Start)

在这里插入图片描述

5.自适应拉伸

5.1 水平拉伸

因为自适应一般是讲宽度，其实高度也行，但原理一样

Column({}) {}.width('100%')

在这里插入图片描述

6.自适应缩放

6.1 权重

  1. @Entry
  2. @Component
  3. struct layoutWeightExample {
  4.   build() {
  5.     Column() {
  6.       Text('1:2:3').width('100%')
  7.       Row() {
  8.         Column() {
  9.           Text('layoutWeight(1)')
  10.             .textAlign(TextAlign.Center)
  11.         }.layoutWeight(1).backgroundColor(0xF5DEB3).height('100%')
  12.  
  13.         Column() {
  14.           Text('layoutWeight(2)')
  15.             .textAlign(TextAlign.Center)
  16.         }.layoutWeight(2).backgroundColor(0xD2B48C).height('100%')
  17.  
  18.         Column() {
  19.           Text('layoutWeight(3)')
  20.             .textAlign(TextAlign.Center)
  21.         }.layoutWeight(3).backgroundColor(0xF5DEB3).height('100%')
  22.  
  23.       }.backgroundColor(0xffd306).height('30%')
  24.  
  25.       Text('2:5:3').width('100%')
  26.       Row() {
  27.         Column() {
  28.           Text('layoutWeight(2)')
  29.             .textAlign(TextAlign.Center)
  30.         }.layoutWeight(2).backgroundColor(0xF5DEB3).height('100%')
  31.  
  32.         Column() {
  33.           Text('layoutWeight(5)')
  34.             .textAlign(TextAlign.Center)
  35.         }.layoutWeight(5).backgroundColor(0xD2B48C).height('100%')
  36.  
  37.         Column() {
  38.           Text('layoutWeight(3)')
  39.             .textAlign(TextAlign.Center)
  40.         }.layoutWeight(3).backgroundColor(0xF5DEB3).height('100%')
  41.       }.backgroundColor(0xffd306).height('30%')
  42.     }
  43.   }
  44. }

在这里插入图片描述

6.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.  
  12.         Column() {
  13.           Text('center width 50%')
  14.             .textAlign(TextAlign.Center)
  15.         }.width('50%').backgroundColor(0xD2B48C).height('100%')
  16.  
  17.         Column() {
  18.           Text('right width 30%')
  19.             .textAlign(TextAlign.Center)
  20.         }.width('30%').backgroundColor(0xF5DEB3).height('100%')
  21.       }.backgroundColor(0xffd306).height('30%')
  22.     }
  23.   }
  24. }

在这里插入图片描述

7.Scroll组件自适应延伸

7.1 列自适应延伸

  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];
  6.  
  7.   build() {
  8.     Scroll(this.scroller) {
  9.       Column() {
  10.         ForEach(this.arr, (item) => {
  11.           Text(item.toString())
  12.             .width('90%')
  13.             .height(150)
  14.             .backgroundColor(0xFFFFFF)
  15.             .borderRadius(15)
  16.             .fontSize(16)
  17.             .textAlign(TextAlign.Center)
  18.             .margin({ top: 10 })
  19.         }, item => item)
  20.       }.width('100%')
  21.     }
  22.     .backgroundColor(0xDCDCDC)
  23.     .scrollable(ScrollDirection.Vertical) // 滚动方向纵向
  24.     .scrollBar(BarState.On) // 滚动条常驻显示
  25.     .scrollBarColor(Color.Gray) // 滚动条颜色
  26.     .scrollBarWidth(10) // 滚动条宽度
  27.     .edgeEffect(EdgeEffect.Spring) // 滚动到边沿后回弹
  28.   }
  29. }

在这里插入图片描述

7.2 行自适应延伸

  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];
  6.  
  7.   build() {
  8.     Scroll(this.scroller) {
  9.       Row() {
  10.         ForEach(this.arr, (item) => {
  11.           Text(item.toString())
  12.             .height('90%')
  13.             .width(150)
  14.             .backgroundColor(0xFFFFFF)
  15.             .borderRadius(15)
  16.             .fontSize(16)
  17.             .textAlign(TextAlign.Center)
  18.             .margin({ left: 10 })
  19.         })
  20.       }.height('100%')
  21.     }
  22.     .backgroundColor(0xDCDCDC)
  23.     .scrollable(ScrollDirection.Horizontal) // 滚动方向横向
  24.     .scrollBar(BarState.On) // 滚动条常驻显示
  25.     .scrollBarColor(Color.Gray) // 滚动条颜色
  26.     .scrollBarWidth(10) // 滚动条宽度
  27.     .edgeEffect(EdgeEffect.Spring) // 滚动到边沿后回弹
  28.   }
  29. }

在这里插入图片描述

二、登录案例

  1. build() {
  2.   Column({space:20}) {
  3.     Image( 'logo .png')
  4.     TextInput({placeholder:'用户名'})
  5.     TextInput({placeholder:'密码'})
  6.       .type(InputType.Password)
  7.       .showPasswordIcon(true)
  8.     Button('登录')
  9.     Row(){
  10.       Checkbox()
  11.       Text('记住我')
  12.         .fontColor('#36D')
  13.     }
  14.   }
  15.   .height('100%')
  16. }

执行效果：
在这里插入图片描述

 ?写在最后

  • 如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
  • 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
  • 关注小编，同时可以期待后续文章ing?，不定期分享原创知识。
  • 想要获取文中提到的学习资料，请点击→全套鸿蒙HarmonyOS学习资料
  • 或者关注小编后私信回复【666】也可获取资料哦~~

注：本文转载自blog.csdn.net的蜀道山QAQ的文章"https://blog.csdn.net/shudaoshanQAQ/article/details/135395225"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。
复制链接
相关推荐
发表评论

评论记录：

未查询到任何数据！