HarmonyOS应用开发——线性布局_如果布局内子元素超过1个时,且能够以某种方式线性
在 HarmonyOS 应用开发的世界里，界面布局如同搭建高楼大厦的框架，决定着用户与应用交互的第一印象和使用体验。合理的布局不仅能让界面元素整齐有序、美观协调，还能适应不同设备的屏幕尺寸和分辨率。本文将深入剖析 HarmonyOS 中的常见布局方式，帮助开发者打造出出色的应用界面。
前置条件
在开始本文章内容之前，博主希望开发者已完成 HarmonyOS 开发环境 的搭建。详情请参考：HarmonyOS 开发环境搭建
线性布局（DirectionalLayout）
应用场景：
- 如果布局内子元素超过1个时，且能够以某种方式线性排列时优先考虑此布局。
线性布局（LinearLayout）是开发中最常用的布局，通过线性容器 Row 和 Column 构建。线性布局是其他布局的基础，其子元素在线性方向上（水平方向和垂直方向）依次排列。
线性布局 的排列方向由所选容器组件决定，Row容器内子元素按照水平方向排列，Column容器内子元素按照垂直方向排列。
根据不同的排列方向，开发者可选择使用Row或Column容器创建线性布局。
@Entry@Componentstruct Index { build() { RelativeContainer() { // 线性布局 [Column 为垂直线性容器] Column({ space: 20 }) { // 线性布局 [Row 为水平线性容器] Row({ space: 35 }) { Text(\'space: 35\').fontSize(15).fontColor(Color.Gray) Text(\'space: 35\').fontSize(15).fontColor(Color.Gray) Text(\'space: 35\').fontSize(15).fontColor(Color.Gray) }.width(\'90%\').height(50).backgroundColor(0xF5DEB3) Row({ space: 35 }) { Text(\'space: 35\').fontSize(15).fontColor(Color.Gray) Text(\'space: 35\').fontSize(15).fontColor(Color.Gray) Text(\'space: 35\').fontSize(15).fontColor(Color.Gray) }.width(\'90%\').height(50).backgroundColor(0xF5DEB3) }.width(\'100%\').height(\'120px\').justifyContent(FlexAlign.Start) }.height(\'100%\').width(\'100%\') }}布局子元素在主轴上的排列方式
Column容器内子元素在垂直方向上的排列
Row容器内子元素在水平方向上的排列
布局子元素在交叉轴上的对齐方式
Column容器内子元素在水平方向上的排列
Row容器内子元素在垂直方向上的排列
自适应拉伸
在线性布局下，常用空白填充组件Blank，在容器主轴方向自动填充空白空间，达到自适应拉伸效果。Row 和 Column 作为容器，只需要添加宽高为百分比，当屏幕宽高发生变化时，会产生自适应效果。
@Entry@Componentstruct BlankExample { build() { 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属性设置子元素和兄弟元素在主轴上的权重，忽略元素本身尺寸设置，使它们在任意尺寸的设备下自适应占满剩余空间。
- 父容器尺寸确定时，使用百分比设置子元素和兄弟元素的宽度，使他们在任意尺寸的设备下保持固定的自适应占比。
自适应延伸
自适应延伸是指在不同尺寸设备下，当页面的内容超出屏幕大小而无法完全显示时，可以通过滚动条进行拖动展示。对于线性布局，这种方法适用于容器中内容无法一屏展示的场景。通常有以下两种实现方式。
-
在List中添加滚动条：当List子项过多一屏放不下时，可以将每一项子元素放置在不同的组件中，通过滚动条进行拖动展示。可以通过scrollBar属性设置滚动条的常驻状态，edgeEffect属性设置拖动到内容最末端的回弹效果。
-
使用Scroll组件：在线性布局中，开发者可以进行垂直方向或者水平方向的布局。当一屏无法完全显示时，可以在Column或Row组件的外层包裹一个可滚动的容器组件Scroll来实现可滑动的线性布局。
垂直方向布局中使用Scroll组件：
@Entry@Componentstruct ScrollExample { scroller: Scroller = new Scroller(); private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; build() { Scroll(this.scroller) { Column() { ForEach(this.arr, (item?:number|undefined) => { if(item){ Text(item.toString()) .width(\'90%\') .height(150) .backgroundColor(0xFFFFFF) .borderRadius(15) .fontSize(16) .textAlign(TextAlign.Center) .margin({ top: 10 }) } }, (item:number) => item.toString()) }.width(\'100%\') } .backgroundColor(0xDCDCDC) .scrollable(ScrollDirection.Vertical) // 滚动方向为垂直方向 .scrollBar(BarState.On) // 滚动条常驻显示 .scrollBarColor(Color.Gray) // 滚动条颜色 .scrollBarWidth(10) // 滚动条宽度 .edgeEffect(EdgeEffect.Spring) // 滚动到边沿后回弹 }}水平方向布局中使用Scroll组件：
@Entry@Componentstruct ScrollExample { scroller: Scroller = new Scroller(); private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; build() { Scroll(this.scroller) { Row() { ForEach(this.arr, (item?:number|undefined) => { if(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) // 滚动到边沿后回弹 }}以上详细介绍了 HarmonyOS 的线性布局在实战中的使用方式。若你在实际开发中遇到问题，或想了解某类布局的更多进阶用法，欢迎随时和我交流。
