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
相关问题
如何在web组件获取和设置UserAgent
738浏览 • 1回复 待解决
HarmonyOS 顶部tabs如何设置对齐
330浏览 • 1回复 待解决
如何在Worker开启多级线程
258浏览 • 1回复 待解决
Input组件是否支持设置文本居中对齐
1861浏览 • 1回复 待解决
HarmonyOS 如何在builder函数传入组件
221浏览 • 0回复 待解决
设置XComponent组件透明
419浏览 • 1回复 待解决
如何设置组件组件宽度变化
2059浏览 • 1回复 待解决
如何在TextArea设置最小的高度。
458浏览 • 1回复 待解决