2.1、线性布局（Row/Column）

已于 2024-03-22 11:40:23 修改
阅读量167 收藏
点赞数 4
分类专栏： 从零开始鸿蒙入门实战 文章标签： 华为 harmonyos 鸿蒙
于 2024-03-18 18:37:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lujianfeiccie2009/article/details/136808006
版权

概述

线性布局（LinearLayout）是开发中最常用的布局，通过线性容器 Row 和 Column 构建。线性布局是其他布局的基础，其子元素在线性方向上（水平方向和垂直方向）依次排列。线性布局的排列方向由所选容器组件决定，Column 容器内子元素按照垂直方向排列，Row 容器内子元素按照水平方向排列。根据不同的排列方向，开发者可选择使用 Row 或 Column 容器创建线性布局。

我开发的 Demo 展示

在这里插入图片描述

以下代码均经过我 demo 的实战验证，确保代码和效果对应

布局子元素在排列方向上的间距

1、Column 容器内排列方向上的间距

在这里插入图片描述
对应代码

Column({ space: 20 }) {
    Text('space: 20')
    .fontSize(15)
    .fontColor(Color.Gray)
    .width('90%')
    Row()
    .width('90%')
    .height(50)
    .backgroundColor(0xF5DEB3)
    Row()
    .width('90%')
    .height(50)
    .backgroundColor(0xD2B48C)
    Row()
    .width('90%')
    .height(50)
    .backgroundColor(0xF5DEB3)
}.width('100%')

2、Row 容器内排列方向上的间距

在这里插入图片描述
对应代码

Row({ space: 35 }) {
    Text('space: 35')
      .fontSize(15)
      .fontColor(Color.Gray)
    Row()
      .width('10%')
      .height(150)
      .backgroundColor(0xF5DEB3)
    Row()
      .width('10%')
      .height(150)
      .backgroundColor(0xD2B48C)
    Row()
      .width('10%')
      .height(150)
      .backgroundColor(0xF5DEB3)
}.width('90%')

布局子元素在交叉轴上的对齐方式

1、Column 容器内子元素在水平方向上的排列

HorizontalAlign.Start：子元素在水平方向左对齐

在这里插入图片描述
对应代码

Column({}) {
    Column() {}
    .width('80%')
    .height(50)
    .backgroundColor(0xF5DEB3)

    Column() {}
    .width('80%')
    .height(50)
    .backgroundColor(0xD2B48C)

    Column() {}
    .width('80%')
    .height(50)
    .backgroundColor(0xF5DEB3)
    }
.width('100%')
.alignItems(HorizontalAlign.Start)
.backgroundColor('rgb(242,242,242)')

HorizontalAlign.Center：子元素在水平方向居中对齐

在这里插入图片描述
对应代码

Column({}) {
    Column() {}
    .width('80%')
    .height(50)
    .backgroundColor(0xF5DEB3)

    Column() {}
    .width('80%')
    .height(50)
    .backgroundColor(0xD2B48C)

    Column() {}
    .width('80%')
    .height(50)
    .backgroundColor(0xF5DEB3)
 }
.width('100%')
.alignItems(HorizontalAlign.Center)
.backgroundColor('rgb(242,242,242)')

HorizontalAlign.End：子元素在水平方向右对齐

在这里插入图片描述
对应代码

 Column({}) {
            Column() {}
            .width('80%')
            .height(50)
            .backgroundColor(0xF5DEB3)

            Column() {}
            .width('80%')
            .height(50)
            .backgroundColor(0xD2B48C)

            Column() {}
            .width('80%')
            .height(50)
            .backgroundColor(0xF5DEB3)
          }
          .width('100%')
          .alignItems(HorizontalAlign.End)
          .backgroundColor('rgb(242,242,242)')

2、Row 容器内子元素在垂直方向上的排列

VerticalAlign.Top：子元素在垂直方向顶部对齐

在这里插入图片描述
对应代码

 Row({}) {
     Column() {}
     .width('20%')
     .height(30)
     .backgroundColor(0xF5DEB3)

     Column() {}
     .width('20%')
     .height(30)
     .backgroundColor(0xD2B48C)

     Column() {}
     .width('20%')
     .height(30)
     .backgroundColor(0xF5DEB3)
}
.width('100%')
.height(200)
.alignItems(VerticalAlign.Top)
.backgroundColor('rgb(242,242,242)')

