#HarmonyOS NEXT体验官# 掌握 HarmonyOS 布局管理：灵活构建用户界面（下）原创

SoraLuna

发布于 2024-8-9 19:10

浏览

1收藏

掌握 HarmonyOS 布局管理：灵活构建用户界面（下）

本文将继续探讨 HarmonyOS 中的其他布局容器组件，如 List 和 Swiper，并学习如何通过这些组件创建动态和可交互的用户界面。同时，我们还将介绍布局嵌套的技巧及优化建议，以提升应用的性能和用户体验。

一、 List 容器组件

List 是一种常用的容器组件，用于显示可滚动的项目列表。以下是 List 和 ListItem 的属性和使用示例：

List 组件的属性
- listDirection: 设置列表的滚动方向，可以是垂直或水平。
- divider: 设置列表项之间的分割线。

创建列表并显示动态数据

下面的代码展示了如何使用列表显示动态数据，并处理列表项的点击事件：

class Item {
  public name: string = ""
}

@Component
export struct ListDemo {
  @State items: Item[] = [
    { name: 'Item 1' },
    { name: 'Item 2' },
    { name: 'Item 3' }
  ]
  @State selectedItem: string = ''

  build() {
    Column() {
      List() {
        ForEach(this.items, (item: Item) => {
          ListItem() {
            Text(item.name)
          }
          .onClick(() => this.selectedItem = item.name)
        }, (item: Item) => item.name)
      }
      if (this.selectedItem) {
        Text(`Selected: ${this.selectedItem}`)
      }
    }
    .width('100%')
    .height('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.

预览效果：

#HarmonyOS NEXT体验官# 掌握 HarmonyOS 布局管理：灵活构建用户界面（下）-鸿蒙开发者社区

二、 Swiper 容器组件

Swiper 是一个用于创建滑动切换效果的组件，常用于轮播图和图片滑动展示。以下是 Swiper 的属性和使用示例：

Swiper 组件的属性
- index: 设置当前展示的页面索引。
- autoPlay: 启用自动播放。

Swiper 示例

下面的代码展示了如何创建一个自动播放的 Swiper 组件：

@Component
export struct SwiperDemo {
  private swiperController: SwiperController = new SwiperController()
  private items: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

  build() {
    Column({ space: 5 }) {
      Swiper(this.swiperController) {
        ForEach(this.items, (item: number) => {
          Text(item.toString())
            .width('90%')
            .height(160)
            .backgroundColor(0xAFEEEE)
            .textAlign(TextAlign.Center)
            .fontSize(30)
        }, (item: number) => item.toString())
      }
      .autoPlay(true)
      .interval(4000)
      .loop(true)
      .indicator(
        new DotIndicator()
          .itemWidth(15)
          .itemHeight(15)
          .selectedItemWidth(15)
          .selectedItemHeight(15)
          .color(Color.Gray)
          .selectedColor(Color.Blue))
      .onChange((index: number) => {
        console.info(index.toString())
      })
    }.width('100%')
    .margin({ top: 5 })
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.

预览效果：

#HarmonyOS NEXT体验官# 掌握 HarmonyOS 布局管理：灵活构建用户界面（下）-鸿蒙开发者社区

三、布局嵌套与优化

布局嵌套是构建复杂界面的基础。在嵌套布局时，需注意以下几点以优化界面性能：

实现布局嵌套

以下示例展示了如何在一个布局中嵌套使用其他布局：

@Component
export struct NestedLayoutDemo {
  build() {
    Column() {
      Row() {
        Column() {
          Text('Column 1, Row 1')
          Text('Column 1, Row 2')
        }
        Column() {
          Text('Column 2, Row 1')
          Text('Column 2, Row 2')
        }
      }
      Row() {
        Column() {
          Text('Column 3, Row 1')
          Text('Column 3, Row 2')
        }
        Column() {
          Text('Column 4, Row 1')
          Text('Column 4, Row 2')
        }
      }
    }
    .width('100%')
    .height('100%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.