【带你轻松学】 ArkUI容器类组件-弹性布局容器（Flex）

于 2024-09-26 15:06:15 发布
阅读量806 收藏 17
点赞数 14
分类专栏： HarmonyOS 移动开发 鸿蒙开发 文章标签： 鸿蒙 鸿蒙系统
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_87677001/article/details/142556245
版权

往期知识点整理

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)

样例运行结果如下图所示：

image.png

  • 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（默认值）：元素在主轴方向首端对齐, 第一个元素与行首对齐，同时后续的元素与前一个对齐。
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：当纵轴有额外的空间时，多行内容的对齐方式。该属性仅在 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布局。

我是你叶
关注
专栏目录
【Flutter之旅】容器类组件介绍
胖狗子修行之路的博客
07-30 230
填充，尺寸限制类容器，装饰容器，变换，Container，Scaffold、TabBar、底部导航，裁剪
容器类组件介绍
weixin_33756418的博客
04-22 249
所谓容器组件，指能搞包容其它ui组件的组件，和布局组件的差别在于，容器组件不能直接在IDE的设计界面拖拽其它ui组件加到它的内部。他一般是通过属性templates来指定多个ui文件作为模板，然后通过数据绑定的方式来加载数据。数据绑定参考文档.容器组件很多种而且也很重要，因为它一般是App的主框架，目前官方容器类组件包含10个，我们只是简单介绍10个组件的基本界面让大家能够了解每个组件的应用场景从...
HarmonyOS ArkUI容器类组件-弹性布局容器（Flex）
m0_71263309的博客
04-22 302
(value?direction?wrap?: FlexWrap;alignItems?value：设置子组件的排列样式，direction：设置子组件的的排列方向即主轴方向，Row（默认值）：子组件水平排列，即主轴为水平方向纵轴为竖直方向，子组件由左向右排列。RowReverse：子组件水平排列，即主轴为水平方向纵轴为竖直方向，子组件由右向左排列。Column：子组件竖直排列，即主轴为垂直方向，起点在上边，子组件由上到下排列。
常用界面设计组件 —— 容器组件
qq_36091214的博客
01-24 776
QStackedWidget列提供了堆叠窗体的效果。为了将界面上的各个组件的分布设计得更加美观，经常 使用一些容器类，如 QgoupBox、QtabWidget、 QToolBox等。QTabWidget 的一种带标签页的窗口，在这种类型的窗 口中可以存储多个子窗口，每个子窗口的显示可以通过 对应的标签进行切换。QToolBox类提供了一列选项卡窗口，当前项显示在当前 选项卡下面，适用于分类浏览、内容展示、操作指引这 一类的使用场景。最终的效果 可以看到页面显示不全，有滑动拉条显示。可以选择垂直布局选项。
【微信小程序】组件篇 -- 常用视图容器类组件介绍 -- view、scroll-view和swiper（六）
JMFive的博客
02-23 6288
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第6篇文章;今天开始学习微信小程序的第三天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。🌹 🌹 🌹也欢迎你，关注我。👍 👍 👍！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。🎉。
ArkUI组件库示例App 包括基础组件、容器组件、弹窗组件，可以在预览器或真机中，实时预览组件接口、属性调整的效果
01-08
本示例App是 ArkUI 组件库的一个全面展示，它涵盖了基础组件、容器组件以及弹窗组件，旨在帮助开发者了解并熟练运用这些组件。 基础组件是构建用户界面的基本元素，例如按钮（Button）、文本（Text）、图像（Image...
移动Web开发基础-flex弹性布局（兼容写法）
前端向朔
12-01 3809
前言 前面我们已经分享过一篇 移动Web开发基础-百分比+flex布局方案 只是大概讲了下这种布局适配方案的思路，后面我们也通过分享 移动Web开发基础-比例盒子 让大家对百分比布局中比较常用的等比缩放有了比较好的处理方法，本文我们来了解下flex弹性布局，并重点了解移动端web页面中flex弹性布局的兼容写法。 flex初认识 Flex 是 Flexible Box 的缩写，意为”弹性
Flex弹性盒布局-flex-direction、flex-wrap、justify-content、align-items
m0_64460142的博客
04-12 2333
Flex弹性盒布局 flex弹性布局：之前我们学过浮动和定位设置px值才能进行页面排版，flex会比较方便。它比较弹性。 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称“项目”。容器默认存在两根轴，分别为水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置叫做 main start，结束位置叫做 main end；交叉轴的开始位置叫做 cro
详解CSS中的flex容器与flex属性
12-13
flex container（flex容器 或 弹性容器） flex容器是flex元素的的父元素。 通过设置display 属性的值为flex 或 inline-flex定义。 注旧版本的属性值： box：将对象作为弹性容器显示。（最老版本）inline-box：将对象...
CSS3 Flex 弹性布局实例代码详解
01-19
//任何一个容器都可以指定为Flex布局。 .box{ display: flex; } //行内元素也可以使用Flex布局。 .box{ display: inline-flex; } //注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将...
android flutter:容器类组件
zhuowalun8427的博客
11-11 1394
本节学习老孟《Flutter实战入门》 一、填充布局（Padding） Padding是一个可以设置内边距的容器控件，属性如下： import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:path_provider/path_provider.dart'; import 'package:flutter/cupertino.dart'; String _storageDi
HarmonyOS鸿蒙开发指南:自适应布局 弹性布局
sybh的博客
01-08 1324
弹性布局（Flex布局）是自适应布局中使用最为灵活的布局。弹性布局提供一种更加有效的方式来对容器中的子组件进行排列、对齐和分配空白空间。弹性布局容器: Flex组件作为Flex布局的容器，用于设置布局相关属性。子组件: Flex组件内的子组件自动成为布局的子组件。主轴: Flex组件布局方向的轴线，子组件默认沿着主轴排列。主轴开始的位置称为主轴起始端，结束位置称为主轴终点端。交叉轴: 垂直于主轴方向的轴线。交叉轴起始的位置称为交叉轴首部，结束位置称为交叉轴尾部。
鸿蒙HarmonyOS实战-ArkUI组件（Row/Column）
shudaoshanQAQ的博客
01-04 1960
如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识。想要获取文中提到的学习资料，请点击→全套鸿蒙HarmonyOS学习资料或者关注小编后私信回复【666】也可获取资料哦~~
鸿蒙开发-UI-布局-弹性布局
中年程序员
01-17 1868
上文详细学习常见布局方式-层叠布局，学习如何控制层叠布局中子元素的堆叠顺序，在最后的案例中使用Flex容器组件，Flex容器组件是用来做弹性布局的组件，本文详细学习鸿蒙开发弹性布局。本文详细学习常见布局方式-弹性布局，学习弹性布局容器主轴、交叉轴上子元素的顺序方式，同时也学习了弹性布局容器子元素自动伸缩机制，下文将学习相对布局。
HarmonyOS实战开发：弹性布局（Flex）-（构建布局）
2401_84194030的博客
05-08 1050
弹性布局（Flex）提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间
【ArkUI】对于Flex布局与基础组件&&声明式UI-组件封装&&父子组件相互绑定的运用
一键难忘的博客
09-24 765
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。父组件的@Prop变量可以初始化子组件的常规变量或@Prop变量，但不能初始化子组件的@State或@Link变量。重新编译上传，得到以下结果：上面的提示小文字与输入框进行了应该实时的双向绑定。2.放一个宽度为10的背景颜色为黑色的外边框来可视化弹性布局的大小。在登录下面输出一行提示的用户名，应该是用户输入随时变化的。3.在下面的TextInput引用该方法的值。2.在子组件里，引用到父组件传过来的值。
2024年HarmonyOS鸿蒙最全Flex 布局教程：语法篇（阮一峰）_flex 阮一峰(3)，HarmonyOS鸿蒙面试基础
最新发布
2401_84851371的博客
05-09 527
布局的传统解决方案，基于，依赖属性 +属性 +属性。它对于那些特殊布局非常不方便，比如，就不容易实现。2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。Flex布局将成为未来布局的首选方案。本文介绍它的语法，给出常见布局的Flex写法。和。
Flex 接口定义
PsArvin的专栏
07-18 1092
import flash.events.IEventDispatcher; public interface ISideNavigate extends IEventDispatcher {         function getContentUrl():String;                  function getNameString():String; }
ArkUI框架，Flex布局，基础组件及封装，父子组件的双向绑定
大河之犬的博客
09-25 2498
Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容器组件，进而对容器内的其他元素进行弹性布局，例如：使三个元素在容器内水平居中，垂直等间隔分散。我们需要拿到用户输入的数据，以向后端发送一个登录请求，这就需要父子组件的双向绑定机制。Previewer的页面无法进行实时的交互操作，所以我们要学会使用真机进行模拟。例如：如下的布局代码分别表示：（垂直排列，水平居中，垂直居中）自定义一个组件内容：（myInput.ets）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值