VerticalAlign.Center：子元素在垂直方向顶部对齐

在这里插入图片描述
对应代码

Row({}) {
     Column() {}
      .width('20%')
      .height(30)
      .backgroundColor(0xF5DEB3)

      Column() {}
      .width('20%')
      .height(30)
      .backgroundColor(0xD2B48C)

      Column() {}
      .width('20%')
      .height(30)
      .backgroundColor(0xF5DEB3)
 }
 .width('100%')
 .height(200)
 .alignItems(VerticalAlign.Center)
 .backgroundColor('rgb(242,242,242)')

VerticalAlign.Bottom：子元素在垂直方向底部对齐

在这里插入图片描述
对应代码

Row({}) {
    Column() {}
     .width('20%')
     .height(30)
     .backgroundColor(0xF5DEB3)

     Column() {}
     .width('20%')
     .height(30)
     .backgroundColor(0xD2B48C)

     Column() {}
     .width('20%')
     .height(30)
     .backgroundColor(0xF5DEB3)
}
.width('100%')
.height(200)
.alignItems(VerticalAlign.Bottom)
.backgroundColor('rgb(242,242,242)')

布局子元素在主轴上的排列方式

1、Column 容器内子元素在垂直方向上的排列

justifyContent(FlexAlign.Start)：元素在垂直方向首端对齐，第一个元素与行首对齐，同时后续的元素与前一个对齐

在这里插入图片描述
对应代码

 Column({}) {
      Column() {}
      .width('80%')
      .height(50)
      .backgroundColor(0xF5DEB3)

      Column() {}
      .width('80%')
      .height(50)
      .backgroundColor(0xD2B48C)

      Column() {}
      .width('80%')
      .height(50)
      .backgroundColor(0xF5DEB3)
}
.width('100%')
.height(300)
.backgroundColor('rgb(242,242,242)')
.justifyContent(FlexAlign.Start)

justifyContent(FlexAlign.Center)：元素在垂直方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。

在这里插入图片描述

对应代码

 Column({}) {
     Column() {}
     .width('80%')
     .height(50)
     .backgroundColor(0xF5DEB3)

     Column() {}
     .width('80%')
     .height(50)
     .backgroundColor(0xD2B48C)

     Column() {}
     .width('80%')
     .height(50)
     .backgroundColor(0xF5DEB3)
   }
.width('100%')
.height(300)
.backgroundColor('rgb(242,242,242)')
.justifyContent(FlexAlign.Center)

justifyContent(FlexAlign.End)：元素在垂直方向底部对齐，最后一个元素与行尾对齐

2、Row 容器内子元素在水平方向上的排列

justifyContent(FlexAlign.Start)：元素在水平方向首端对齐，第一个元素与行首对齐，同时后续的元素与前一个对齐

在这里插入图片描述
代码部分

Row({}) {
  Column() {}
  .width('20%')
  .height(30)
  .backgroundColor(0xF5DEB3)

  Column() {}
  .width('20%')
  .height(30)
  .backgroundColor(0xD2B48C)

  Column() {}
  .width('20%')
  .height(30)
  .backgroundColor(0xF5DEB3)
}
.width('100%')
.height(200)
.backgroundColor('rgb(242,242,242)')
.justifyContent(FlexAlign.Start)

justifyContent(FlexAlign.Center)：元素在水平方向居中对齐

在这里插入图片描述

代码部分

Row({}) {
  Column() {}
  .width('20%')
  .height(30)
  .backgroundColor(0xF5DEB3)

  Column() {}
  .width('20%')
  .height(30)
  .backgroundColor(0xD2B48C)

  Column() {}
  .width('20%')
  .height(30)
  .backgroundColor(0xF5DEB3)
}
.width('100%')
.height(200)
.backgroundColor('rgb(242,242,242)')
.justifyContent(FlexAlign.Center)

justifyContent(FlexAlign.End)：元素在水平方向右对齐

在这里插入图片描述
代码部分

Row({}) {
  Column() {}
  .width('20%')
  .height(30)
  .backgroundColor(0xF5DEB3)

  Column() {}
  .width('20%')
  .height(30)
  .backgroundColor(0xD2B48C)

  Column() {}
  .width('20%')
  .height(30)
  .backgroundColor(0xF5DEB3)
}
.width('100%')
.height(200)
.backgroundColor('rgb(242,242,242)')
.justifyContent(FlexAlign.End)

