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

2024-04-15
湖南
本文字数：2710 字
阅读完需：约 9 分钟

🚀前言

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

常见页面结构图：

不就元素组成：

🚀一、Row/Column

🔎1.线性布局

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

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

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

🔎2.间距

Column({ space: 20 }) 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 权重

@Entry@Componentstruct layoutWeightExample {  build() {    Column() {      Text('1:2:3').width('100%')      Row() {        Column() {          Text('layoutWeight(1)')            .textAlign(TextAlign.Center)        }.layoutWeight(1).backgroundColor(0xF5DEB3).height('100%')
        Column() {          Text('layoutWeight(2)')            .textAlign(TextAlign.Center)        }.layoutWeight(2).backgroundColor(0xD2B48C).height('100%')
        Column() {          Text('layoutWeight(3)')            .textAlign(TextAlign.Center)        }.layoutWeight(3).backgroundColor(0xF5DEB3).height('100%')
      }.backgroundColor(0xffd306).height('30%')
      Text('2:5:3').width('100%')      Row() {        Column() {          Text('layoutWeight(2)')            .textAlign(TextAlign.Center)        }.layoutWeight(2).backgroundColor(0xF5DEB3).height('100%')
        Column() {          Text('layoutWeight(5)')            .textAlign(TextAlign.Center)        }.layoutWeight(5).backgroundColor(0xD2B48C).height('100%')
        Column() {          Text('layoutWeight(3)')            .textAlign(TextAlign.Center)        }.layoutWeight(3).backgroundColor(0xF5DEB3).height('100%')      }.backgroundColor(0xffd306).height('30%')    }  }}

复制代码

🦋6.2 百分比

@Entry@Componentstruct WidthExample {  build() {    Column() {      Row() {        Column() {          Text('left width 20%')            .textAlign(TextAlign.Center)        }.width('20%').backgroundColor(0xF5DEB3).height('100%')
        Column() {          Text('center width 50%')            .textAlign(TextAlign.Center)        }.width('50%').backgroundColor(0xD2B48C).height('100%')
        Column() {          Text('right width 30%')            .textAlign(TextAlign.Center)        }.width('30%').backgroundColor(0xF5DEB3).height('100%')      }.backgroundColor(0xffd306).height('30%')    }  }}

复制代码

🔎7.Scroll 组件自适应延伸

🦋7.1 列自适应延伸

@Entry@Componentstruct ScrollExample {  scroller: Scroller = new Scroller();  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
  build() {    Scroll(this.scroller) {      Column() {        ForEach(this.arr, (item) => {          Text(item.toString())            .width('90%')            .height(150)            .backgroundColor(0xFFFFFF)            .borderRadius(15)            .fontSize(16)            .textAlign(TextAlign.Center)            .margin({ top: 10 })        }, item => item)      }.width('100%')    }    .backgroundColor(0xDCDCDC)    .scrollable(ScrollDirection.Vertical) // 滚动方向纵向    .scrollBar(BarState.On) // 滚动条常驻显示    .scrollBarColor(Color.Gray) // 滚动条颜色    .scrollBarWidth(10) // 滚动条宽度    .edgeEffect(EdgeEffect.Spring) // 滚动到边沿后回弹  }}

复制代码

🦋7.2 行自适应延伸

@Entry@Componentstruct ScrollExample {  scroller: Scroller = new Scroller();  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
  build() {    Scroll(this.scroller) {      Row() {        ForEach(this.arr, (item) => {          Text(item.toString())            .height('90%')            .width(150)            .backgroundColor(0xFFFFFF)            .borderRadius(15)            .fontSize(16)            .textAlign(TextAlign.Center)            .margin({ left: 10 })        })      }.height('100%')    }    .backgroundColor(0xDCDCDC)    .scrollable(ScrollDirection.Horizontal) // 滚动方向横向    .scrollBar(BarState.On) // 滚动条常驻显示    .scrollBarColor(Color.Gray) // 滚动条颜色    .scrollBarWidth(10) // 滚动条宽度    .edgeEffect(EdgeEffect.Spring) // 滚动到边沿后回弹  }}

复制代码

🚀二、登录案例

build() {  Column({space:20}) {    Image( 'logo .png')    TextInput({placeholder:'用户名'})    TextInput({placeholder:'密码'})      .type(InputType.Password)      .showPasswordIcon(true)    Button('登录')    Row(){      Checkbox()      Text('记住我')        .fontColor('#36D')    }  }  .height('100%')}

复制代码

执行效果：

看完三件事❤️

如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我四个小忙：
点赞，转发，有你们的『点赞和评论』，才是我创造的动力。
关注公众号『 蜀道衫 』，不定期分享原创知识。
同时可以期待后续文章 ing🚀
关注后回复【666】扫码即可获取鸿蒙学习资料包

发布于: 刚刚阅读数: 2

蜀道山

关注

欢迎关注作者公众号：【蜀道衫】 2023-12-29 加入

3年Java后端，5年Android应用开发，精通Java高并发、JVM调优、以及Android开发各种技能。现专研学习鸿蒙HarmonyOS Next操作系统

发布

暂无评论

创作场景

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

🚀前言

🚀一、Row/Column

🔎1.线性布局

🔎2.间距

🔎3.对齐方式

🦋3.1 水平对齐

🦋3.2 垂直对齐

🔎4.排列方式

🦋4.1 水平排列

🦋4.2 垂直排列

🔎5.自适应拉伸

🦋5.1 水平拉伸

🔎6.自适应缩放

🦋6.1 权重

🦋6.2 百分比

🔎7.Scroll 组件自适应延伸

🦋7.1 列自适应延伸

🦋7.2 行自适应延伸

🚀二、登录案例

看完三件事❤️

蜀道山

评论