当前位置:网站首页>openharmony容器组件之Row

openharmony容器组件之Row

2022-08-09 13:12:00 lplj717

Row:沿水平方向布局的容器

Row(value:{space?: Length}) //space:横向布局元素间距,默认为0
Row属性:
1,alignItems(在垂直方向上子组件的对齐格式)
2,justifyContent8+(设置子组件在水平方向上的对齐格式)

 上代码:

@Entry
@Component
struct ColumnT {
  build() {
    Column() {
      Text('space').fontSize(9).fontColor(0x000000).width('90%')
      //space:横向布局元素间距
      Row({ space: 5 }) {
        Text().width('30%').height(30).backgroundColor(0xAFEEEE)
        Text().width('30%').height(30).backgroundColor(0x00FFFF)
      }.width('90%').height(80).border({ width: 1 })

      Text('alignItems').fontSize(9).fontColor(0x000000).width('90%')
      //alignItems:在垂直方向上子组件的对齐格式(属性有:Start,Center,End),默认(Center)
      Row({ space: 5 }) {
        Text().width('30%').height(30).backgroundColor(0xAFEEEE)
        Text().width('30%').height(30).backgroundColor(0x00FFFF)
      }.alignItems(VerticalAlign.Center).width('90%').height(80).border({ width: 1 })

      Text('justifyContent').fontSize(9).fontColor(0x000000).width('90%')
      //justifyContent:设置子组件在水平方向上的对齐格式
      Row() { //注意:此处不能添加space属性,添加之后justifyContent属性失效(基于sdk8)
        Text().width('30%').height(30).backgroundColor(0xAFEEEE)
        Text().width('30%').height(30).backgroundColor(0x00FFFF)
      }.width('90%').height(80).border({ width: 1 }).justifyContent(FlexAlign.End)

    }
    .width('100%')
    .height('100%')
  }
}

原网站

版权声明
本文为[lplj717]所创,转载请带上原文链接,感谢
https://blog.csdn.net/lplj717/article/details/126224324