【HarmonyOS实战开发】鸿蒙 容器组件解析

Column 和 Row

Column 垂直布局 Row水平，主轴默认是Start，交叉轴默认是Center

Column({ space: 10 }) {
  Column() {
    Text('文本1').bordStyle()
    Text('文本2').bordStyle()
    Text('文本3').bordStyle()
    Text('文本3').bordStyle()
  }
  .bordStyle()
  .width(200)
  .height(200)
  // 主轴方向 默认是Start
  // FlexAlign.Center 中间，
  // FlexAlign.Start 开始的位置，
  // FlexAlign.End 结束的位置，
  // FlexAlign.SpaceBetween 上下贴边，其他平分
  // FlexAlign.SpaceAround 上下剩余，是其他剩余的一半
  // FlexAlign.SpaceEvenly 全部平分
  .justifyContent(FlexAlign.SpaceEvenly)
  // 交叉轴方向 默认是Center，End，Center
  .alignItems(HorizontalAlign.End)

Stack

堆叠容器,类似于FramLayout，默认是Center

// 参数 alignContent默认是Center，其他是8个方向加一个Center
Stack({ alignContent: Alignment.TopStart }) {
  Text('文本').margin({left:100,top:100})
  // 也可以用通用属性zIndex ，来控制再Z轴的方向
  Button('点我').zIndex(1)
}.bordStyle().width(200).height(200)

Flex

以弹性方式布局子组件的容器组件。Flex组件在渲染时存在二次布局过程，因此在对性能有严格要求的场景下建议使用
必须设置成 Wrap，否则跟row ，colom 没啥区别

Flex({
  // 主轴
  direction: FlexDirection.Row,
  // 是否换行，必须换呀，否则用这个就没啥意义了
  wrap: FlexWrap.Wrap,
  // 主轴方向
  justifyContent: FlexAlign.Start,
  // 所有子组件在Flex容器交叉轴上的对齐格式。
  alignItems: ItemAlign.End,
  // 交叉轴中有额外的空间时，多行内容的对齐方式
  alignContent: FlexAlign.Start
})

RelativeContainer

相对布局，android中的 ConstraintLayout ,用于复杂布局使用
anchor锚点，如果是父亲__container__，每个View都有id
top: {anchor: “container”, align: VerticalAlign.Top},

RelativeContainer() {
  Row().width(100).height(100)
    .backgroundColor("#ffec0a0a")
    .alignRules({
      top: {anchor: "__container__", align: VerticalAlign.Top},
      left: {anchor: "__container__", align: HorizontalAlign.Start}
    })
    .id("row1")
    }

Scroll

可滚动的容器组件，当子组件的布局尺寸超过父组件的尺寸时，内容可以滚动。切记，子不能设置高度，得自己铺满父,nestedScroll api 10 可以实现滑动前套问题

Scroll(this.scroller) {
  Column() {
    ForEach(this.arr, (item: number) => {
      Text(item.toString())
        .width('90%')
        .height(150)
        .backgroundColor(0xFFFFFF)
        .borderRadius(15)
        .fontSize(16)
        .textAlign(TextAlign.Center)
        .margin({ top: 10 })
    }, (item: string) => item)
  }.width('100%')
}
.scrollable(ScrollDirection.Vertical) // 滚动方向纵向
.scrollBar(BarState.Off) // 滚动条常驻显示
.scrollBarColor(Color.Gray) // 滚动条颜色
.scrollBarWidth(10) // 滚动条宽度
.edgeEffect(EdgeEffect.None) // 是否像弹簧一样，根ios一样的效果
.friction(0.6) // api10 摩擦系数
.onScroll((xOffset: number, yOffset: number) => { //滚动事件回调, 返回滚动时水平、竖直方向偏移量，单位vp。
  // console.info(xOffset + ' ' + yOffset)
})
.onScrollEdge((side: Edge) => { //滚动到边缘