Flex布局,绝对定位,层叠布局Stack的详细讲解

Flex布局

Flex布局也叫做：伸缩布局，当子盒子的总和溢出父盒子时默认进行压缩显示
线性布局的原理是基于Flex来设计的。
Flex布局默认主轴是：水平向右的，交叉轴垂：直向下
单行或者单列的情况下，优先使用线性布局
线性布局的性能由于Flex布局
FLex布局我们可以根据 direction 来调整主轴的方向

direction:FlexDirection.Row 主轴水平向右的
direction:FlexDirection.Column 主轴垂直向下的
direction:FlexDirection.RowReverse 主轴水平向左，与Row
direction:FlexDirection.ColumnReverse 垂直从下到上，与Column 相反
Flex布局主轴垂直向下

1. @Entry
2. @Component
3. struct Index {
4.   build() {
5.     Flex({
6.       direction:FlexDirection.Column // 主轴垂直向下的
7.     }){
8.       Text('111').width(80).height(80).backgroundColor("#bab")
9.       Text('222').width(80).height(80).backgroundColor("#d9d")
10.       Text('333').width(80).height(80).backgroundColor("#c2c")
11.     }.width('100%').height("100%")
12.   }
13. }

复制代码

Flex布局主轴:垂直从下到上

1. @Entry
2. @Component
3. struct Index {
4.   build() {
5.     Flex({
6.       direction:FlexDirection.ColumnReverse // 垂直从下到上，与Column 相反
7.     }){
8.       Text('111').width(80).height(80).backgroundColor("#bab")
9.       Text('222').width(80).height(80).backgroundColor("#d9d")
10.       Text('333').width(80).height(80).backgroundColor("#c2c")
11.     }.width('100%').height("100%")
12.   }
13. }

复制代码

主轴的对齐方式,与之前学习的线性布局方式是一样的哈

justifyContent:FlexAlign.Start在最起始位置；
justifyContent:FlexAlign.Center在中间;
justifyContent:FlexAlign.End 在最末端;
justifyContent:FlexAlign.SpaceBetween 两端紧挨着，中间均匀分布。与css3的一样。
justifyContent:FlexAlign.SpaceAround 两端有一点间距(0.5)，中间间距(1)均匀分布。与css3的一样。
justifyContent:FlexAlign.SpaceEvenly 间隙是均匀的。
主轴水平向右,排列方式间隙均匀

1. @Entry
2. @Component
3. struct Index {
4.   build() {
5.     Flex({
6.       direction:FlexDirection.Row, // 主轴是：水平向右的
7.       justifyContent:FlexAlign.SpaceEvenly // 排列方式：间隙均匀
8.     }){
9.       Text('111').width(80).height(80).backgroundColor("#bab")
10.       Text('222').width(80).height(80).backgroundColor("#d9d")
11.       Text('333').width(80).height(80).backgroundColor("#c2c")
12.     }.width('100%').height("100%")
13.   }
14. }

复制代码

主轴水平向右,排列方式:两端紧挨着，中间均匀分布

1. @Entry
2. @Component
3. struct Index {
4.   build() {
5.     Flex({
6.       direction:FlexDirection.Row, // 主轴是：水平向右的
7.       justifyContent:FlexAlign.SpaceBetween, // 排列方式：两端紧挨着，中间均匀分布
8.     }){
9.       Text('111').width(80).height(80).backgroundColor("#bab")
10.       Text('222').width(80).height(80).backgroundColor("#d9d")
11.       Text('333').width(80).height(80).backgroundColor("#c2c")
12.     }.width('100%').height("100%")
13.   }
14. }

复制代码

交叉轴的对齐方式

alignItems: ItemAlign.Start 顶部
alignItems: ItemAlign.Center 居中
alignItems: ItemAlign.End 底部
alignItems: ItemAlign.Stretch 拉伸，占满整个空间
交叉轴的对齐方式:  垂直方向拉伸，占满整个空间

1. @Entry
2. @Component
3. struct Index {
4.   build() {
5.     Flex({
6.       direction:FlexDirection.Row, // 主轴是：水平向右的
7.       justifyContent:FlexAlign.SpaceBetween, // 排列方式：两端紧挨着，中间均匀分布,
8.       alignItems: ItemAlign.Stretch // 交叉轴的对齐方式:  垂直方向拉伸，占满整个空间
9.     }){
10.       Text('111').width(80).height(80).backgroundColor("#bab")
11.       Text('222').width(80).height(80).backgroundColor("#d9d")
12.       Text('333').width(80).height(80).backgroundColor("#c2c")
13.     }.width('100%').height("100%")
14.   }
15. }

复制代码

