开源 Arkts 鸿蒙应用开发（四）布局和常用控件

// 水平排列
Row({ space: 10 }) {
  Text('Item 1').fontSize(16)
  Text('Item 2').fontSize(16)
}.width('100%').justifyContent(FlexAlign.SpaceBetween)

// 垂直排列
Column({ space: 20 }) {
  Text('Header').fontSize(24)
  Text('Content').fontSize(16)
}.padding(16)

1.2 弹性布局，支持动态调整子元素大小、对齐方式（justifyContent、alignItems）

复制代码

Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween }) {
  Text('Item 1').width('30%').height(50).backgroundColor(0xF5DEB3)
  Text('Item 2').width('60%').height(50).backgroundColor(0xD2B48C)
}.width('100%').height('100%')

1.3 层叠布局，子元素可重叠（如模态框、浮动按钮）。

复制代码

Stack() {
  Image('bg.jpg').width('100%').height('100%')
  Text('Overlay').fontSize(20).position({ x: '50%', y: '50%' })
}

1.4 栅格布局，支持网格化布局，适用于多列展示

复制代码

@Entry
@Component
struct GridExample {
  @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green]

  build() {
    Column() {
      GridRow({
        columns: 4, // 4列布局
        gutter: {x: 10, y: 10} // 间距
      }) {

          GridCol({span: 1}) { // 每个子项占1列
            Row().width("100%").height("50vp")
          }.backgroundColor(Color.Red)

        GridCol({span: 1}) { // 每个子项占1列
          Row().width("100%").height("50vp")
        }.backgroundColor(Color.Orange)

        GridCol({span: 1}) { // 每个子项占1列
          Row().width("100%").height("50vp")
        }.backgroundColor(Color.Yellow)

        GridCol({span: 1}) { // 每个子项占1列
          Row().width("100%").height("50vp")
        }.backgroundColor(Color.Green)

        GridCol({span: 1}) { // 每个子项占1列
          Row().width("100%").height("50vp")
        }.backgroundColor(Color.Red)

      }
    }
  }
}

二、常用控件

常用控件通常有Text、Button、TextInput、Image、Progress、Radio、Toggle

综合实例

复制代码

@Entry
@Component
struct GridExample {
  @State username: string = ''
  @State password: string = ''

  build() {
    Column({ space: 20 }) {
      Text('用户登录')
        .fontSize(24)
        .alignSelf(ItemAlign.Start)

      TextInput({ text: this.username, placeholder: '用户名' })
        .border({ width: 1, color: 0xD9D9D9 })
        .borderRadius(8)

      TextInput({ text: this.password, placeholder: '密码' })
        .type(InputType.Password)
        .border({ width: 1, color: 0xD9D9D9 })
        .borderRadius(8)

      Button('登录')
        .width('100%')
        .backgroundColor(0x007DFF)
        .onClick(() => console.log('Login clicked'))

      Image('https://fc1tn.baidu.com/it/u=3941267013,1794140007&fm=202&mola=new&crop=v1')
        .objectFit(ImageFit.Cover)
        .width(100)
        .height(100)
      Progress({ value: 50, total: 100, type: ProgressType.Ring })
      // 单选框
      Radio({ value: 'Option 1', group: 'group1' })

      // 开关
      Toggle({ type: ToggleType.Switch, isOn: true })
    }.padding(24)
  }
}

开源 Arkts 鸿蒙应用 开发（四）布局和常用控件

开源 Arkts 鸿蒙应用开发（四）布局和常用控件