Column 纵向排列
Row 横向排列
6种Column枚举项对齐方式
6种Row的对齐方式
@Entry @Component struct Index { @State imageWidth:number = 150 build() { Column() { Row(){ Image($r('app.media.test')) .width(this.imageWidth) .borderRadius(10) .interpolation(ImageInterpolation.High) } .width('100%') .height(150) .justifyContent(FlexAlign.Center) Row(){ Text($r('app.string.width_label')) .fontSize(30) TextInput({text:this.imageWidth.toFixed(0)}) .width(150) .backgroundColor('#FFF') .type(InputType.Number) .onChange(value =>{ console.log(value); this.imageWidth=parseInt(value) }) } .width('100%') .justifyContent(FlexAlign.SpaceBetween) .padding({left:14,right:14})//控制内边距 Divider().width('90%') Row(){ Button('缩小').width(80).fontSize(20) .onClick(()=>{ if(this.imageWidth >=10){ this.imageWidth -= 10 } }) Button('放大').width(80).fontSize(20).type(ButtonType.Normal) .onClick(()=> { if (this.imageWidth < 300) { this.imageWidth += 10 } }) } .margin(30) //控制外边距 .width('80%') .justifyContent(FlexAlign.SpaceEvenly) Row(){ Slider({ min:100, //最小值 max:300,//最大值 value:this.imageWidth,//当前值 step:10,//滑动步长 style:SliderStyle.OutSet,//Inset direction:Axis.Horizontal,//vertical reverse:false//是否反向滑动 }).width('90%') .showTips(true)//是否显示百分比 .blockColor('#36d') .trackThickness(8) .onChange(value=>{ this.imageWidth = value }) } } .width('100%') .height('100%') } }