交叉轴对齐方式:在末端

1. @Entry
2. @Component
3. struct Index {
4.   build() {
5.     Flex({
6.       direction:FlexDirection.Row, // 主轴是：水平向右的
7.       justifyContent:FlexAlign.SpaceBetween, // 排列方式：两端紧挨着，中间均匀分布,
8.       alignItems: ItemAlign.End // 交叉轴方向上:在末端
9.     }){
10.       Text('111').width(80).height(80).backgroundColor("#bab")
11.       Text('222').width(80).height(80).backgroundColor("#d9d")
12.       Text('333').width(80).height(80).backgroundColor("#c2c")
13.     }.width('100%').height("100%")
14.   }
15. }

复制代码

是否换行

wrap: FlexWrap.Wrap 换行
wrap: FlexWrap.NoWrap 不换行。在使用Flex布局时，如果不进行换行，子元素的宽度大于父元素。会进行挤压
wrap: FlexWrap.WrapReverse 换行翻转
不换行

在使用Flex布局时，如果不进行换行，子元素的宽度大于父元素。会进行挤压

1. @Entry
2. @Component
3. struct Index {
4.   build() {
5.     Flex({
6.       wrap:FlexWrap.NoWrap
7.     }){
8.       Text('111').width(180).height(80).backgroundColor("#bab")
9.       Text('222').width(180).height(80).backgroundColor("#d9d")
10.       Text('333').width(180).height(80).backgroundColor("#c2c")
11.       Text('444').width(180).height(80).backgroundColor("#ccc")
12.     }.width('100%').height("100%")
13.   }
14. }

复制代码

换行显示

1. @Entry
2. @Component
3. struct Index {
4.   build() {
5.     Flex({
6.       wrap:FlexWrap.Wrap
7.     }){
8.       Text('111').width(180).height(80).backgroundColor("#bab")
9.       Text('222').width(180).height(80).backgroundColor("#d9d")
10.       Text('333').width(180).height(80).backgroundColor("#c2c")
11.     }.width('100%').height("100%")
12.   }
13. }

复制代码

换行翻转

1. @Entry
2. @Component
3. struct Index {
4.   build() {
5.     Flex({
6.       wrap:FlexWrap.WrapReverse
7.     }){
8.       Text('111').width(180).height(80).backgroundColor("#bab")
9.       Text('222').width(180).height(80).backgroundColor("#d9d")
10.       Text('333').width(180).height(80).backgroundColor("#c2c")
11.     }.width('100%').height("100%")
12.   }
13. }

复制代码

实现XX直聘搜索历史记录

1. @Entry
2. @Component
3. struct Index {
4.   build() {
5.     Column(){
6.       Row(){
7.         Text('历史搜索').fontSize(22).fontWeight(700).margin({left:10, bottom:10})
8.       }.width('100%')
9.       Flex({
10.         wrap: FlexWrap.Wrap
11.       }){
12.         Text('galang').height(30).backgroundColor("#ccc").borderRadius(4).padding({left:8, right:8}).margin({left:10,right:10, bottom:10})
13.         Text('go开发工程师').height(30).backgroundColor("#ccc").padding({left:8, right:8}).borderRadius(4).margin({left:10,right:10, bottom:10})
14.         Text('web开发工程师').height(30).backgroundColor("#ccc").padding({left:8, right:8}).borderRadius(4).margin({left:10,right:10, bottom:10})
15.         Text('嵌入式开发').height(30).backgroundColor("#ccc").padding({left:8, right:8}).borderRadius(4).margin({left:10,right:10, bottom:10})
16.         Text('Ai开发').height(30).backgroundColor("#ccc").padding({left:8, right:8}).borderRadius(4).margin({left:10,right:10, bottom:10})
17.       }
18.     }
19.   }
20. }

复制代码

绝对定位

绝对定位后的组件不再占用自身原有位置，可以实现层叠效果，原本的位置就不进行占用了。
默认情况下，绝对定位的堆叠层级与组件的加载顺序有关，在最后的组件往往在最上面。
如果使用了ZIndex，就与ZIndex的值大小有关，谁值越大，谁就在最上面。
语法：组件.position({x:数值,y:数值}) 或者 组件.position({right:数值,top:数值})
你也可以这样写：Text('使用定位').position({ right:10,top:0}).backgroundColor(Color.Pink)

1. @Entry
2. @Component
3. struct Index {
4.   build() {
5.     Flex({
6.       wrap:FlexWrap.NoWrap
7.     }){
8.       Text('我使用了绝对定位').position({ right:10,top:0}).backgroundColor(Color.Pink)
9.     }.width('100%').height("100%")
10.   }
11. }

复制代码

