鸿蒙基础Row，Column，Text组件应用小实例(Harmony)

目标：Row组件和Column组件配合使用，模拟骰子六个面，并且显示在同一个界面

设计：对每一面骰子点数进行细分设计，可以将3，5分组重复使用，1，2，4，6单独加Row组件

3，5图例:

Column Row Text Text Text Row Text Text Text Row Text Text Text

实现：使用Text组件承载骰子圆点，并且设置为红色，为圆

代码如下

Text().height(35).width(35).backgroundColor('red').borderRadius(20)

将骰子1使用代码表示如下：

@Entry
@Component
struct T {
  build() {
    Column(){
      Column(){
        Text().height(35).width(35).backgroundColor('red').borderRadius(20)
      }.height('150').width('150').border({width:2}).justifyContent(FlexAlign.SpaceAround).borderRadius(20)
    }.height('100%').width('100%').justifyContent(FlexAlign.SpaceAround)
  }
}

实现样式如下：

代码.justifyContent(FlexAlign.SpaceAround)是将第Column组件进行居中

完整代码如下:

@Entry
@Component
//筛子1-6合集
struct Page {
  build() {
    Column(){
      Row(){
        Column(){
            Text().height(35).width(35).backgroundColor('red').borderRadius(20)
        }.height('150').width('150').border({width:2}).justifyContent(FlexAlign.SpaceAround).borderRadius(20)
        //
        Column(){
          Row(){
            Text().height(35).width(35).backgroundColor('red').borderRadius(20)
            Text().height(35).width(35).backgroundColor('red').borderRadius(20)
          }.width('100%').justifyContent(FlexAlign.SpaceAround)
        }.height('150').width('150').border({width:2}).justifyContent(FlexAlign.SpaceAround).borderRadius(20)

      }.width('100%').justifyContent(FlexAlign.SpaceAround)
      //3
      Row(){
        Column(){
          Row(){
            Text().height(35).width(35)
            Text().height(35).width(35)
            Text().height(35).width(35).backgroundColor('red').borderRadius(20)
          }.width('100%').justifyContent(FlexAlign.SpaceAround)
          Row(){
            Text().height(35).width(35)
            Text().height(35).width(35).backgroundColor('red').borderRadius(20)
            Text().height(35).width(35)
          }.width('100%').justifyContent(FlexAlign.SpaceAround)
          Row(){
            Text().height(35).width(35).backgroundColor('red').borderRadius(20)
            Text().height(35).width(35)
            Text().height(35).width(35)
          }.width('100%').justifyContent(FlexAlign.SpaceAround)
        }.height('150').width('150').border({width:2}).justifyContent(FlexAlign.SpaceAround).borderRadius(20)
        //4
        Column(){
          Row(){
            Text().height(35).width(35).backgroundColor('red').borderRadius(20)
            Text().height(35).width(35).backgroundColor('red').borderRadius(20)
          }.width('100%').justifyContent(FlexAlign.SpaceAround)
          Row(){
            Text().height(35).width(35).backgroundColor('red').borderRadius(20)
            Text().height(35).width(35).backgroundColor('red').borderRadius(20)
          }.width('100%').justifyContent(FlexAlign.SpaceAround)
        }.height('150').width('150').border({width:2}).justifyContent(FlexAlign.SpaceAround).borderRadius(20)

      }.width('100%').justifyContent(FlexAlign.SpaceAround)
      ///5
      Row(){
        Column(){
          Row(){
            Text().height(35).width(35).backgroundColor('red').borderRadius(20)
            Text().height(35).width(35)
            Text().height(35).width(35).backgroundColor('red').borderRadius(20)
          }.width('100%').justifyContent(FlexAlign.SpaceAround)
          Row(){
            Text().height(35).width(35)
            Text().height(35).width(35).backgroundColor('red').borderRadius(20)
            Text().height(35).width(35)
          }.width('100%').justifyContent(FlexAlign.SpaceAround)
          Row(){
            Text().height(35).width(35).backgroundColor('red').borderRadius(20)
            Text().height(35).width(35)
            Text().height(35).width(35).backgroundColor('red').borderRadius(20)
          }.width('100%').justifyContent(FlexAlign.SpaceAround)
        }.height('150').width('150').border({width:2}).justifyContent(FlexAlign.SpaceAround).borderRadius(20)
        //
        Column(){
          Row(){
            Text().height(35).width(35).backgroundColor('red').borderRadius(20)
            Text().height(35).width(35).backgroundColor('red').borderRadius(20)
          }.width('100%').justifyContent(FlexAlign.SpaceAround)
          Row(){
            Text().height(35).width(35).backgroundColor('red').borderRadius(20)
            Text().height(35).width(35).backgroundColor('red').borderRadius(20)
          }.width('100%').justifyContent(FlexAlign.SpaceAround)
          Row(){
            Text().height(35).width(35).backgroundColor('red').borderRadius(20)
            Text().height(35).width(35).backgroundColor('red').borderRadius(20)
          }.width('100%').justifyContent(FlexAlign.SpaceAround)
        }.height('150').width('150').border({width:2}).justifyContent(FlexAlign.SpaceAround).borderRadius(20)

      }.width('100%').justifyContent(FlexAlign.SpaceAround)

    }.height('100%').width('100%').border({width:2, color:'blue'}).justifyContent(FlexAlign.SpaceAround)

  }
}

显示结果如下:

本次实例为了更加形象，不考虑变量使用，不考虑程序封装，在实际开发中请将重复相同数值采用变量说明，重复代码进行封装处理