。

线性布局是其他布局的基础#xff0c;其子元素在线性方向上#xff08;水平方向和垂直方向#xff09;依次排列。

线性布局的排列方向由所选容器组…线性布局说明

线性布局LinearLayout是开发中最常用的布局通过线性容器Row和Column构建。

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

线性布局的排列方向由所选容器组件决定Column容器内子元素按照垂直方向排列Row容器内子元素按照水平方向排列。

根据不同的排列方向开发者可选择使用Row或Column容器创建线性布局。

Column容器内子元素排列示意图

布局容器具有布局能力的容器组件可以承载其他元素作为其子元素布局容器会对其子元素进行尺寸计算和布局排列。

主轴线性布局容器在布局方向上的轴线子元素默认沿主轴排列。

Row容器主轴为水平方向Column容器主轴为垂直方向。

交叉轴垂直于主轴方向的轴线。

Row容器交叉轴为垂直方向Column容器交叉轴为水平方向。

在布局容器内可以通过space属性设置排列方向上子元素的间距使各子元素在排列方向上有等间距效果。

Entry

Column容器组件默认情况下在垂直方向从上向下对子组件进行布局//

space的值设置为20表示子组件之间的距离为20vpColumn({

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%)}

Entry

space设置为35表示子组件之间在主轴方向上间距为35vpRow({

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%)}

在布局容器内可以通过alignItems属性设置子元素在交叉轴排列方向的垂直方向上的对齐方式。

且在各类尺寸屏幕中表现一致。

其中交叉轴为垂直方向时取值为VerticalAlign类型水平方向取值为HorizontalAlign类型。

alignSelf属性用于控制单个子元素在容器交叉轴上的对齐方式其优先级高于alignItems属性如果设置了alignSelf属性则在单个子元素上会覆盖alignItems属性。

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

Entry

{}.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子元素在水平方向居中对齐。

Entry

列容器组件默认情况下对子组件在垂直方向从上向下布局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子元素在水平方向右对齐。

Entry

列容器组件默认情况下对子组件在垂直方向从上向下布局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))}

Entry

行容器组件默认情况下对子组件在水平方向从左向右布局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子元素在垂直方向居中对齐。

Entry

行容器组件默认情况下对子组件在水平方向从左向右布局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子元素在垂直方向底部对齐。

Entry

行容器组件默认情况下对子组件在水平方向上从左向右布局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))}

在布局容器内可以通过justifyContent属性设置子元素在容器主轴上的排列方式。

可以从主轴起始位置开始排布也可以从主轴结束位置开始排布或者均匀分割主轴的空间。

justifyContent(FlexAlign.Start)元素在垂直方向顶部对齐第一个元素与顶部对齐后续元素与前一个对齐。

Entry

列容器组件默认情况下对子组件在垂直方向从上向下布局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)元素在垂直方向中心对齐第一个元素与顶部的距离与最后一个元素与底部距离相同。

Entry

列容器组件默认情况下对子组件在垂直方向上从上向下布局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)元素在垂直方向底部对齐最后一个元素与底部对齐其他元素与后一个对齐。

Entry

列容器组件默认情况下对子组件在垂直方向上从上向下布局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.End)}

justifyContent(FlexAlign.SpaceBetween)垂直方向均匀分配元素相邻元素之间距离相同。

第一个元素与容器顶部对齐最后一个元素与容器底部对齐。

Entry

列容器组件默认情况下对子组件在垂直方向从上向下布局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.SpaceBetween)}

justifyContent(FlexAlign.SpaceAround)垂直方向均匀分配元素相邻元素之间距离相同。

第一个元素到容器顶部的距离和最后一个元素到容器底部的距离是相邻元素之间距离的一半。

Entry

列容器组件默认情况下对子组件在垂直方向从上向下布局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.SpaceAround)}

justifyContent(FlexAlign.SpaceEvenly)垂直方向均匀分配元素相邻元素之间的距离、第一个元素与容器顶部的间距、最后一个元素到容器底部的间距都完全一样。

Entry

列容器组件默认情况下对子组件在垂直方向上并从上向下布局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.SpaceEvenly)}

ustifyContent(FlexAlign.Start)元素在水平方向左对齐第一个元素与容器左侧对齐同时后续的元素与前一个对齐。

Entry

