目录

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 滑动控件
本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
别说我什么都不会5 小时前
OpenHarmony源码分析之分布式软总线:trans_service模块(2)/会话管理之新会话
分布式·嵌入式·harmonyos
蓝枫Amy6 小时前
鸿蒙应用程序包HAP的开发与使用
harmonyos
别说我什么都不会8 小时前
OpenHarmony源码分析之分布式软总线:trans_service模块(1)/认证通道管理
分布式·嵌入式·harmonyos
全栈若城9 小时前
84.HarmonyOS NEXT 路由导航与页面管理:构建清晰的应用架构
华为·架构·harmonyos·harmonyos next
全栈若城10 小时前
87.HarmonyOS NEXT 单元测试与自动化测试指南:构建可靠的测试体系
华为·单元测试·harmonyos·harmonyos next
别说我什么都不会12 小时前
OpenHarmony轻量系统服务管理|鸿蒙业务模型重要概念详解
物联网·嵌入式·harmonyos
枫叶丹412 小时前
【HarmonyOS Next之旅】DevEco Studio使用指南(三)
华为·harmonyos·harmonyos next
个案命题14 小时前
打造流畅的下拉刷新与轮播交互:HarmonyOS手势识别与组件协同实战
华为·harmonyos·鸿蒙
我爱鸿蒙开发14 小时前
一文带你深入了解Stage模型
前端·架构·harmonyos