熟妇91,露脸,大鸡巴91,久久思思av

ArkUI 開發(fā)框架為了方便開發(fā)者實現(xiàn)靈活的頁面布局方式，提供了彈性布局 Flex ，它用來為盒裝模型提供最大的靈活性。 Flex 和 Row 、 Column 組件一樣，也有主軸和縱軸之分。

Flex定義介紹

interface FlexInterface {
  (value?: FlexOptions): FlexAttribute;
}

declare interface FlexOptions {
  direction?: FlexDirection;
  wrap?: FlexWrap;
  justifyContent?: FlexAlign;
  alignItems?: ItemAlign;
  alignContent?: FlexAlign;
}

value：設置子組件的排列樣式， FlexOptions 定義了以下幾種樣式：
- direction：設置子組件的的排列方向即主軸方向， FlexDirection 定義了以下4種排列方式：
  - Row（默認值）：子組件水平排列，即主軸為水平方向縱軸為豎直方向，子組件由左向右排列。

            Flex({direction: FlexDirection.Row}) {
              Text('Text1')
                .fontSize(16)
                .padding(10)
                .backgroundColor("#aabbcc")
              Text('Text2')
                .fontSize(16)
                .padding(10)
                .backgroundColor("#bbaacc")
              Text('Text3')
                .fontSize(16)
                .padding(10)
                .backgroundColor("#ccaabb")
              Text('Text4')
                .fontSize(16)
                .padding(10)
                .backgroundColor("#abcabc")
            }
            .width('100%')
            .height(60)
            .backgroundColor(Color.Pink)

樣例運行結果如下圖所示：

RowReverse：子組件水平排列，即主軸為水平方向縱軸為豎直方向，子組件由右向左排列。

            Flex({direction: FlexDirection.RowReverse}) {
              Text('Text1')
                .fontSize(16)
                .padding(10)
                .backgroundColor("#aabbcc")
              Text('Text2')
                .fontSize(16)
                .padding(10)
                .backgroundColor("#bbaacc")
              Text('Text3')
                .fontSize(16)
                .padding(10)
                .backgroundColor("#ccaabb")
              Text('Text4')
                .fontSize(16)
                .padding(10)
                .backgroundColor("#abcabc")
            }
            .width('100%')
            .height(60)
            .backgroundColor(Color.Pink)

樣例運行結果如下圖所示：

Column：子組件豎直排列，即主軸為垂直方向，起點在上邊，子組件由上到下排列。

            Flex({direction: FlexDirection.Column}) {
              Text('Text1')
                .fontSize(16)
                .padding(10)
                .backgroundColor("#aabbcc")
              Text('Text2')
                .fontSize(16)
                .padding(10)
                .backgroundColor("#bbaacc")
              Text('Text3')
                .fontSize(16)
                .padding(10)
                .backgroundColor("#ccaabb")
              Text('Text4')
                .fontSize(16)
                .padding(10)
                .backgroundColor("#abcabc")
            }
            .width('100%')
            .height(220)
            .backgroundColor(Color.Pink)

樣例運行結果如下圖所示：

ColumnReverse：子組件豎直排列，即主軸為垂直方向，起點在下邊，子組件由下到上排列。

            Flex({direction: FlexDirection.ColumnReverse}) {
              Text('Text1')
                .fontSize(16)
                .padding(10)
                .backgroundColor("#aabbcc")
              Text('Text2')
                .fontSize(16)
                .padding(10)
                .backgroundColor("#bbaacc")
              Text('Text3')
                .fontSize(16)
                .padding(10)
                .backgroundColor("#ccaabb")
              Text('Text4')
                .fontSize(16)
                .padding(10)
                .backgroundColor("#abcabc")
            }
            .width('100%')
            .height(220)
            .backgroundColor(Color.Pink)

樣例運行結果如下圖所示：

