HarmonyOS Flex 布局设置问题

父Flex 中有两项元素A 和B ,我想让 A 位于整个布局的中间,B位于组件的底部,然后

父设置了垂直排列 Flex({ direction: FlexDirection.Column })

A设置了居中对齐A.alignSelf(ItemAlign.Center)

B设置了底部对齐.alignSelf(ItemAlign.End)

如果父不设置direction , A的居中和B的底对齐是可以的,但是是横向排布的,所以我设置了父垂直排布,但是为什么A和B的设置就无效了呢?

最优解是什么?

HarmonyOS
2024-09-24 12:25:11
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
superinsect

Flex默认主轴是水平,alignSelf是改变侧轴 可以A居中和B底对齐,设置direction: FlexDirection.Column之后,主轴为竖直向下,变为A水平居中和B右对齐

示例如下:

@Entry  
@Component  
struct FlexDemo {  
  build() {  
    Column() {  
      Column({ space: 5 }) {  
        Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceBetween }) {  
          Text('1').width('100%').height('100%').backgroundColor(Color.Pink).alignSelf(ItemAlign.Center)  
          Text('2').width('100%').height(50).backgroundColor(0xF5DEB3).alignSelf(ItemAlign.End)  
        }  
        .width('90%')  
        .height('100%')  
        .padding(10)  
        .backgroundColor(0xAFEEEE)  
      }.width('100%').margin({ top: 5, bottom: 5 })  
    }.width('100%')  
  }  
}
分享
微博
QQ
微信
回复
2024-09-24 16:00:49
相关问题
HarmonyOS Flex布局如何设置最大行数
48浏览 • 1回复 待解决
HarmonyOS flex容器布局
968浏览 • 2回复 待解决
如何优化Flex布局性能
557浏览 • 1回复 待解决
Flex布局与w3c中的flex是否有差异
974浏览 • 1回复 待解决
HarmonyOS Flex组件宽度问题
376浏览 • 1回复 待解决
HarmonyOS Flex组件存在问题,UI不对
69浏览 • 1回复 待解决
HarmonyOS 布局问题
32浏览 • 1回复 待解决
HarmonyOS UI布局问题
422浏览 • 1回复 待解决
HarmonyOS flex居中
73浏览 • 1回复 待解决