HarmonyOS Next layoutweight—经典尺寸

139 阅读1分钟

横屏和竖屏查看尺寸都固定不变

image.png

image.png

@Entry
@Component
struct Index {
  build() {
    Column() {
      Row() {
        Row() {
          Row() {
            Image($r('app.media.top1'))
              .width(80)
              .height(80)
              .borderRadius(10)
          }
          .width(80)
          .height(80)

          Column(
            {
              space: 6
            }
          ) {
            Row() {
              Text('程序员2024春季新款穿搭')

                .fontSize(14)
                .fontWeight(700)
                .textAlign(TextAlign.Start)
              Text('¥ 359')
                .fontSize(14)
                .fontWeight(700)
            }
            .justifyContent(FlexAlign.SpaceBetween)
            .width('100%')

            // .padding(5)
            // .backgroundColor(Color.Red)

            Row() {
              Text('条纹/XXXXXXL')
                .fontSize(14)
                .fontColor('#999')
                .fontWeight(700)
                .textAlign(TextAlign.Start)

              Text('x 1')
                .fontSize(14)
                .fontColor('#999')
            }
            .width('100%')
            .justifyContent(FlexAlign.SpaceBetween)

            // .padding(5)
            // .backgroundColor(Color.Red)

            Row() {
              Text('假一赔四')
                .fontColor('#f60')
                .border({
                  width: 1,
                  color: '#f60',
                  style: BorderStyle.Solid
                })// .fontSize(12)
                .borderRadius(6)
                .padding(1)
                .fontSize(12)
                .fontWeight(700)
                .textAlign(TextAlign.Start)

              Text('七天无理由退换')
                .fontSize(12)
                .border({
                  width: 1,
                  color: '#f60',
                  style: BorderStyle.Solid
                })
                .fontColor('#f60')
                .borderRadius(6)
                .padding(1)
                .margin({
                  left: 5
                })
            }
            .width('100%')

            // .padding(5)
            // .backgroundColor(Color.Red)

          }
          .margin(10)
          .width('100%')
          .height('100%')
          .layoutWeight(1)
          ****关键点加入自适应尺寸设置******

          // .backgroundColor(Color.Blue)
        }
        .width('100%')
        .height(80)

      }
      .width('100%')
      .height(100)
      // .backgroundColor(Color.Yellow)
      .padding({
        left: 10,
        right: 10
      })
      .backgroundColor('#fff1f0f0')
      .borderRadius('10')
    }
    .width('100%')
    .height('100%')

  }
}