wrap：設置子組件是單行/列還是多行/列排序， FlexWrap 提供了以下3種類型：
- NoWrap（默認值）：子組件單行/列排序，子組件不允許超出容器。

        Flex({direction: FlexDirection.Row, wrap: FlexWrap.NoWrap}) {
          Text('Text1')
            .fontSize(16)
            .padding(10)
            .backgroundColor("#aabbcc")
          Text('Text2')
            .fontSize(16)
            .padding(10)
            .backgroundColor("#bbaacc")
          Text('Text3')
            .fontSize(16)
            .padding(10)
            .backgroundColor("#ccaabb")
          Text('Text4')
            .fontSize(16)
            .padding(10)
            .backgroundColor("#abcabc")
          Text('Text5')
            .fontSize(16)
            .padding(10)
            .backgroundColor("#cabcab")
          Text('Text6')
            .fontSize(16)
            .padding(10)
            .backgroundColor("#aabbcc")
        }
        .width('100%')
        .height(60)
        .backgroundColor(Color.Pink)

Wrap：子組件多行/列排序，子組件允許超出容器。

WrapReverse：子組件反向多行/列排序，子組件允許超出容器。

Flex({direction: FlexDirection.Row, wrap: FlexWrap.WrapReverse}) {
  Text('Text1')
    .fontSize(16)
    .padding(10)
    .backgroundColor("#aabbcc")
  Text('Text2')
    .fontSize(16)
    .padding(10)
    .backgroundColor("#bbaacc")
  Text('Text3')
    .fontSize(16)
    .padding(10)
    .backgroundColor("#ccaabb")
  Text('Text4')
    .fontSize(16)
    .padding(10)
    .backgroundColor("#abcabc")
  Text('Text5')
    .fontSize(16)
    .padding(10)
    .backgroundColor("#aabbcc")
  Text('Text6')
    .fontSize(16)
    .padding(10)
    .backgroundColor("#cabcab")
}
.width('100%')
.height(60)
.backgroundColor(Color.Pink)

justifyContent：設置子組件在主軸上的對齊方式， FlexAlign 提供了以下 6 種對齊方式：
- Start（默認值）：元素在主軸方向首端對齊, 第一個元素與行首對齊，同時后續(xù)的元素與前一個對齊。

Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.Start}) {
  Text('Text1')
    .fontSize(16)
    .padding(10)
    .backgroundColor("#aabbcc")
  Text('Text2')
    .fontSize(16)
    .padding(10)
    .backgroundColor("#bbaacc")
  Text('Text3')
    .fontSize(16)
    .padding(10)
    .backgroundColor("#ccaabb")
  Text('Text4')
    .fontSize(16)
    .padding(10)
    .backgroundColor("#abcabc")
}
.width('100%')
.height(60)
.backgroundColor(Color.Pink)

Center：元素在主軸方向中心對齊，第一個元素與行首的距離與最后一個元素與行尾距離相同。

Text('Text1')
    .fontSize(16)
    .padding(10)
    .backgroundColor("#aabbcc")
  Text('Text2')
    .fontSize(16)
    .padding(10)
    .backgroundColor("#bbaacc")
  Text('Text3')
    .fontSize(16)
    .padding(10)
    .backgroundColor("#ccaabb")
  Text('Text4')
    .fontSize(16)
    .padding(10)
    .backgroundColor("#abcabc")
}
.width('100%')
.height(60)
.backgroundColor(Color.Pink)

End：元素在主軸方向尾部對齊, 最后一個元素與行尾對齊，其他元素與后一個對齊。

Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.End}) {
  Text('Text1')
    .fontSize(16)
    .padding(10)
    .backgroundColor("#aabbcc")
  Text('Text2')
    .fontSize(16)
    .padding(10)
    .backgroundColor("#bbaacc")
  Text('Text3')
    .fontSize(16)
    .padding(10)
    .backgroundColor("#ccaabb")
  Text('Text4')
    .fontSize(16)
    .padding(10)
    .backgroundColor("#abcabc")
}
.width('100%')
.height(60)
.backgroundColor(Color.Pink)