ZIndex的使用

1. @Entry
2. @Component
3. struct Index {
4.   build() {
5.     Flex({
6.       wrap:FlexWrap.NoWrap
7.     }){
8.       Text('最上面').position({ right:20,top:50}).backgroundColor('#ccc').width(60).height(40).zIndex(10)
9.       Text('哈哈').position({ right:10,top:0}).backgroundColor(Color.Pink).width(200).height(200)
10.       Text('五一结束啦').position({ right:20,top:50}).backgroundColor(Color.Orange).width(100).height(100)
11.     }.width('100%').height("100%")
12.   }
13. }

复制代码

层叠布局

层叠布局：堆叠容器，子组件按照顺序依次入栈，后一个子组件覆盖前一个子组件。
层叠布局具有较强的组件层叠能力。
场景:卡片层叠效果等，如购物车等
特点:层叠操作更简洁，编码效率高。(绝对定位的优势是更灵活）
我们可以通过alignContent来控制显示的位置
语法：Stack({alignContent:Alignment.Start}){ })
alignContent的属性值通过有下面这9个属性值

值说明Alignment.TopStart子组件对齐到容器的左上角（Top-Left）Alignment.Top子组件水平居中，并紧贴容器的顶部Alignment.TopEnd子组件对齐到容器的右上角（Top-Right）Alignment.Start子组件垂直居中，并紧贴容器的左侧（Left）Alignment.Center子组件在容器的中心位置（水平和垂直居中）Alignment.End子组件垂直居中，并紧贴容器的右侧（Right）Alignment.BottomStart子组件对齐到容器的左下角（Bottom-Left）Alignment.Bottom子组件水平居中，并紧贴容器的底部Alignment.BottomEnd子组件对齐到容器的右下角（Bottom-Right）层叠布局: alignContent:Alignment.Start 子组件垂直居中，并紧贴容器的左侧

1. @Entry
2. @Component
3. struct Index {
4.   build() {
5.     Stack({alignContent:Alignment.Start}){
6.       Text("最大").width(200).height(200).backgroundColor(Color.Pink)
7.       Text("中等").width(120).height(120).backgroundColor('#50D')
8.       Text("最小").width(40).height(40).backgroundColor('#FF3')
9.     }.width('100%').height('100%').backgroundColor('#ccc')
10.   }
11. }

复制代码

层叠布局: alignContent:Alignment.TopEnd 右上角

1. @Entry
2. @Component
3. struct Index {
4.   build() {
5.     Stack({alignContent:Alignment.TopEnd}){
6.       Text("最大").width(200).height(200).backgroundColor(Color.Pink)
7.       Text("中等").width(120).height(120).backgroundColor('#50D')
8.       Text("最小").width(40).height(40).backgroundColor('#FF3')
9.     }.width('100%').height('100%').backgroundColor('#ccc')
10.   }
11. }

复制代码

层叠布局: alignContent:Alignment.BottomStart 左边底部

1. @Entry
2. @Component
3. struct Index {
4.   build() {
5.     Stack({alignContent:Alignment.BottomStart}){
6.       Text("最大").width(200).height(200).backgroundColor(Color.Pink)
7.       Text("中等").width(120).height(120).backgroundColor('#50D')
8.       Text("最小").width(40).height(40).backgroundColor('#FF3')
9.     }.width('100%').height('100%').backgroundColor('#ccc')
10.   }
11. }

复制代码

通过ZIndex来控制层级关系

1. @Entry
2. @Component
3. struct Index {
4.   build() {
5.     Stack({alignContent:Alignment.Center}){
6.       Text("最大").width(200).height(200).backgroundColor(Color.Pink).zIndex(40)
7.       Text("中等").width(120).height(120).backgroundColor('#50D').zIndex(20)
8.       Text("最小").width(40).height(40).backgroundColor('#FF3').zIndex(50)
9.     }.width('100%').height('100%').backgroundColor('#ccc')
10.   }
11. }

复制代码

层叠布局和绝对定位的区别

层叠布局（Stack）：通过对齐属性快速实现组件堆叠，适合简单叠加场景。
绝对定位：通过精确坐标自由控制位置，适合复杂或动态布局需求。
也就是说：绝对定位更加控制位置更加的自由。
能够使用层叠布局实现的，一定可以使用绝对定位来实现。
在我们实现需求时，优先使用：层叠布局，如果不好实现的话，在考虑绝对定位
                                                                                                                               

                                                微信                                                                                                本文版权归作者所有，欢迎转载，未经作者同意须保留此段声明，在文章页面明显位置给出原文连接
                        如果文中有什么错误，欢迎指出。以免更多的人被误导。

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！