自适应拉伸

在线性布局下，常用空白填充组件 Blank，在容器主轴方向自动填充空白空间，达到自适应拉伸效果。Row 和 Column 作为容器，只需要添加宽高为百分比，当屏幕宽高发生变化时，会产生自适应效果。
在这里插入图片描述
代码部分

Column() {
  Row() {
    Text('Bluetooth').fontSize(18)
    Blank()
    Toggle({ type: ToggleType.Switch, isOn: true })
  }
  .backgroundColor(0xFFFFFF)
  .borderRadius(15)
  .padding({ left: 12 })
  .width('100%')
}
.backgroundColor(0xEFEFEF)
.padding(20)
.width('100%')

自适应缩放

自适应缩放是指子组件随容器尺寸的变化而按照预设的比例自动调整尺寸，适应各种不同大小的设备。在线性布局中，可以使用以下两种方法实现自适应缩放。

父容器尺寸确定时，使用 layoutWeight 属性设置子组件和兄弟元素在主轴上的权重，忽略元素本身尺寸设置，使它们在任意尺寸的设备下自适应占满剩余空间。

在这里插入图片描述
代码部分

Column() {
   Text('1:2:3').width('100%')
    Row() {
      Column() {
        Text('layoutWeight(1)')
          .textAlign(TextAlign.Center)
      }.layoutWeight(1).backgroundColor(0xF5DEB3).height('100%')

      Column() {
        Text('layoutWeight(2)')
          .textAlign(TextAlign.Center)
      }.layoutWeight(2).backgroundColor(0xD2B48C).height('100%')

      Column() {
        Text('layoutWeight(3)')
          .textAlign(TextAlign.Center)
      }.layoutWeight(3).backgroundColor(0xF5DEB3).height('100%')

    }.backgroundColor(0xffd306).height('20%')

    Text('2:5:3').width('100%')
    Row() {
      Column() {
        Text('layoutWeight(2)')
          .textAlign(TextAlign.Center)
      }.layoutWeight(2).backgroundColor(0xF5DEB3).height('100%')

      Column() {
        Text('layoutWeight(5)')
          .textAlign(TextAlign.Center)
      }.layoutWeight(5).backgroundColor(0xD2B48C).height('100%')

      Column() {
        Text('layoutWeight(3)')
          .textAlign(TextAlign.Center)
      }.layoutWeight(3).backgroundColor(0xF5DEB3).height('100%')
    }.backgroundColor(0xffd306).height('20%')
}

自适应延伸

自适应延伸是指在不同尺寸设备下，当页面的内容超出屏幕大小而无法完全显示时，可以通过滚动条进行拖动展示。这种方法适用于线性布局中内容无法一屏展示的场景。通常有以下两种实现方式。

  • 在 List 中添加滚动条：当 List 子项过多一屏放不下时，可以将每一项子元素放置在不同的组件中，通过滚动条进行拖动展示。可以通过 scrollBar 属性设置滚动条的常驻状态，edgeEffect 属性设置拖动到内容最末端的回弹效果。

  • 使用 Scroll 组件：在线性布局中，开发者可以进行垂直方向或者水平方向的布局。当一屏无法完全显示时，可以在 Column 或 Row 组件的外层包裹一个可滚动的容器组件 Scroll 来实现可滑动的线性布局。
    垂直方向布局中使用Scroll组件

水平方向布局中使用 Scroll 组件

在这里插入图片描述

代码部分

@Entry
@Component
struct ScrollVerticalPage {

  scroller: Scroller = new Scroller();
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

  build() {
    Navigation() {
      Scroll(this.scroller) {
        Column() {
          ForEach(this.arr, (item) => {
            Text(item.toString())
              .width('90%')
              .height(150)
              .backgroundColor(0xFFFFFF)
              .borderRadius(15)
              .fontSize(16)
              .textAlign(TextAlign.Center)
              .margin({ top: 10 })
          }, item => item)
        }.width('100%')
      }
      .backgroundColor(0xDCDCDC)
      .scrollable(ScrollDirection.Vertical) // 滚动方向为垂直方向
      .scrollBar(BarState.On) // 滚动条常驻显示
      .scrollBarColor(Color.Gray) // 滚动条颜色
      .scrollBarWidth(10) // 滚动条宽度
      .edgeEffect(EdgeEffect.Spring) // 滚动到边沿后回弹
    }
    .title('垂直方向布局中使用 Scroll 组件')
    .titleMode(NavigationTitleMode.Mini)
  }
}

