HarmonyOS ROW/COLUMN/FLEX组件里怎样设置每个组件的对齐方式?

HarmonyOS ROW/COLUMN/FLEX组件里怎样设置每个组件的对齐方式?


HarmonyOS
2024-10-16 09:34:36
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Heiang

RelativeContainer为采用相对布局的容器,支持容器内部的子元素设置相对位置关系,适用于界面复杂场景的情况,对多个子组件进行对齐和排列。子元素支持指定兄弟元素作为锚点,也支持指定父容器作为锚点,基于锚点做相对位置布局。https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-layout-development-relative-layout-V5#概述

外层用Stack组件包裹,里面A、B两个子组件分别用一个容器包住,容器大小设置成跟Stack一样,通过设置各自容器的布局方式来达到A居左,B组件靠右居中。

@Entry  
@Component  
struct Index {  
  @State message: string = 'Hello World';  
  build() {  
    Stack() {  
      Row() {  
        Text(this.message)  
          .fontSize(20)  
          .fontWeight(FontWeight.Bold)  
      }.justifyContent(FlexAlign.Start)  
      .height('100%')  
      .width('100%')  
      Row() {  
        Text("你好啊")  
          .fontSize(20)  
          .fontWeight(FontWeight.Bold)  
      }.justifyContent(FlexAlign.Center)  
      .height('100%')  
      .width('100%')  
    }  
    .height('100%')  
    .width('100%')  
  }  
}
分享
微博
QQ
微信
回复
2024-10-16 16:01:51
相关问题
HarmonyOS Flex组件宽度问题
248浏览 • 1回复 待解决
Input组件是否支持设置文本居中对齐
1862浏览 • 1回复 待解决
怎样为TextArea组件设置最小高度?
289浏览 • 1回复 待解决
HarmonyOS Tabs组件Tabs如何左对齐
251浏览 • 1回复 待解决
RelativeContainer组件auto对齐规则
272浏览 • 1回复 待解决
HarmonyOS Flex 布局设置问题
341浏览 • 1回复 待解决
使用List组件设置多列布局方式
327浏览 • 1回复 待解决
如何获取文本对齐方式
656浏览 • 1回复 待解决