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 滑动控件
相关推荐
小喷友2 小时前
第4章 数据与存储
前端·app·harmonyos
小小小小小星19 小时前
鸿蒙开发核心功能模块全解析:从架构到实战应用
harmonyos
奶糖不太甜20 小时前
鸿蒙开发问题之纯血鸿蒙自启动步骤详解
harmonyos
xq95271 天前
鸿蒙next 获取versionCode和versionName
harmonyos
鸿蒙小白龙1 天前
openharmony之恢复出厂设置需求总结
harmonyos·鸿蒙·鸿蒙系统
深海的鲸同学 luvi1 天前
【HarmonyOS】H5 实现在浏览器中正常跳转 AppLinking 至应用
华为·harmonyos
zhanshuo2 天前
HarmonyOS 实战:学会在鸿蒙中使用第三方 JavaScript 库(附完整 Demo)
harmonyos
zhanshuo2 天前
鸿蒙应用权限处理全攻略:从配置到相机拍照,一篇文章讲透
harmonyos
AlbertZein2 天前
HarmonyOS5 凭什么学鸿蒙—— GetContext
架构·harmonyos
森之鸟2 天前
flutter项目适配鸿蒙
flutter·华为·harmonyos