常用布局效果2024-06-17

• 左动右静：利用Blank 的自动填充空白功能，以及Flex 的弹性功能

@Entry
@Component
struct BlankExample {
  build() {
    Column() {
      Flex() {
        Text('BluetoothB').fontSize(18)
          .backgroundColor(Color.Red)
        Blank()
          .backgroundColor(Color.Green)
        Toggle({ type: ToggleType.Switch, isOn: true })
          .backgroundColor(Color.Red)
      }.backgroundColor(Color.Yellow).borderRadius(15).padding(16).width('100%')
    }.backgroundColor(0xEFEFEF).padding(20).width('100%')
  }
}

效果： image.png

• 带标签换行环绕

@Styles style1 () {
    .width('100%')
    .height(100)
    .backgroundColor(Color.Pink)
    .padding({left:16, right:16, top:0,bottom:0})
    .margin({top:4,bottom:4})
    .borderRadius(10)
  }

  @Builder Card1 (){
    Column() {
      Flex() {
        // 左边的固定标签
        Stack() {
          Text('标签1')
            .fontSize(12)
              // .margin({ left: 10}) // 标签和标题之间的最小间距
            .foregroundColor(Color.Blue)
            // .backgroundColor(Color.Red)
            .margin({top:3})
            .padding({left:3,right:3, top:2, bottom:2})
            .borderColor(Color.Black)
            .borderWidth(1)
          Text('标题和图标s标题和图标标题和图标标题和图标dfadsfsdfasadf的')
            .fontSize(16)
            .lineHeight(24)
            .textAlign(TextAlign.Start)
            .foregroundColor(Color.Red)
            .textIndent(3*12+5)

            .textOverflow({overflow:TextOverflow.None})

        }
        .width('100%')
        .align(Alignment.TopStart)
        .backgroundColor(Color.Yellow)

        // 右边的图标
        Image($r('app.media.icon'))
          .backgroundColor(Color.Red)
          .width(20)
          .height(24)
          .margin({ left: 10 }) // 图标和标题之间的最小间距
      }
      .backgroundColor(Color.Green)
      // .justifyContent(FlexAlign.Start)
      // .width('100%')
      .height('100')
      // .alignItems(VerticalAlign.Top)
      // .justifyContent(FlexAlign.SpaceBetween)
      .padding({ left: 10, right:10,top:10 }) // 左右边距
      .borderRadius(10)
    }
    .style1()
  }

  build() {
    if (this.card1)  this.Card1()
    else this.Card2()
  }

使用：
主页面：
 build() {
    Column() {
      HQLCIndexTest()
      HQLCIndexTest()
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#f0f0fe')
  }

image.png