HarmonyOS 如何设置App实现字体统一放大的老年模式,并且可以来回切换正常模式和大字模式

HarmonyOS 如何设置App实现字体统一放大的老年模式,并且可以来回切换正常模式和大字模式

HarmonyOS
2024-08-10 12:26:18
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zbw_apple

可以参考以下demo 使用Slider或者button来控制字体的放大和缩小

@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%') 
 
  } 
}
分享
微博
QQ
微信
回复
2024-08-10 17:25:08
相关问题
适老化模式字体放大咨询
296浏览 • 1回复 待解决
app适配深色浅色切换模式
1891浏览 • 1回复 待解决
应用如何切换夜间模式
948浏览 • 1回复 待解决
HarmonyOS分屏幕模式小窗口模式适配
684浏览 • 1回复 待解决
HarmonyOS 如何设置固定浅色模式
46浏览 • 1回复 待解决
HarmonyOS app如何禁用深色模式
263浏览 • 1回复 待解决
HarmonyOS 组件切换深色模式不生效
404浏览 • 1回复 待解决
HarmonyOS 如何禁用小窗分屏模式
419浏览 • 1回复 待解决
如何设置Web组件深色模式
332浏览 • 1回复 待解决
setRingerMode设置静音模式报错
5878浏览 • 1回复 待解决
Ability 全屏模式无法实现
329浏览 • 2回复 待解决
arkts 护眼模式功能实现
347浏览 • 0回复 待解决