行容器组件默认情况下对子组件在水平方向上从左向右布局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)元素在水平方向居中对齐第一个元素与容器左侧的距离与最后一个元素与容器右侧距离相同。

Entry

行容器组件默认情况下对子组件在水平方向从左向右布局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)元素在水平方向右对齐最后一个元素与行容器右侧对齐其他元素与后一个对齐。

Entry

行容器组件默认情况下对子组件在水平方向从左向右布局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)}

justifyContent(FlexAlign.SpaceBetween)水平方向均匀分配元素相邻元素之间距离相同。

第一个元素与行首对齐最后一个元素与行尾对齐。

Entry

行容器组件默认情况下对子组件在水平方向从左向右布局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.SpaceBetween)}

justifyContent(FlexAlign.SpaceAround)水平方向均匀分配元素相邻元素之间距离相同。

第一个元素到行容器左侧的距离和最后一个元素到行容器右侧的距离是相邻元素之间距离的一半。

Entry

行容器组件默认情况下对子组件在水平方向从左向右布局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.SpaceAround)}

justifyContent(FlexAlign.SpaceEvenly)水平方向均匀分配元素相邻元素之间的距离、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。

Entry

行容器组件默认情况下对子组件在水平方向从左向右布局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.SpaceEvenly)}

自适应拉伸

在线性布局下常用空白填充组件Blank在容器主轴方向自动填充空白空间达到自适应拉伸效果。

Row和Column作为容器只需要添加宽高为百分比当屏幕宽高发生变化时会产生自适应效果。

Entry

列容器组件默认情况下对子组件在垂直方向从上向下布局Column()

{Row()

{Text(Bluetooth).fontSize(18)//

空白填充组件Blank在容器主轴方向自动填充空白空间达到自适应拉伸效果Blank()Toggle({

type:

})}.backgroundColor(0xFFFFFF).borderRadius(15).padding({

left:

}).width(100%)}.backgroundColor(0xEFEFEF).padding(20).width(100%)}

自适应缩放

自适应缩放是指子元素随容器尺寸的变化而按照预设的比例自动调整尺寸适应各种不同大小的设备。

在线性布局中可以使用以下两种方法实现自适应缩放。

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

父容器尺寸确定时使用百分比设置子元素和兄弟元素的宽度使他们在任意尺寸的设备下保持固定的自适应占比。

Entry

20%).textAlign(TextAlign.Center)}.width(20%).backgroundColor(0xF5DEB3).height(100%)Column()

{Text(center

50%).textAlign(TextAlign.Center)}.width(50%).backgroundColor(0xD2B48C).height(100%)Column()

{Text(right

30%).textAlign(TextAlign.Center)}.width(30%).backgroundColor(0xF5DEB3).height(100%)}.backgroundColor(0xffd306).height(30%)}}

自适应延伸

自适应延伸是指在不同尺寸设备下当页面的内容超出屏幕大小而无法完全显示时可以通过滚动条进行拖动展示。

这种方法适用于线性布局中内容无法一屏展示的场景。

通常有以下两种实现方式。

在List中添加滚动条当List子项目过多一屏放不下时可以将每一个子元素放置在不同的组件中通过滚动条进行拖动展示。

可以通过scrollBar属性设置滚动条的常驻状态edgeEffect属性设置拖动到内容最末端的回弹效果。

使用Scroll组件在线性布局中开发者可以进行垂直方向或者水平方向的布局。

当一屏无法完全显示时可以在Column或Row组件的外层包裹一个可滚动的容器组件Scroll来实现可滑动的线性布局。

垂直方向布局中使用Scroll组件

{if(item){Text(item.toString()).width(90%).height(150).backgroundColor(0xFFFFFF).borderRadius(15).fontSize(16).textAlign(TextAlign.Center).margin({

top:

item.toString())}.width(100%)}.backgroundColor(0xDCDCDC).scrollable(ScrollDirection.Vertical)

滚动方向为垂直方向

{if(item){Text(item.toString()).height(90%).width(150).backgroundColor(0xFFFFFF).borderRadius(15).fontSize(100).textAlign(TextAlign.Center).margin({

left:

})}})}.height(100%)}.backgroundColor(0xDCDCDC).scrollable(ScrollDirection.Horizontal)

滚动方向为水平方向