HarmonyOS学习ArkUI之线性布局 (Row/Column)

线性布局是其他布局的基础，其子元素在线性方向上（水平方向和垂直方向）依次排列.

Column(列,垂直布局)
Row(行,水平布局)

属性:

space 间隔
Blank 空白填充
layoutWeight(权重)等分

scss 复制代码

//滑动
Scroll(this.scroller) {
//间隔
Column({ space: "35" }) {
  Text("11").width("100%").backgroundColor("#333333").fontColor("#fff").textAlign(TextAlign.Center)
  Row() {
    Text("水平").width("100").backgroundColor("#333333").fontColor("#fff").textAlign(TextAlign.Center)
    //空白填充
    Blank()
    Toggle({ type: ToggleType.Checkbox, isOn: true })
  }.width("100%")

  Row({ space: "35" }) {
    Row() {
      Text("等分")
        .backgroundColor("#333333")
        .fontColor("#fff")
        .textAlign(TextAlign.Center)
        .align(Alignment.Center)
        .width("100%")
        .height("100")
    }
    //权重
    .layoutWeight(1).backgroundColor(Color.Blue)

    Row() {
      Text("等分")
        .backgroundColor("#333333")
        .fontColor("#fff")
        .textAlign(TextAlign.Center)
        .align(Alignment.Center)
        .width("100%")
        .height("100")
    }.layoutWeight(1).backgroundColor(Color.Blue)

    Row() {
      Text("等分")
        .backgroundColor("#333333")
        .fontColor("#fff")
        .textAlign(TextAlign.Center)
        .align(Alignment.Center)
        .width("100%")
        .height("100")
    }.layoutWeight(1).backgroundColor(Color.Blue)
  }.width("100%")

  Text("11").width("100%").backgroundColor("#333333").fontColor("#fff").textAlign(TextAlign.Center)
  Text("11").width("100%").backgroundColor("#333333").fontColor("#fff").textAlign(TextAlign.Center)
  Text("11").width("100%").backgroundColor("#333333").fontColor("#fff").textAlign(TextAlign.Center)
  Text("11").width("100%").backgroundColor("#333333").fontColor("#fff").textAlign(TextAlign.Center)
  Text("11").width("100%").backgroundColor("#333333").fontColor("#fff").textAlign(TextAlign.Center)
  Text("11").width("100%").backgroundColor("#333333").fontColor("#fff").textAlign(TextAlign.Center)
  Text("11").width("100%").backgroundColor("#333333").fontColor("#fff").textAlign(TextAlign.Center)
  Text("11").width("100%").backgroundColor("#333333").fontColor("#fff").textAlign(TextAlign.Center)
  Text("11").width("100%").backgroundColor("#333333").fontColor("#fff").textAlign(TextAlign.Center)
  Text("11").width("100%").backgroundColor("#333333").fontColor("#fff").textAlign(TextAlign.Center)
  Text("11").width("100%").backgroundColor("#333333").fontColor("#fff").textAlign(TextAlign.Center)
  Text("11").width("100%").backgroundColor("#333333").fontColor("#fff").textAlign(TextAlign.Center)
  Text("11").width("100%").backgroundColor("#333333").fontColor("#fff").textAlign(TextAlign.Center)

}.margin({right:20})
}
.backgroundColor(0xDCDCDC)
.scrollable(ScrollDirection.Vertical) // 滚动方向为垂直方向
.scrollBar(BarState.On) // 滚动条常驻显示
.scrollBarColor(Color.Gray) // 滚动条颜色
.scrollBarWidth(10) // 滚动条宽度
.edgeEffect(EdgeEffect.Spring) // 滚动到边沿后回弹
.width("100%").height("100%")
.padding({
  top: px2vp(ScreenUtil.getInstance().getTopRectHeight()),
  bottom: px2vp(ScreenUtil.getInstance().getBottomRectHeight())
})

总结

Row 水平布局
Colum 垂直布局
space 间隔
Blank 空布局填充 (自适应拉伸效果)
layoutWeight 权重效果
Scroll 滑动控件