鸿蒙FlexLayout.ets

@Entry
@Component
struct FlexLayout {
  @State message: string = '姓名123456'
  @State justifyContent: FlexAlign = FlexAlign.Start
  @State alignItems: ItemAlign = ItemAlign.Start
  @State SpindleDirection: FlexDirection = FlexDirection.Row

  build() {
    Column({ space: 30 }) {
      Row() {
        Text(this.message)
          .fontWeight(25)
          .fontSize(25)
      }.margin({ top: 10 })

      Flex({ direction: this.SpindleDirection
      , justifyContent: this.justifyContent,
        alignItems: this.alignItems }) {
        Row() {
        }.width(50)
        .height(50)
        .backgroundColor(Color.Red)
        .borderRadius(15)

        Row() {

        }.width(50)
        .height(50)
        .backgroundColor(Color.Blue)
        .borderRadius(15)

        Row() {

        }.width(50)
        .height(50)
        .backgroundColor(Color.Green)
        .borderRadius(15)

      }
      .width("95%")
      .height('50%')
      .backgroundColor(Color.White)
      .shadow({ radius: 15, color: "#4b4f514f", })
      .borderRadius(15)

      Column() {
        Column() {
          Row() {
            Text("主轴的方向")
              .fontWeight(FontWeight.Bold)
              .textAlign(TextAlign.Center)
              .width('100%')
          }.width('100%')

          List({ space: 25 }) {
            ListItem() {
              Row() {
                Text("Row")
                Radio({ value: 'Radio2', group: 'radioGroup1' }).checked(true)
                  .height(20)
                  .width(20)
                  .onChange((isChecked: boolean) => {
                    this.SpindleDirection = FlexDirection.Row
                    console.log('FlexDirection status is  ' + this.SpindleDirection)
                  })
              }
            }

            ListItem() {
              Row() {
                Text("Column")
                Radio({ value: 'Radio2', group: 'radioGroup1' }).checked(false)
                  .height(20)
                  .width(20)
                  .onChange((isChecked: boolean) => {
                    this.SpindleDirection = FlexDirection.Column
                    console.log('FlexDirection status is  ' + this.SpindleDirection)
                  })
              }
            }

            ListItem() {
              Row() {
                Text("RowReverse")
                Radio({ value: 'Radio2', group: 'radioGroup1' }).checked(false)
                  .height(20)
                  .width(20)
                  .onChange((isChecked: boolean) => {
                    this.SpindleDirection = FlexDirection.RowReverse
                    console.log('FlexDirection status is  ' + this.SpindleDirection)
                  })
              }
            }

            ListItem() {
              Row() {
                Text("ColumnReverse")
                Radio({ value: 'Radio2', group: 'radioGroup1' }).checked(false)
                  .height(20)
                  .width(20)
                  .onChange((isChecked: boolean) => {
                    this.SpindleDirection = FlexDirection.ColumnReverse
                    console.log('FlexDirection status is  ' + this.SpindleDirection)
                  })
              }
            }
          }.height(40)
          .listDirection(Axis.Horizontal)
          .width('95%')
          .scrollBar(BarState.On)
        }.width('100%')
        .height('30%')
        .justifyContent(FlexAlign.SpaceAround)


        Column() {
          Row() {
            Text("主轴对齐方式").textAlign(TextAlign.Center)
              .width('100%')
              .fontWeight(FontWeight.Bold)
          }.width('100%')

          Row() {
            Row() {
              Text("Start")
              Radio({ value: 'Radio2', group: 'radioGroup2' }).checked(true)
                .height(20)
                .width(20)
                .onChange((isChecked: boolean) => {
                  this.justifyContent = FlexAlign.Start
                  console.log('justifyContent status is  ' + this.justifyContent)
                })
            }

            Row() {
              Text("Center")
              Radio({ value: 'Radio2', group: 'radioGroup2' }).checked(false)
                .height(20)
                .width(20)
                .onChange((isChecked: boolean) => {
                  this.justifyContent = FlexAlign.Center
                  console.log('justifyContent status is ' + this.justifyContent)
                })
            }

            Row() {
              Text("End")
              Radio({ value: 'Radio2', group: 'radioGroup2' }).checked(false)
                .height(20)
                .width(20)
                .onChange((isChecked: boolean) => {
                  this.justifyContent = FlexAlign.End
                  console.log('justifyContent status is ' + this.justifyContent)
                })
            }
          }.width('100%')
          .justifyContent(FlexAlign.SpaceAround)
        }.width('100%')
        .height('30%')
        .justifyContent(FlexAlign.SpaceAround)

        Column() {
          Row() {
            Text("交叉轴对齐方式")
              .fontWeight(FontWeight.Bold)
              .textAlign(TextAlign.Center).width('100%')
          }.width('100%')

          Row() {
            Row() {
              Text("Start")
              Radio({ value: 'Radio2', group: 'radioGroup3' }).checked(true)
                .height(20)
                .width(20)
                .onChange((isChecked: boolean) => {
                  this.alignItems = ItemAlign.Start
                  console.log('alignItems status is ' + this.alignItems)
                })
            }

            Row() {

              Text("Center")
              Radio({ value: 'Radio2', group: 'radioGroup3' }).checked(false)
                .height(20)
                .width(20)
                .onChange((isChecked: boolean) => {
                  this.alignItems = ItemAlign.Center
                  console.log('alignItems status is ' + this.alignItems)
                })
            }

            Row() {
              Text("End")
              Radio({ value: 'Radio2', group: 'radioGroup3' }).checked(false)
                .height(20)
                .width(20)
                .onChange((isChecked: boolean) => {
                  this.alignItems = ItemAlign.End
                  console.log('alignItems status is ' + this.alignItems)
                })
            }

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

      }
      .width("95%")
      .height('30%')
      .justifyContent(FlexAlign.SpaceAround)
      .shadow({ radius: 15, color: "#4b4f514f", })
      .backgroundColor(Color.White)
      .borderRadius(15)
    }.width('100%')
    .height('100%')
    .backgroundColor('#f1f2f1')

  }
}