SpaceBetween： Flex 主軸方向均勻分配彈性元素，相鄰元素之間距離相同。第一個元素與行首對齊，最后一個元素與行尾對齊。

        Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween}) {
          Text('Text1')
            .fontSize(16)
            .padding(10)
            .backgroundColor("#aabbcc")
          Text('Text2')
            .fontSize(16)
            .padding(10)
            .backgroundColor("#bbaacc")
          Text('Text3')
            .fontSize(16)
            .padding(10)
            .backgroundColor("#ccaabb")
          Text('Text4')
            .fontSize(16)
            .padding(10)
            .backgroundColor("#abcabc")
        }
        .width('100%')
        .height(60)
        .backgroundColor(Color.Pink)

SpaceAround： Flex 主軸方向均勻分配彈性元素，相鄰元素之間距離相同。第一個元素到行首的距離和最后一個元素到行尾的距離時相鄰元素之間距離的一半。

        Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround}) {
          Text('Text1')
            .fontSize(16)
            .padding(10)
            .backgroundColor("#aabbcc")
          Text('Text2')
            .fontSize(16)
            .padding(10)
            .backgroundColor("#bbaacc")
          Text('Text3')
            .fontSize(16)
            .padding(10)
            .backgroundColor("#ccaabb")
          Text('Text4')
            .fontSize(16)
            .padding(10)
            .backgroundColor("#abcabc")
        }
        .width('100%')
        .height(60)
        .backgroundColor(Color.Pink)

SpaceEvenly： Flex 主軸方向元素等間距布局，相鄰元素之間的間距、第一個元素與行首的間距、最后一個元素到行尾的間距都完全一樣。

        Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceEvenly}) {
          Text('Text1')
            .fontSize(16)
            .padding(10)
            .backgroundColor("#aabbcc")
          Text('Text2')
            .fontSize(16)
            .padding(10)
            .backgroundColor("#bbaacc")
          Text('Text3')
            .fontSize(16)
            .padding(10)
            .backgroundColor("#ccaabb")
          Text('Text4')
            .fontSize(16)
            .padding(10)
            .backgroundColor("#abcabc")
        }
        .width('100%')
        .height(60)
        .backgroundColor(Color.Pink)

alignItems：設置子組件在縱軸方向上的排列方式， ItemAlign 定義了以下 6 種排列方式：
- Auto：自動布局，簡單樣例如下所示：

Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.Start, alignItems: ItemAlign.Auto}) {
  Text('Text1')
    .fontSize(16)
    .size({width: 50, height: 20})
    .backgroundColor("#aabbcc")
  Text('Text2')
    .fontSize(16)
    .size({width: 60, height: 30})
    .backgroundColor("#bbaacc")
  Text('Text3')
    .fontSize(16)
    .size({width: 70, height: 40})
    .backgroundColor("#ccaabb")
  Text('Text4')
    .fontSize(16)
    .size({width: 80, height: 50})
    .backgroundColor("#abcabc")
}
.width('100%')
.height(60)
.backgroundColor(Color.Pink)

運行結果如下所示：

Start：起始對齊，簡單樣例如下所示：

    Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.Start, alignItems: ItemAlign.Start}) {
      Text('Text1')
        .fontSize(16)
        .size({width: 50, height: 20})
        .backgroundColor("#aabbcc")
      Text('Text2')
        .fontSize(16)
        .size({width: 60, height: 30})
        .backgroundColor("#bbaacc")
      Text('Text3')
        .fontSize(16)
        .size({width: 70, height: 40})
        .backgroundColor("#ccaabb")
      Text('Text4')
        .fontSize(16)
        .size({width: 80, height: 50})
        .backgroundColor("#abcabc")
    }
    .width('100%')
    .height(60)
    .backgroundColor(Color.Pink)

Center：居中對齊，簡單樣例如下所示：

    Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center}) {
      Text('Text1')
        .fontSize(16)
        .size({width: 50, height: 20})
        .backgroundColor("#aabbcc")
      Text('Text2')
        .fontSize(16)
        .size({width: 60, height: 30})
        .backgroundColor("#bbaacc")
      Text('Text3')
        .fontSize(16)
        .size({width: 70, height: 40})
        .backgroundColor("#ccaabb")
      Text('Text4')
        .fontSize(16)
        .size({width: 80, height: 50})
        .backgroundColor("#abcabc")
    }
    .width('100%')
    .height(60)
    .backgroundColor(Color.Pink)

