#鸿蒙通关秘籍#在鸿蒙开发中,RelativeContainer如何与其他布局组件一同使用?

HarmonyOS
2天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
VR暗影舞

RelativeContainer能够与Row、Column、Flex、Stack等其他布局组件混合使用。每个子组件按照相对布局的规则单独设定对齐参数。这里是一个复杂的布局组合示例:

bash @Entry @Component struct Index { build() { RelativeContainer() { Row().width(100).height(100).backgroundColor("#FF3333") .alignRules({ top: {anchor: "container", align: VerticalAlign.Top}, left: {anchor: "container", align: HorizontalAlign.Start} }) .id("row1")

  Column().width("50%").height(30).backgroundColor(0xAFEEEE)
    .alignRules({
      top: {anchor: "__container__", align: VerticalAlign.Top},
      left: {anchor: "__container__", align: HorizontalAlign.Center}
    })
    .id("row2")
    
  Flex({ direction: FlexDirection.Row }) {
    Text('1').width("20%").backgroundColor(0xF5DEB3)
    Text('2').width("20%").backgroundColor(0xD2B48C)
  }
  .alignRules({
    top: {anchor: "row2", align: VerticalAlign.Bottom},
    left: {anchor: "row1", align: HorizontalAlign.Start}
  })
  .id("row3")
}.width(300).height(300).border({width: 2, color: "#6699FF"})

} }

分享
微博
QQ
微信
回复
1天前
相关问题