横屏和竖屏查看尺寸都固定不变
@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%')
}
}