ArkUI 高频场景串讲

• 常见布局场景
• 深色模式
• 实现页面聊天功能

---

常见布局场景

1. 滚动类组件嵌套冲突
2. WaterFlow
   • 瀑布流页面多列混排
   • 瀑布流页面中某个Item吸顶
3. Tabs
   • Tab嵌套List滚动吸顶效果
   • tabContext自定义切换动画
   • Tabbar页签自定义样式
4. Grid
   • gird和List嵌套使用
   • Grild和Swiper嵌套使用
5. Swiper
   • 自定义滑动

---

滚动类组件嵌套冲突

滚动类组件：

WaterFlow，List，Grid，Scroll，Swiper

场景描述：

外层Scroll嵌套WaterFlow。上滑时，WaterFlow未触顶时，整个Scroll先滚动;
当WaterFlow触顶时，WaterFlow内部滚动。
下滑时当WaterFlow不触顶时，Scroll和WaterFlow一起顺滑下滚。

代码：

@Entry
@ComponentV2
struct Index {
  @Local dataArr: Array<string> = []; // 数据源

  aboutToAppear(): void {
    for (let i = 0; i < 40; i++) {
      this.dataArr.push(`data_${i}`); // 为数组添加一些数据
    }
  }

  build() {
    Column() {
      List() { //外部的滚动组件
        ListItem() {
          Row()
            .width('100%')
            .height('30%')
            .backgroundColor(Color.Green)
        }

        ListItem() {
          List() { //内部的滚动组件
            Repeat<string>(this.dataArr) //循环
              .each((ri: RepeatItem<string>) => {
                ListItem() {
                  Text('each_' + ri.item).fontSize(30)
                }
              })
          }
          .height('100%')
          .width('100%')
        }
      }
      .height('100%')
      .width('100%')
    }
  }
}

组件树

影响：

解决方案：

给WaterFlow组件设置嵌套滚动模式（nestedScroll）可以实现触顶丝滑切换滚动。

枚举值名称	描述
SELF_FIRST	自身先滚动，自身滚动到边缘以后父组件滚动。父组件滚动到边缘以后，如果父组件有边缘效果，则父组件出发边缘效果，否则子组件触发边缘效果。
PARENT_FIRST	父组件先滚动，父组件滚动到边缘以后自身滚动。自身滚动到边缘以后，如果有边缘效果，会触发自身的边缘效果，否则出发父组件的边缘效果。

核心代码：

List() {
//...
}
.nestedScroll({
  scrollForward: NestedScrollMode.PARENT_FIRST, //向上滚动
  scrollBackward: NestedScrollMode.SELF_FIRST //向下滚动
})

全部代码：

// 在List容器组件中使用Repeat
@Entry
@ComponentV2
  // 推荐使用V2装饰器
struct Index {
  @Local dataArr: Array<string> = []; // 数据源

  aboutToAppear(): void {
    for (let i = 0; i < 40; i++) {
      this.dataArr.push(`data_${i}`); // 为数组添加一些数据
    }
  }

  build() {
    Column() {
      List() { //外部的滚动组件
        ListItem() {
          Row()
            .width('100%')
            .height('30%')
            .backgroundColor(Color.Green)
        }

        ListItem() {
          List() { //内部的滚动组件
            Repeat<string>(this.dataArr)
              .each((ri: RepeatItem<string>) => {
                ListItem() {
                  Text('each_' + ri.item).fontSize(30)
                }
              })
          }
          .nestedScroll({
            scrollForward: NestedScrollMode.PARENT_FIRST,
            scrollBackward: NestedScrollMode.SELF_FIRST
          })
          .height('100%')
          .width('100%')
        }
      }
      .nestedScroll({
        scrollForward: NestedScrollMode.PARENT_FIRST,
        scrollBackward: NestedScrollMode.SELF_FIRST
      })
      .height('100%')
      .width('100%')
    }
  }
}

修复后效果：

---

WaterFlow

基本介绍

• 瀑布流容器布局，将元素项目自上而下排列。多列参差不齐、不停加载，这种形式使其内容看着像瀑布从上而下倾斜。
• 通常用于展示图片信息，购物商品、直播视频等多种形式的数据，常见于购物软件、短视频软件。

使用场景

• 场景一：瀑布流页面多列混排
• 场景二：瀑布流页面中某个Item吸顶

使用

1.创建分组信息对象，绑定到WaterFlow上

单列分组信息：

oneColumnSection: SectionOptions = {
    itemsCount: 4,
    crossCount: 1,
    columnsGap: 5,
    rowsGap: 10,
    margin: {},
    // onGetItemMainSizeByIndex
  }

两列分组信息：

twoColumSection: SectionOptions = {
    itemsCount: 20,
    crossCount: 2,
     // onGetItemMainSizeByIndex
  }

Section对象属性	描述
itemsCount	必填，一个分组中FlowItem的数量，必须是整数
crossCount	纵向布局时为列数，横向布局时为行数。默认值：1
columnsGap	该分组的列间距，不设置时使用WaterFlow的columnsGap
rowsGap	该分组的行间距，不设置时使用WaterFlow的rowsGap
margin	设置分组的外边距
onGetItemMainSizeByIndex	布局过程中获取指定Index的FlowItem的主轴大小，纵向瀑布流时为高度，横向瀑布流时为宽度

绑定到WaterFlow上

@Local sections: WaterFlowSections = new WaterFlowSections()
@Local scroller: Scroller = new Scroller()

build() {
  Column() {
    WaterFlow({ scroller: this.scroller, sections: this.sections }){ //其他属性见详情
      LazyForEach(this.data,(item: number)=> {
        FlowItem() {
          //...自定义实现FlowItem内容
        }
      },(item: string)=> item)
    }
  }
}

• scroller: 可滚动组件的控制器，一次只可绑定一个滚动组件
• footer: 设置尾部组件。（不可与分组混合布局混用）
• sections：设置FlowItem分组，实现不同分组使用不同烈数混合布局
• layoutMode：设置布局模式

2.不同分组数据处理