• openharmony容器组件之Flex

    Flex：弹性布局容器

    Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign })
    direction：子组件在Flex容器上排列的方向，默认：FlexDirection.Row
        Row：主轴与行方向一致作为布局模式。
        RowReverse：与Row方向相反方向进行布局。
        Column：主轴与列方向一致作为布局模式。
        ColumnReverse：与Column相反方向进行布局。
    wrap：Flex容器是单行/列还是多行/列排列，默认：FlexWrap.NoWrap
        NoWrap：Flex容器的元素单行/列布局，子项允许超出容器。
        Wrap：Flex容器的元素多行/列排布，子项允许超出容器。
        WrapReverse：Flex容器的元素反向多行/列排布，子项允许超出容器
    justifyContent：子组件在Flex容器主轴上的对齐格式，默认：FlexAlign.Start
        Start：元素在主轴方向首端对齐,第一个元素与行首对齐，同时后续的元素与前一个对齐。
        Center：元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。
        End：元素在主轴方向尾部对齐,  最后一个元素与行尾对齐，其他元素与后一个对齐。
        SpaceBetween：Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。第一个元素与行首对齐，最后一个元素与行尾对齐。
        SpaceAround：Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。
        SpaceEvenly：Flex主轴方向元素等间距布局，相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。
    alignItems：子组件在Flex容器交叉轴上的对齐格式，默认：ItemAlign.Stretch
    alignContent：交叉轴中有额外的空间时，多行内容的对齐方式。仅在wrap为Wrap或WrapReverse下生效，默认：FlexAlign.Start

    direction&wrap

    效果如图：

    代码：

    1. @Entry
    2. @Component
    3. struct FlexT {
    4.   build() {
    5.     Column() {
    6.       Column({ space: 5 }) {
    7.         Text('direction:Row').fontSize(9).fontColor(0x000000).width('90%')
    8.         //横向布局
    9.         Flex({ direction: FlexDirection.Row }) {
    10.           Text('1').width('20%').height(30).backgroundColor(0xF5DEB3)
    11.           Text('2').width('20%').height(30).backgroundColor(0xD2B48C)
    12.           Text('3').width('20%').height(30).backgroundColor(0xF5DEB3)
    13.         }
    14.         .height(50)
    15.         .width('90%')
    16.         .padding(10)
    17.         .backgroundColor(0xAFEEEE)
    18.  
    19.         Text('direction:RowReverse').fontSize(9).fontColor(0x000000).width('90%')
    20.         //横向反向布局
    21.         Flex({ direction: FlexDirection.RowReverse }) {
    22.           Text('1').width('20%').height(30).backgroundColor(0xF5DEB3)
    23.           Text('2').width('20%').height(30).backgroundColor(0xD2B48C)
    24.           Text('3').width('20%').height(30).backgroundColor(0xF5DEB3)
    25.         }
    26.         .height(50)
    27.         .width('90%')
    28.         .padding(10)
    29.         .backgroundColor(0xAFEEEE)
    30.       }
    31.  
    32.       Text('direction:Column').fontSize(9).fontColor(0x000000).width('90%')
    33.       //列布局
    34.       Flex({ direction: FlexDirection.Column }) {
    35.         Text('1').width('20%').height(30).backgroundColor(0xF5DEB3)
    36.         Text('2').width('20%').height(30).backgroundColor(0xD2B48C)
    37.         Text('3').width('20%').height(30).backgroundColor(0xF5DEB3)
    38.       }
    39.       .height(50)
    40.       .width('90%')
    41.       .padding(10)
    42.       .backgroundColor(0xAFEEEE)
    43.  
    44.       Text('direction:ColumnReverse').fontSize(9).fontColor(0x000000).width('90%')
    45.       //列反向布局
    46.       Flex({ direction: FlexDirection.ColumnReverse }) {
    47.         Text('1').width('20%').height(30).backgroundColor(0xF5DEB3)
    48.         Text('2').width('20%').height(30).backgroundColor(0xD2B48C)
    49.         Text('3').width('20%').height(30).backgroundColor(0xF5DEB3)
    50.       }
    51.       .height(50)
    52.       .width('90%')
    53.       .padding(10)
    54.       .backgroundColor(0xAFEEEE)
    55.  
    56.       Text('NoWrap').fontSize(9).fontColor(0x000000).width('90%')
    57.       //容器单行or列显示
    58.       Flex({ wrap: FlexWrap.NoWrap }) {
    59.         Text('1').width('40%').height(30).backgroundColor(0xF5DEB3)
    60.         Text('2').width('40%').height(30).backgroundColor(0xD2B48C)
    61.         Text('3').width('40%').height(30).backgroundColor(0xF5DEB3)
    62.       }
    63.       .height(50)
    64.       .width('90%')
    65.       .padding(10)
    66.       .backgroundColor(0xAFEEEE)
    67.  
    68.       Text('Wrap').fontSize(9).fontColor(0x000000).width('90%')
    69.       //容器多行or列显示
    70.       Flex({ wrap: FlexWrap.Wrap }) {
    71.         Text('1').width('40%').height(30).backgroundColor(0xF5DEB3)
    72.         Text('2').width('40%').height(30).backgroundColor(0xD2B48C)
    73.         Text('3').width('40%').height(30).backgroundColor(0xF5DEB3)
    74.       }
    75.       .height(50)
    76.       .width('90%')
    77.       .padding(10)
    78.       .backgroundColor(0xAFEEEE)
    79.  
    80.       Text('WrapReverse').fontSize(9).fontColor(0x000000).width('90%')
    81.       //容器反向多行or列显示
    82.       Flex({ wrap: FlexWrap.WrapReverse }) {
    83.         Text('1').width('40%').height(30).backgroundColor(0xF5DEB3)
    84.         Text('2').width('40%').height(30).backgroundColor(0xD2B48C)
    85.         Text('3').width('40%').height(30).backgroundColor(0xF5DEB3)
    86.       }
    87.       .height(50)
    88.       .width('90%')
    89.       .padding(10)
    90.       .backgroundColor(0xAFEEEE)
    91.  
    92.     }
    93.     .width('100%')
    94.     .height('100%')
    95.  
    96.   }
    97. }

    justifyContent

    效果如图：

    代码：

    1. @Entry
    2. @Component
    3. struct FlexT {
    4.   build() {
    5.     Column() {
    6.       Column({ space: 5 }) {
    7.  
    8.         Text('justifyContent:Start').fontSize(9).fontColor(0x000000).width('90%')
    9.         //元素在主轴方向首端对齐, 第一个元素与行首对齐，同时后续的元素与前一个对齐。
    10.         Flex({ justifyContent: FlexAlign.Start }) {
    11.           Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
    12.           Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
    13.           Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
    14.         }.width('90%')
    15.         .padding(10)
    16.         .backgroundColor(0xAFEEEE)
    17.  
    18.         Text('justifyContent:Center').fontSize(9).fontColor(0x000000).width('90%')
    19.         //元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。
    20.         Flex({ justifyContent: FlexAlign.Center }) {
    21.           Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
    22.           Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
    23.           Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
    24.         }.width('90%')
    25.         .padding(10)
    26.         .backgroundColor(0xAFEEEE)
    27.  
    28.         Text('justifyContent:End').fontSize(9).fontColor(0x000000).width('90%')
    29.         //元素在主轴方向尾部对齐,  最后一个元素与行尾对齐，其他元素与后一个对齐。
    30.         Flex({ justifyContent: FlexAlign.End }) {
    31.           Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
    32.           Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
    33.           Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
    34.         }.width('90%')
    35.         .padding(10)
    36.         .backgroundColor(0xAFEEEE)
    37.  
    38.         Text('justifyContent:SpaceBetween ').fontSize(9).fontColor(0x000000).width('90%')
    39.         //Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素与行首对齐，最后一个元素与行尾对齐
    40.         Flex({ justifyContent: FlexAlign.SpaceBetween }) {
    41.           Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
    42.           Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
    43.           Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
    44.         }.width('90%')
    45.         .padding(10)
    46.         .backgroundColor(0xAFEEEE)
    47.  
    48.         Text('justifyContent:SpaceAround').fontSize(9).fontColor(0x000000).width('90%')
    49.         //Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半
    50.         Flex({ justifyContent: FlexAlign.SpaceAround }) {
    51.           Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
    52.           Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
    53.           Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
    54.         }.width('90%')
    55.         .padding(10)
    56.         .backgroundColor(0xAFEEEE)
    57.  
    58.         Text('justifyContent:SpaceEvenly ').fontSize(9).fontColor(0x000000).width('90%')
    59.         //Flex主轴方向元素等间距布局， 相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样
    60.         Flex({ justifyContent: FlexAlign.SpaceEvenly }) {
    61.           Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
    62.           Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
    63.           Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
    64.         }.width('90%')
    65.         .padding(10)
    66.         .backgroundColor(0xAFEEEE)
    67.  
    68.       }
    69.       .width('100%')
    70.       .height('100%')
    71.  
    72.     }
    73.   }
    74. }

    alignItems

    效果如图：

    代码：

    1. @Entry
    2. @Component
    3. struct FlexT {
    4.   build() {
    5.     Column() {
    6.       Column({ space: 5 }) {
    7.  
    8.         Text('alignItems:Auto').fontSize(9).fontColor(0x000000).width('90%')
    9.         //子组件在Flex容器交叉轴上的对齐格式：默认配置
    10.         Flex({ alignItems: ItemAlign.Auto }) {
    11.           Text('1').width('20%').height(10).backgroundColor(0xF5DEB3)
    12.           Text('2').width('20%').height(20).backgroundColor(0xD2B48C)
    13.           Text('3').width('20%').height(30).backgroundColor(0xF5DEB3)
    14.         }.width('90%')
    15.         .padding(10)
    16.         .backgroundColor(0xAFEEEE)
    17.  
    18.         Text('alignItems:Start ').fontSize(9).fontColor(0x000000).width('90%')
    19.         //子组件在Flex容器交叉轴上的对齐格式：横轴方向头对齐
    20.         Flex({ alignItems: ItemAlign.Start }) {
    21.           Text('1').width('20%').height(10).backgroundColor(0xF5DEB3)
    22.           Text('2').width('20%').height(20).backgroundColor(0xD2B48C)
    23.           Text('3').width('20%').height(30).backgroundColor(0xF5DEB3)
    24.         }.width('90%')
    25.         .padding(10)
    26.         .backgroundColor(0xAFEEEE)
    27.  
    28.         Text('alignItems:Center ').fontSize(9).fontColor(0x000000).width('90%')
    29.         //子组件在Flex容器交叉轴上的对齐格式：横轴方向中间对齐
    30.         Flex({ alignItems: ItemAlign.Center }) {
    31.           Text('1').width('20%').height(10).backgroundColor(0xF5DEB3)
    32.           Text('2').width('20%').height(20).backgroundColor(0xD2B48C)
    33.           Text('3').width('20%').height(30).backgroundColor(0xF5DEB3)
    34.         }.width('90%')
    35.         .padding(10)
    36.         .backgroundColor(0xAFEEEE)
    37.  
    38.         Text('alignItems:End  ').fontSize(9).fontColor(0x000000).width('90%')
    39.         //子组件在Flex容器交叉轴上的对齐格式：横轴方向底部对齐
    40.         Flex({ alignItems: ItemAlign.End }) {
    41.           Text('1').width('20%').height(10).backgroundColor(0xF5DEB3)
    42.           Text('2').width('20%').height(20).backgroundColor(0xD2B48C)
    43.           Text('3').width('20%').height(30).backgroundColor(0xF5DEB3)
    44.         }.width('90%')
    45.         .padding(10)
    46.         .backgroundColor(0xAFEEEE)
    47.  
    48.         Text('alignItems:Stretch').fontSize(9).fontColor(0x000000).width('90%')
    49.         //子组件在Flex容器交叉轴上的对齐格式：填充将跨轴拉伸，如果未设置维度，则为容器大小
    50.         Flex({ alignItems: ItemAlign.Stretch }) {
    51.           Text('1').width('20%').height(10).backgroundColor(0xF5DEB3)
    52.           Text('2').width('20%').height(20).backgroundColor(0xD2B48C)
    53.           Text('3').width('20%').height(30).backgroundColor(0xF5DEB3)
    54.         }.width('90%')
    55.         .padding(10)
    56.         .backgroundColor(0xAFEEEE)
    57.  
    58.         Text('alignItems:Baseline').fontSize(9).fontColor(0x000000).width('90%')
    59.         //子组件在Flex容器交叉轴上的对齐格式：横轴方向基准线对齐
    60.         Flex({ alignItems: ItemAlign.Baseline }) {
    61.           Text('1').width('20%').height(10).backgroundColor(0xF5DEB3)
    62.           Text('2').width('20%').height(20).backgroundColor(0xD2B48C)
    63.           Text('3').width('20%').height(30).backgroundColor(0xF5DEB3)
    64.         }.width('90%')
    65.         .padding(10)
    66.         .backgroundColor(0xAFEEEE)
    67.  
    68.       }
    69.       .width('100%')
    70.       .height('100%')
    71.  
    72.     }
    73.   }
    74. }

    alignContent

    效果如图：

    代码：

    1. @Entry
    2. @Component
    3. struct FlexT {
    4.   build() {
    5.     Column() {
    6.       Column({ space: 5 }) {
    7.  
    8.         Text('alignContent:Start').fontSize(9).fontColor(0x000000).width('90%')
    9.         //交叉轴中有额外的空间时，多行内容的对齐方式：顶端对其
    10.         Flex({ wrap: FlexWrap.Wrap, alignContent: FlexAlign.Start }) {
    11.           Text('1').width('40%').height(20).backgroundColor(0xF5DEB3)
    12.           Text('2').width('40%').height(20).backgroundColor(0xD2B48C)
    13.           Text('3').width('40%').height(20).backgroundColor(0xF5DEB3)
    14.         }.width('90%').height(90)
    15.         .padding(10)
    16.         .backgroundColor(0xAFEEEE)
    17.  
    18.         Text('alignContent:Center').fontSize(9).fontColor(0x000000).width('90%')
    19.         //交叉轴中有额外的空间时，多行内容的对齐方式：中间对其
    20.         Flex({ wrap: FlexWrap.Wrap, alignContent: FlexAlign.Center }) {
    21.           Text('1').width('40%').height(20).backgroundColor(0xF5DEB3)
    22.           Text('2').width('40%').height(20).backgroundColor(0xD2B48C)
    23.           Text('3').width('40%').height(20).backgroundColor(0xF5DEB3)
    24.         }.width('90%').height(90)
    25.         .padding(10)
    26.         .backgroundColor(0xAFEEEE)
    27.  
    28.         Text('alignContent:End').fontSize(9).fontColor(0x000000).width('90%')
    29.         //交叉轴中有额外的空间时，多行内容的对齐方式：底部对其
    30.         Flex({ wrap: FlexWrap.Wrap, alignContent: FlexAlign.End }) {
    31.           Text('1').width('40%').height(20).backgroundColor(0xF5DEB3)
    32.           Text('2').width('40%').height(20).backgroundColor(0xD2B48C)
    33.           Text('3').width('40%').height(20).backgroundColor(0xF5DEB3)
    34.         }.width('90%').height(90)
    35.         .padding(10)
    36.         .backgroundColor(0xAFEEEE)
    37.  
    38.         Text('alignContent:SpaceBetween ').fontSize(9).fontColor(0x000000).width('90%')
    39.         //交叉轴中有额外的空间时，多行内容的对齐方式：相邻元素之间的距离相同，第一个元素与行首对齐，最后一个元素与行尾对齐
    40.         Flex({ wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceBetween }) {
    41.           Text('1').width('40%').height(20).backgroundColor(0xF5DEB3)
    42.           Text('2').width('40%').height(20).backgroundColor(0xD2B48C)
    43.           Text('3').width('40%').height(20).backgroundColor(0xF5DEB3)
    44.         }.width('90%').height(90)
    45.         .padding(10)
    46.         .backgroundColor(0xAFEEEE)
    47.  
    48.         Text('alignContent:SpaceAround  ').fontSize(9).fontColor(0x000000).width('90%')
    49.         //交叉轴中有额外的空间时，多行内容的对齐方式：相邻元素之间的距离相同。相邻元素之间距离的一半作为，第一个元素和最后一个元素到行尾之间的距离
    50.         Flex({ wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceAround }) {
    51.           Text('1').width('40%').height(20).backgroundColor(0xF5DEB3)
    52.           Text('2').width('40%').height(20).backgroundColor(0xD2B48C)
    53.           Text('3').width('40%').height(20).backgroundColor(0xF5DEB3)
    54.         }.width('90%')
    55.         .height(90)
    56.         .padding(10)
    57.         .backgroundColor(0xAFEEEE)
    58.  
    59.         Text('alignContent:SpaceEvenly').fontSize(9).fontColor(0x000000).width('90%')
    60.         //交叉轴中有额外的空间时，多行内容的对齐方式：相邻元素之间的间距，第一个元素与行开头之间的间距，并且最后一个元素与行尾之间的间距相同
    61.         Flex({ wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceEvenly }) {
    62.           Text('1').width('40%').height(20).backgroundColor(0xF5DEB3)
    63.           Text('2').width('40%').height(20).backgroundColor(0xD2B48C)
    64.           Text('3').width('40%').height(20).backgroundColor(0xF5DEB3)
    65.         }.width('90%').height(90)
    66.         .padding(10)
    67.         .backgroundColor(0xAFEEEE)
    68.  
    69.       }
    70.       .width('100%')
    71.       .height('100%')
    72.  
    73.     }
    74.   }
    75. }

  • 相关阅读:
    网络运维与网络安全 学习笔记2023.11.21
    如何使用vim粘贴鼠标复制的内容
    使用TensorRT 和 Triton 在Jetson NX上的模型部署
    反渗透,sql注入漏洞扫描工具
    飞行态势知识图谱及其问答系统的构建方法
    【PHP代码审计】——开启你的代码审计生涯
    运行vue，浏览器出错
    一篇文章讲清Servlet原理
    《致新来的你》
    记：lora及lorawan的一些概念话
  • 原文地址：https://blog.csdn.net/lplj717/article/details/126228343