水平方向布局中使用 Scroll 组件

在这里插入图片描述

@Entry
@Component
struct ScrollHorizontalPage {

  scroller: Scroller = new Scroller();
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

  build() {
    Navigation() {
      Scroll(this.scroller) {
        Row() {
          ForEach(this.arr, (item) => {
            Text(item.toString())
              .height('90%')
              .width(150)
              .backgroundColor(0xFFFFFF)
              .borderRadius(15)
              .fontSize(16)
              .textAlign(TextAlign.Center)
              .margin({ left: 10 })
          })
        }.height('100%')
      }
      .backgroundColor(0xDCDCDC)
      .scrollable(ScrollDirection.Horizontal) // 滚动方向为垂直方向
      .scrollBar(BarState.On) // 滚动条常驻显示
      .scrollBarColor(Color.Gray) // 滚动条颜色
      .scrollBarWidth(10) // 滚动条宽度
      .edgeEffect(EdgeEffect.Spring) // 滚动到边沿后回弹
    }
    .title('水平方向布局中使用 Scroll 组件')
    .titleMode(NavigationTitleMode.Mini)
  }
}

下一篇： 2.2、层叠布局（Stack）

IT乐手
关注
  • 4
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
订阅专栏
博客
我的新作品《码农宝》App上线了
01-15 4450
主要功能：快速查看安卓设备信息 （手机屏幕分辨率，手机型号，设备id, 可用内存等等）各类开发过程中常用代码及效果 Demo, 分别有列表, 容器，对话框，动画，翻页，图表，编码及算法，多媒体，传感器，实用工具等官方网站http://www.yinghuofei.com/应用宝下载链接https://a.app.qq.com/o/simple.jsp?pkgname=com.lujianfei.phoneinfo界面展示首页默认展示手机系统的相关信息，点击某一个 Item , 可
博客
3.9、菜单（Menu）
04-26 11
当默认样式不满足开发需求时，可使用@Builder自定义菜单内容。可通过bindMenu接口进行菜单的自定义。
博客
3.8、气泡提示（Popup）
04-23 33
开发者可以使用构建器创建自定义气泡，@Builder中可以放自定义的内容。除此之外，还可以通过popupColor等参数控制气泡样式。})builder: this.popupBuilder(), // 气泡的内容placement:Placement.Bottom, // 气泡的弹出位置popupColor:Color.Pink, // 气泡的背景色onStateChange: (e)=> { // 返回当前的气泡状态if (!// popup构造器定义弹框内容。
博客
3.7、自定义弹窗（CustomDialog）
04-17 28
使用@CustomDialog装饰器装饰自定义弹窗。@CustomDialog装饰器用于装饰自定义弹框，此装饰器内进行自定义内容（也就是弹框内容）。build() {Column() {Text('我是内容')3.创建构造器，与装饰器呼应相连。})4.点击与onClick事件绑定的组件使弹窗弹出})
博客
3.6、文本输入（TextInput/TextArea）
04-10 65
创建输入框、设置输入框类型、自定义样式
博客
3.5、文本显示（Text/Span）
04-08 32
创建文本、添加子组件、自定义文本样式
博客
3.4、进度条（Progress）
04-08 113
Progress是进度条显示组件，显示内容通常为某次目标操作的当前进度。具体用法请参考。
博客
3.3、切换按钮（Toggle）
04-02 33
通过属性设置Toggle打开选中后的背景颜色。通过属性设置Switch类型的圆形滑块颜色，仅对type为生效。
博客
3.2、单选框（Radio）
04-01 45
Radio是单选框组件，通常用于提供相应的用户交互选择项，同一组的Radio中只有一个可以被选中。
博客
3.1、按钮 Button
04-01 141
Button是按钮组件，通常用于响应用户的点击操作，其类型包括胶囊按钮、圆形按钮、普通按钮。Button当做为容器使用时可以通过添加子组件实现包含文字、图片等元素的按钮。以下代码均经过我 demo 的实战验证，确保代码和效果对应Button通过调用接口来创建，接口调用有以下两种形式：创建包含子组件的按钮设置按钮类型Button 有三种可选类型，分别为 Capsule（胶囊类型）、Circle（圆形按钮）和 Normal（普通按钮），通过type进行设置。圆形按钮普通按钮自定义样式设置边框
博客
2.10、创建轮播（Swiper）
03-28 43
Swiper 组件提供滑动轮播显示的能力。Swiper 本身是一个容器组件，当设置了多个子组件后，可以对这些子组件进行轮播显示。通常，在一些应用首页显示推荐的内容时，需要用到轮播显示的能力。Swiper 作为一个容器组件，在自身尺寸属性未被设置时，会自动根据子组件的大小设置自身的尺寸。如果开发者对 Swiper 组件设置了固定的尺寸，则在轮播显示过程中均以该尺寸生效；否则，在轮播过程中，会根据子组件的大小自动调整自身的尺寸。通过 loop 属性控制是否循环播放，该属性默认值为 true。当 loop 为 t
博客
2.9、创建网格（Grid/GridItem）
03-26 45
网格布局是由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。网格布局具有较强的页面均分能力，子组件占比控制能力，是一种重要自适应布局，其使用场景有九宫格图片展示、日历、计算器等。ArkUI提供了Grid容器组件和子组件GridItem，用于构建网格布局。Grid用于设置网格布局相关参数，GridItem定义子组件相关特征。Grid组件支持使用条件渲染、循环渲染、懒加载等渲染控制方式生成子组件。
博客
2.8、下拉刷新与上拉加载
03-25 285
*** 实现思路* 监听手指按下事件，记录其初始位置的值。* 监听手指按压移动事件，记录并计算当前移动的位置与初始值的差值，大于0表示向下移动，同时设置一个允许移动的最大值。* 监听手指抬起事件，若此时移动达到最大值，则触发数据加载并显示刷新视图，加载完成后将此视图隐藏。*/@Component// 列表y坐标偏移量// 按下的y坐标// 上一次移动的y坐标// 当前列表首部的索引// 当前列表尾部的索引// 下拉刷新的布局高度。
博客
2.7、创建列表（List）
03-25 266
在初始化列表时，如需在列表项之间添加间距，可以使用space参数。例如，在每个列表项之间沿主轴方向添加55vp对应局部代码Stack()})
博客
2.6、媒体查询（mediaquery）
03-22 532
媒体查询作为响应式设计的核心，在移动设备上应用十分广泛。媒体查询可根据不同设备类型或同设备不同状态修改应用的样式。
博客
2.5、栅格布局（GridRow/GridCol）
03-21 53
栅格布局是一种通用的辅助定位工具，对移动设备的界面设计有较好的借鉴作用。主要优势包括：提供可循的规律：栅格布局可以为布局提供规律性的结构，解决多尺寸多设备的动态布局问题。通过将页面划分为等宽的列数和行数，可以方便地对页面元素进行定位和排版。统一的定位标注：栅格布局可以为系统提供一种统一的定位标注，保证不同设备上各个模块的布局一致性。这可以减少设计和开发的复杂度，提高工作效率。灵活的间距调整方法：栅格布局可以提供一种灵活的间距调整方法，满足特殊场景布局调整的需求。
博客
2.4、相对布局（RelativeContainer）
03-20 58
为采用相对布局的容器，支持容器内部的子元素设置相对位置关系。子元素支持指定兄弟元素作为锚点，也支持指定父容器作为锚点，基于锚点做相对位置布局。下图是一个的概念图，图中的虚线表示位置的依赖关系。
博客
2.3、弹性布局（Flex）
03-20 51
Flex 布局方式、布局换行、主轴对齐方式、交叉轴对齐方式,
博客
2.2、层叠布局（Stack）
03-19 261
层叠布局（）用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。层叠布局通过容器组件实现位置的固定定位与层叠，容器中的子元素（子组件）依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置。层叠布局具有较强的页面层叠、位置定位能力，其使用场景有广告、卡片层叠效果等。
博客
一、鸿蒙 Harmony 初体验
03-14 365
看现在网上传得沸沸扬扬的鸿蒙，打算弄个 hello world 玩一下, 不然就跟不上时代的发展了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值