ArkUI容器类组件-弹性布局容器(Flex)

ArkUI 开发框架为了方便开发者实现灵活的页面布局方式,提供了弹性布局 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:子组件多行/列排序,子组件允许超出容器。
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(默认值):元素在主轴方向首端对齐, 第一个元素与行首对齐,同时后续的元素与前一个对齐。
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.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)
  • 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)

运行结果如下所示:

  • 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:当纵轴有额外的空间时,多行内容的对齐方式。该属性仅在 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)

小结

本节简单介绍了 Flex 的使用方式,它的使用很灵活,读者熟练掌握各属性的渲染特性后可以根据设置参数构建出复杂的UI布局。

阅读全文
下载说明:
1、本站所有资源均从互联网上收集整理而来,仅供学习交流之用,因此不包含技术服务请大家谅解!
2、本站不提供任何实质性的付费和支付资源,所有需要积分下载的资源均为网站运营赞助费用或者线下劳务费用!
3、本站所有资源仅用于学习及研究使用,您必须在下载后的24小时内删除所下载资源,切勿用于商业用途,否则由此引发的法律纠纷及连带责任本站和发布者概不承担!
4、本站站内提供的所有可下载资源,本站保证未做任何负面改动(不包含修复bug和完善功能等正面优化或二次开发),但本站不保证资源的准确性、安全性和完整性,用户下载后自行斟酌,我们以交流学习为目的,并不是所有的源码都100%无错或无bug!如有链接无法下载、失效或广告,请联系客服处理!
5、本站资源除标明原创外均来自网络整理,版权归原作者或本站特约原创作者所有,如侵犯到您的合法权益,请立即告知本站,本站将及时予与删除并致以最深的歉意!
6、如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
7、如果您喜欢该资源,请支持官方正版资源,以得到更好的正版服务!
8、请您认真阅读上述内容,注册本站用户或下载本站资源即您同意上述内容!
原文链接:https://www.1024c.cn/archives/21111,转载请注明出处。
0

评论0

显示验证码
没有账号?注册  忘记密码?