End：末尾對齊，簡單樣例如下所示：

Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.Start, alignItems: ItemAlign.End}) {
  Text('Text1')
    .fontSize(16)
    .size({width: 50, height: 20})
    .backgroundColor("#aabbcc")
  Text('Text2')
    .fontSize(16)
    .size({width: 60, height: 30})
    .backgroundColor("#bbaacc")
  Text('Text3')
    .fontSize(16)
    .size({width: 70, height: 40})
    .backgroundColor("#ccaabb")
  Text('Text4')
    .fontSize(16)
    .size({width: 80, height: 50})
    .backgroundColor("#abcabc")
}
.width('100%')
.height(60)
.backgroundColor(Color.Pink)

Baseline：基線對齊，簡單樣例如下所示：

        Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.Start, alignItems: ItemAlign.Baseline}) {
          Text('Text1')
            .fontSize(16)
            .size({width: 50, height: 20})
            .backgroundColor("#aabbcc")
          Text('Text2')
            .fontSize(16)
            .size({width: 60, height: 30})
            .backgroundColor("#bbaacc")
          Text('Text3')
            .fontSize(16)
            .size({width: 70, height: 40})
            .backgroundColor("#ccaabb")
          Text('Text4')
            .fontSize(16)
            .size({width: 80, height: 50})
            .backgroundColor("#abcabc")
        }
        .width('100%')
        .height(60)
        .backgroundColor(Color.Pink)

Stretch（默認值）：

        Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.Start, alignItems: ItemAlign.Stretch}) {
          Text('Text1')
            .fontSize(16)
            .size({width: 50, height: 20})
            .backgroundColor("#aabbcc")
          Text('Text2')
            .fontSize(16)
            .size({width: 60, height: 30})
            .backgroundColor("#bbaacc")
          Text('Text3')
            .fontSize(16)
            .size({width: 70, height: 40})
            .backgroundColor("#ccaabb")
          Text('Text4')
            .fontSize(16)
            .size({width: 80, height: 50})
            .backgroundColor("#abcabc")
        }
        .width('100%')
        .height(60)
        .backgroundColor(Color.Pink)

alignContent：當縱軸有額外的空間時，多行內(nèi)容的對齊方式。該屬性僅在 wrap 屬性為 Wrap 或者 WrapReverse 時才生效， FlexAlign 定義了以下 6 種對齊方式：
Start（默認值）：設置子組件在縱軸方向首部對齊。

        Flex({direction: FlexDirection.Row, wrap: FlexWrap.Wrap, alignContent: FlexAlign.Start}) {
          Text('Text1')
            .fontSize(16)
            .size({width: 90, height: 40})
            .backgroundColor("#aabbcc")
          Text('Text2')
            .fontSize(16)
            .size({width: 90, height: 40})
            .backgroundColor("#bbaacc")
          Text('Text3')
            .fontSize(16)
            .size({width: 90, height: 40})
            .backgroundColor("#ccaabb")
          Text('Text4')
            .fontSize(16)
            .size({width: 90, height: 40})
            .backgroundColor("#abcabc")
        }
        .width('100%')
        .height(120)
        .backgroundColor(Color.Pink)

Center：設置子組件在縱軸方向居中對齊。

Flex({direction: FlexDirection.Row, wrap: FlexWrap.Wrap, alignContent: FlexAlign.Center}) {
  Text('Text1')
    .fontSize(16)
    .size({width: 90, height: 40})
    .backgroundColor("#aabbcc")
  Text('Text2')
    .fontSize(16)
    .size({width: 90, height: 40})
    .backgroundColor("#bbaacc")
  Text('Text3')
    .fontSize(16)
    .size({width: 90, height: 40})
    .backgroundColor("#ccaabb")
  Text('Text4')
    .fontSize(16)
    .size({width: 90, height: 40})
    .backgroundColor("#abcabc")
}
.width('100%')
.height(120)
.backgroundColor(Color.Pink)

