HarmonyOS 如何在Row中设置子组件为右侧对齐?

参数附件中的UI设计图,我想用Row来实现。

左侧一个图片 + 中间部分(Column + ROw) + 右侧图片。

HarmonyOS 如何在Row中设置子组件为右侧对齐?-鸿蒙开发者社区

我在很多的文档中都没有看到设置子组件的对齐方式,都是父控件设置子组件的对齐方式的,实际开发中会有很多的需求,需要为每个子组件设置对齐方式,对于我给的UI设计图,能够给出你们所认为的最佳的组件配合方式呢(Samplecode)?

HarmonyOS
2024-10-21 10:28:21
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zbw_apple

您可以在Stack组件中通过每个子组件的justifyContent属性,设置对齐方式。

如下是一个简单的示例demo,可供参考:

@Entry  
@Component  
struct linshi {  
  build() {  
    Stack() {  
      Row() {  
        Text('子组件1')  
}.justifyContent(FlexAlign.Start).width('100%').height('100%')  
      Row() {  
        Text('子组件2')  
}.justifyContent(FlexAlign.Center).width('100%').height('100%')  
      Row() {  
        Text('子组件3')    }.justifyContent(FlexAlign.End).width('100%').height('100%')  
    }  
  }  
}

可以尝试flex。

@Entry  
@Component  
struct linshi {  
  build() {  
    Stack() {  
      Flex({ justifyContent: FlexAlign.SpaceBetween }) {  
        Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)  
        Text('2').width('20%').height(50).backgroundColor(0xD2B48C)  
        Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)  
      }  
    }  
  }  
}
分享
微博
QQ
微信
回复
2024-10-21 15:59:08
相关问题