参考如下demo@Entry @Component struct Pagebutton { @State imagewidth: number = 30; @State fontwight: number = 30; build() { Column() { Row(){ Text($r('app.string.text')).fontSize(this.fontwight) TextInput({placeholder:$r('app.string.image_width'),text:this.imagewidth.toString()}) .type(InputType.Number) .onChange(value=>{ this.fontwight=parseInt(value) }).backgroundColor('#fff') }.justifyContent(FlexAlign.SpaceBetween).width('100%').padding({ left:10, right:10 }) Divider().width('91%') Row({space:10}){ Button('点击增加字体大小').onClick(()=>{ this.fontwight+=10 }) Button('点击减少字体大小').onClick(()=>{ this.fontwight-=10 }) }.width('100%') .justifyContent(FlexAlign.SpaceEvenly) .margin({ top:50 }) Row(){ Slider({ min:0, max:100, value:this.imagewidth, step:10, style:SliderStyle.OutSet, direction:Axis.Horizontal, reverse:false }).showTips(true).blockColor('#36d').onChange(value=>{ console.log('value',value) this.imagewidth=Math.trunc(value)//取整 console.log(typeof value) }).trackThickness(10).width('100%') }.margin({ top:50 }) } .width('100%') } }
参考如下demo