一.线性布局

1.组件

• Column 容器:子元素 垂直方向 排列
• Row 容器:子元素 水平方向 排列

2.属性

• 主轴对齐方式：justifyContent

  
  
  image.png

Column() {}.justifyContent(FlexAlign.SpaceAround)
1.Start (排布主方向)主轴起始位置对齐
2.Center主轴居中对齐
3.End主轴结束位置对齐
4.SpaceBetween 贴边显示，中间的元素均匀分布间隙
5.SpaceAround 间隙环绕 0.5 1 1 1 0.5 的间隙分布，靠边只有一半的间隙6.SpaceEvenly 间隙均匀环绕，靠边也是完整的一份间隙

• 交叉轴对齐方式：alignItems

  
  
  image.png
  
  
  image.png

Column() {}..alignItems(HorizontalAlign.Start)

3.自适应伸缩 .layoutWeight(数字)

设置 layoutWeight 属性的 子元素 与 兄弟元素，会 按照权重 进行分配 主轴 的 空间 (剩余空间)

 Column() {
          Text("儿童设备介入")
          Text("说明文案")
        }.backgroundColor(Color.Brown)
        .alignItems(HorizontalAlign.Start)
        .layoutWeight(1)

二.弹性布局(Flex)

1.参数对象:

• direction：主轴方向:
• justifyContent：主轴对齐方式
• alignItems ：交叉轴对齐方式
• wrap：布局换行wrap：单行或者单列: 优先使用线性布局(基于Flex设计，做了性能优化)

2.wrap 属性:换行

• FlexWrap.NoWrap 单行布局
• FlexWrap.Wrap 多行布局

    Flex({wrap:FlexWrap.Wrap}){
        Text("ArkTs1").backgroundColor(Color.Gray).padding(10).margin(10)
        Text("ArkTs2").backgroundColor(Color.Gray).padding(10).margin(10)
        Text("ArkTs3").backgroundColor(Color.Gray).padding(10).margin(10)
        Text("ArkTs4").backgroundColor(Color.Gray).padding(10).margin(10)
        Text("ArkTs5").backgroundColor(Color.Gray).padding(10).margin(10)

      }.padding(10)

image.png

三.绝对定位

• 作用:控制组件位置，可以实现层叠效果
• 特点:参照 父组件左上角 进行偏移、绝对定位后的组件 不再占用自身原有位置
• 语法:.position(位置对象)
  参数:{ x: 水平偏移量, y: 垂直偏移量 }
• zIndex 层级：调整组件层级
  语法:.zIndex(数字) 参数:取值为整数数字，取值越大，显示层级越高

     Text("1")
        .padding(40)
        .backgroundColor(Color.Gray)
        .position({x:0,y:0})
        .zIndex(0)
      Text("2")
        .padding(30)
        .backgroundColor(Color.Red)
        .position({x:0,y:0})
        .zIndex(2)
      Text("3")
        .padding(20)
        .backgroundColor(Color.Blue)
        .position({x:0,y:0})

image.png

四.层叠布局

  Stack({alignContent:Alignment.TopStart}){
        Text("1")
          .padding(40)
          .backgroundColor(Color.Gray)
        Text("2")
          .padding(30)
          .backgroundColor(Color.Red)
        Text("3")
          .padding(20)
          .backgroundColor(Color.Blue)
      }

五.滚动容器 Scroll

1.属性

image.png

2.控制器：控制滚动、获取滚动距离

struct ScrollDemo {
scroller: Scroller = new Scroller()
  build() {
    Column() {
     Scroll(this.scroller) { ... } 
       .scrollable(ScrollDirection.Vertical)//1.滑动方向
       .scrollBar(BarState.Auto)//2.滚动条状态
       .scrollBarColor(Color.Red)//3.滚动条颜色
       .edgeEffect(EdgeEffect.Spring)//4.设置边缘滑动效果
     Row() {
     Button('返回顶部')
      .onClick(() => {
          this.scroller.scrollEdge(Edge.Top) 
        })
     Button('获取滚动距离') 
      .onClick(() => {
         const x = this.scroller.currentOffset().xOffset 
         const y =this.scroller.currentOffset().yOffset 
          AlertDialog.show({
              message:`x:${x},y:${y}`
            })
   }) }
  } }
}

六.容器组件 Tabs

image.png

1.属性

• barPosition :调整位置 开头 或 结尾 (参数)
• vertical :调整导航 水平 或 垂直
• scrollable :调整是否 手势滑动 切换
• animationDuration :点击滑动动画时间

@Entry
@Component
struct Index {
  build() {
    Tabs() {
      TabContent() {
       
      }.tabBar("首页")

      TabContent() {
      }.tabBar("动态")

      TabContent() {
      }.tabBar("商城")

      TabContent() {
      }.tabBar("我的")
    }
    .barPosition(BarPosition.End)//1.TabBar 位置
    .scrollable(true)//2.是否收拾滑动
    .animation({duration:0})
  }
}

2.自定义TabBar

Tabs() {
    TabContent() {
      // 内容略
   }
.tabBar(this.tabBarBuilder()) }
   
 @Builder
 tabBarBuilder() {
      // 自定义的Tabbar结构
 }

3.高亮切换

核心思路:

1. 监听切换事件 → 得到索引值，记录高亮的索引
2. 给每个 tabBar起个标记，0，1，2
3. 在 tabBar 内部比较 标记 == 记录的索引 ? 高亮 : 不高亮

image.png