End：設置子組件在縱軸方向尾部對齊。

    Flex({direction: FlexDirection.Row, wrap: FlexWrap.Wrap, alignContent: FlexAlign.End}) {
      Text('Text1')
        .fontSize(16)
        .size({width: 90, height: 40})
        .backgroundColor("#aabbcc")
      Text('Text2')
        .fontSize(16)
        .size({width: 90, height: 40})
        .backgroundColor("#bbaacc")
      Text('Text3')
        .fontSize(16)
        .size({width: 90, height: 40})
        .backgroundColor("#ccaabb")
      Text('Text4')
        .fontSize(16)
        .size({width: 90, height: 40})
        .backgroundColor("#abcabc")
    }
    .width('100%')
    .height(120)
    .backgroundColor(Color.Pink)

SpaceBetween：設置子組件在縱軸方向等間距布局。

    Flex({direction: FlexDirection.Row, wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceBetween}) {
      Text('Text1')
        .fontSize(16)
        .size({width: 90, height: 40})
        .backgroundColor("#aabbcc")
      Text('Text2')
        .fontSize(16)
        .size({width: 90, height: 40})
        .backgroundColor("#bbaacc")
      Text('Text3')
        .fontSize(16)
        .size({width: 90, height: 40})
        .backgroundColor("#ccaabb")
      Text('Text4')
        .fontSize(16)
        .size({width: 90, height: 40})
        .backgroundColor("#abcabc")
    }
    .width('100%')
    .height(120)
    .backgroundColor(Color.Pink)

SpaceAround：設置子組件在縱軸方向間距布局，并且首尾子組件到 Flex 的間距是子組件間距的一半。

Flex({direction: FlexDirection.Row, wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceAround}) {
  Text('Text1')
    .fontSize(16)
    .size({width: 90, height: 40})
    .backgroundColor("#aabbcc")
  Text('Text2')
    .fontSize(16)
    .size({width: 90, height: 40})
    .backgroundColor("#bbaacc")
  Text('Text3')
    .fontSize(16)
    .size({width: 90, height: 40})
    .backgroundColor("#ccaabb")
  Text('Text4')
    .fontSize(16)
    .size({width: 90, height: 40})
    .backgroundColor("#abcabc")
}
.width('100%')
.height(120)
.backgroundColor(Color.Pink)

SpaceEvenly：設置子組件在縱軸方向等間距布局，并且首尾子組件到 Flex 的間距子組件之間的間距都相等。

        Flex({direction: FlexDirection.Row, wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceEvenly}) {
          Text('Text1')
            .fontSize(16)
            .size({width: 90, height: 40})
            .backgroundColor("#aabbcc")
          Text('Text2')
            .fontSize(16)
            .size({width: 90, height: 40})
            .backgroundColor("#bbaacc")
          Text('Text3')
            .fontSize(16)
            .size({width: 90, height: 40})
            .backgroundColor("#ccaabb")
          Text('Text4')
            .fontSize(16)
            .size({width: 90, height: 40})
            .backgroundColor("#abcabc")
        }
        .width('100%')
        .height(120)
        .backgroundColor(Color.Pink)

小結

本節(jié)簡單介紹了 Flex 的使用方式，它的使用很靈活，讀者熟練掌握各屬性的渲染特性后可以根據(jù)設置參數(shù)構建出復雜的UI布局。

寫在最后

如果你覺得這篇內(nèi)容對你還蠻有幫助，我想邀請你幫我三個小忙：

點贊，轉(zhuǎn)發(fā)，有你們的『點贊和評論』，才是我創(chuàng)造的動力。
關注小編，同時可以期待后續(xù)文章ing??，不定期分享原創(chuàng)知識。
想要獲取更多完整鴻蒙最新學習知識點，請移步前往小編：https://gitee.com/MNxiaona/733GH/blob/master/jianshu

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

HarmonyOS ArkUI容器類組件-彈性布局容器（Flex）

HarmonyOS ArkUI容器類組件-彈性布局容器（Flex）

Flex定義介紹

小結

寫在最后

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

HarmonyOS ArkUI容器類組件-彈性布局容器（Flex）

Flex定義介紹

小結

寫在最后

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av