線性布局——Column/Row
線性布局是應(yīng)用中最常用的布局，通過線性容器 Row 和 Column 構(gòu)建
線性布局是其他布局的基礎(chǔ)，其子元素在水平方向和垂直方向依次排列
線性布局的排列方向由所選容器組件決定，Column 容器內(nèi)子元素按照垂直方向排列，Row 容器內(nèi)子元素按照水平方向排列。根據(jù)不同的排列方向，可選擇使用 Row 或 Column 容器創(chuàng)建線性布局
基本概念
- 布局容器：具有布局能力的容器組件，可以承載其他元素作為其子元素，布局容器會對其子元素進行尺寸計算和布局排列
- 布局子元素：布局容器內(nèi)部的元素
- 主軸：線性布局容器在布局方向上的軸線，子元素默認沿主軸排列。Row容器主軸為橫向，Column容器主軸為縱向
- 交叉軸：垂直于主軸方向的軸線。Row容器交叉軸為縱向，Column容器交叉軸為橫向
- 間距：布局子元素的間距
定義方式
Column(value?: {space?: string | number})
Row(value?:{space?: number | string })
參數(shù)解讀
- space：橫向或者豎向元素間距
Column({ space: 10 })
Row({ space: 10 })
設(shè)置屬性
Column({ space: 10 })
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
Row({ space: 10 })
.alignItems(VerticalAlign.Center)
.justifyContent(FlexAlign.Center)
alignItems：
- Column 設(shè)置子組件在水平方向上的對齊格式
- Row 設(shè)置子組件在垂直方向上的對齊格式
justifyContent：
- Column 設(shè)置子組件在垂直方向上的對齊格式
- Row 設(shè)置子組件在水平方向上的對齊格式
子元素在交叉軸上的對齊方式
交叉軸為垂直方向時，取值為VerticalAlign類型，水平方向取值為HorizontalAlign。
alignSelf 屬性用于控制單個子元素在容器交叉軸上的對齊方式，其優(yōu)先級高于 alignItems 屬性，如果設(shè)置了 alignSelf 屬性，則在單個子元素上會覆蓋 alignItems 屬性
-
Column
- HorizontalAlign.Start：子元素在水平方向左對齊
- HorizontalAlign.Center：子元素在水平方向居中對齊
- HorizontalAlign.End：子元素在水平方向右對齊
-
Row
- VerticalAlign.Top：子元素在垂直方向頂部對齊
- VerticalAlign.Center：子元素在垂直方向居中對齊
- VerticalAlign.Bottom：子元素在垂直方向底部對齊
子元素在主軸上的排列方式
-
Column
- justifyContent(FlexAlign.Start)：元素在垂直方向首端對齊，第一個元素與行首對齊，同時后續(xù)的元素與前一個對齊
- justifyContent(FlexAlign.Center)：元素在垂直方向中心對齊，第一個元素與行首的距離與最后一個元素與行尾距離相同
- justifyContent(FlexAlign.End)：元素在垂直方向尾部對齊，最后一個元素與行尾對齊，其他元素與后一個對齊
- justifyContent(FlexAlign.Spacebetween)：垂直方向均勻分配元素，相鄰元素之間距離相同。第一個元素與行首對齊，最后一個元素與行尾對齊
- justifyContent(FlexAlign.SpaceAround)：垂直方向均勻分配元素，相鄰元素之間距離相同。第一個元素到行首的距離和最后一個元素到行尾的距離是相鄰元素之間距離的一半
- justifyContent(FlexAlign.SpaceEvenly)：垂直方向均勻分配元素，相鄰元素之間的距離、第一個元素與行首的間距、最后一個元素到行尾的間距都完全一樣
-
Row
- justifyContent(FlexAlign.Start)：元素在水平方向方向首端對齊，第一個元素與行首對齊，同時后續(xù)的元素與前一個對齊
- justifyContent(FlexAlign.Center)：元素在水平方向方向中心對齊，第一個元素與行首的距離與最后一個元素與行尾距離相同
- justifyContent(FlexAlign.End)：元素在水平方向方向尾部對齊，最后一個元素與行尾對齊，其他元素與后一個對齊
- justifyContent(FlexAlign.Spacebetween)：水平方向方向均勻分配元素，相鄰元素之間距離相同。第一個元素與行首對齊，最后一個元素與行尾對齊
- justifyContent(FlexAlign.SpaceAround)：水平方向方向均勻分配元素，相鄰元素之間距離相同。第一個元素到行首的距離和最后一個元素到行尾的距離是相鄰元素之間距離的一半
- justifyContent(FlexAlign.SpaceEvenly)：水平方向方向均勻分配元素，相鄰元素之間的距離、第一個元素與行首的間距、最后一個元素到行尾的間距都完全一樣
自適應(yīng)拉伸
在線性布局下，常用空白填充組件Blank，在容器主軸方向自動填充空白空間，達到自適應(yīng)拉伸效果。Row和Column作為容器，只需要添加寬高為百分比，當屏幕寬高發(fā)生變化時，會產(chǎn)生自適應(yīng)效果
自適應(yīng)縮放
自適應(yīng)縮放是指子組件隨容器尺寸的變化而按照預(yù)設(shè)的比例自動調(diào)整尺寸，適應(yīng)各種不同大小的設(shè)備。在線性布局中，可以使用以下兩種方法實現(xiàn)自適應(yīng)縮放。
- 父容器尺寸確定時，使用 layoutWeight 屬性設(shè)置子組件和兄弟元素在主軸上的權(quán)重，忽略元素本身尺寸設(shè)置，使它們在任意尺寸的設(shè)備下自適應(yīng)占滿剩余空間
- 父容器尺寸確定時，使用百分比設(shè)置子組件和兄弟元素的寬度，使他們在任意尺寸的設(shè)備下保持固定的自適應(yīng)占比
自適應(yīng)延伸
自適應(yīng)延伸是指在不同尺寸設(shè)備下，當頁面的內(nèi)容超出屏幕大小而無法完全顯示時，可以通過滾動條進行拖動展示。這種方法適用于線性布局中內(nèi)容無法一屏展示的場景。通常有以下兩種實現(xiàn)方式
- 在List中添加滾動條：當 List 子項過多一屏放不下時，可以將每一項子元素放置在不同的組件中，通過滾動條進行拖動展示?？梢酝ㄟ^ scrollBar 屬性設(shè)置滾動條的常駐狀態(tài)，edgeEffect 屬性設(shè)置拖動到內(nèi)容最末端的回彈效果
- 使用Scroll組件：在線性布局中，可以進行豎向或者橫向的布局。當一屏無法完全顯示時，可以在Column或Row組件的外層包裹一個可滾動的容器組件Scroll來實現(xiàn)可滑動的線性布局
列表——List
基本概念
列表是一種復(fù)雜的容器，當列表項達到一定數(shù)量，內(nèi)容超過屏幕大小時，可以自動提供滾動功能。它適合用于呈現(xiàn)同類數(shù)據(jù)類型或數(shù)據(jù)類型集，例如圖片和文本。在列表中顯示數(shù)據(jù)集合是許多應(yīng)用程序中的常見要求（如通訊錄、音樂列表、購物清單等）。
使用列表可以輕松高效地顯示結(jié)構(gòu)化、可滾動的信息。通過在 List 組件中按垂直或者水平方向線性排列子組件 ListItemGroup 或 ListItem ，為列表中的行或列提供單個視圖，或使用 ForEach 迭代一組行或列，或混合任意數(shù)量的單個視圖和 ForEach 結(jié)構(gòu)，構(gòu)建一個列表。List 組件支持使用條件渲染、循環(huán)渲染、懶加載等渲染控制方式生成子組件
定義方式
List(value?: {space?: number | string, initialIndex?: number, scroller?: Scroller})
參數(shù)解讀
List({ space: 20, initialIndex: 0 })
- space：子組件主軸方向的間隔
- initialIndex：設(shè)置當前List初次加載時視口起始位置顯示的item的索引值
- scroller：可滾動組件的控制器，用于與可滾動組件進行綁定
設(shè)置屬性
List({ space: 20, initialIndex: 0 }) {
ForEach(this.arr, (item) => {
ListItem() {
Text('' + item)
.width('100%')
.height(100)
.fontSize(16)
.textAlign(TextAlign.Center)
.borderRadius(10)
.backgroundColor(0xFFFFFF)
}
}, item => item)
}
.listDirection(Axis.Vertical) // 排列方向
.divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之間的分界線
.edgeEffect(EdgeEffect.Spring) // 滑動到邊緣無效果
.onScrollIndex((firstIndex: number, lastIndex: number) => {
console.info('first' + firstIndex)
console.info('last' + lastIndex)
})
.width('90%')
.height('100%')
}
其中：
listDirection：設(shè)置List組件排列方向
divider：設(shè)置ListItem分割線樣式，默認無分割線
- strokeWidth: 分割線的線寬
- color: 分割線的顏色
- startMargin: 分割線與列表側(cè)邊起始端的距離
- endMargin: 分割線與列表側(cè)邊結(jié)束端的距離
edgeEffect：設(shè)置組件的滑動效果
scrollBar：設(shè)置滾動條狀態(tài)
設(shè)置事件
彈性布局——Flex
基本概念
彈性布局提供更加有效的方式對容器中的子元素進行排列、對齊和分配剩余空間
容器默認存在主軸與交叉軸，子元素默認沿主軸排列，子元素在主軸方向的尺寸稱為主軸尺寸，在交叉軸方向的尺寸稱為交叉軸尺寸
彈性布局在開發(fā)場景中用例特別多，比如頁面頭部導(dǎo)航欄的均勻分布、頁面框架的搭建、多行數(shù)據(jù)的排列等等
定義方式
Flex(value?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign })
參數(shù)解讀
Flex({
direction: FlexDirection.Row,
wrap: FlexWrap.NoWrap,
justifyContent: FlexAlign.Center,
alignItems: ItemAlign.Center,
alignContent: FlexAlign.Center
})
- direction：子組件在Flex容器上排列的方向，即主軸的方向
- wrap：Flex容器是單行/列還是多行/列排列
- justifyContent：所有子組件在Flex容器主軸上的對齊格式
- alignItems：所有子組件在Flex容器交叉軸上的對齊格式
- alignContent：交叉軸中有額外的空間時，多行內(nèi)容的對齊方式。僅在wrap為Wrap或WrapReverse下生效
交叉軸對齊方式
容器組件的交叉軸對齊方式
通過Flex組件的alignItems參數(shù)設(shè)置子組件在交叉軸的對齊方式
- ItemAlign.Auto：使用Flex容器中默認配置
- ItemAlign.Start：交叉軸方向首部對齊
- ItemAlign.Center：交叉軸方向居中對齊
- ItemAlign.End：交叉軸方向底部對齊
- ItemAlign.Stretch：交叉軸方向拉伸填充，在未設(shè)置尺寸時，拉伸到容器尺寸
- ItemAlign. Baseline：交叉軸方向文本基線對齊
子組件設(shè)置交叉軸對齊
子組件的 alignSelf 屬性也可以設(shè)置子組件在父容器交叉軸的對齊格式，且會覆蓋 Flex 布局容器中 alignItems 配置
自適應(yīng)拉伸
在彈性布局父組件尺寸不夠大的時候，通過子組件的下面幾個屬性設(shè)置其在父容器的占比，達到自適應(yīng)布局能力
- flexBasis：設(shè)置子組件在父容器主軸方向上的基準尺寸。如果設(shè)置了該值，則子項占用的空間為設(shè)置的值；如果沒設(shè)置該屬性，那子項的空間為 width / height 的值
- flexGrow：設(shè)置父容器的剩余空間分配給此屬性所在組件的比例。用于“瓜分”父組件的剩余空間
- flexShrink: 當父容器空間不足時，子組件的壓縮比例
層疊布局——Stack
基本概念
層疊布局用于在屏幕上預(yù)留一塊區(qū)域來顯示組件中的元素，提供元素可以重疊的布局。層疊布局通過 Stack 容器組件實現(xiàn)位置的固定定位與層疊，容器中的子組件依次入棧，后一個子元素覆蓋前一個子元素，子元素可以疊加，也可以設(shè)置位置。
層疊布局具有較強的頁面層疊、位置定位能力，其使用場景有廣告、卡片層疊效果等
定義方式
Stack(value?: { alignContent?: Alignment })
參數(shù)解讀
Stack({ alignContent: Alignment.Center })
- alignContent：設(shè)置子組件在容器內(nèi)的對齊方式
設(shè)置屬性
Stack({ alignContent: Alignment.Center })
.alignContent(Alignment.Center)
- alignContent：設(shè)置所有子組件在容器內(nèi)的對齊方式
Z 序控制
Stack容器中兄弟組件顯示層級關(guān)系可以通過 Z序控制的 zIndex 屬性改變。zIndex 值越大，顯示層級越高，即 zIndex 值大的組件會覆蓋在 zIndex 值小的組件上方
Stack({ alignContent: Alignment.BottomStart }) {
Column() {
Text('Stack子元素1').fontSize(15)
}.width(50).height(50).backgroundColor(0xffd306).zIndex(2)
Column() {
Text('Stack子元素2').fontSize(12)
}.width(75).height(75).backgroundColor(Color.Pink).zIndex(1)
Column() {
Text('Stack子元素3').fontSize(15)
}.width(100).height(100).backgroundColor(Color.Grey)
}.margin({ top: 10 }).width(125).height(125).backgroundColor(0xe0e0e0)
