text - 如何在 Flutter 中创建响应式文本小部件？

Question

我遇到了响应式文本的问题。在我的应用程序中有不同的文本字体大小，我需要让它们响应不同的屏幕尺寸(仅限手机和设备方向纵向)。我还将 textScaleFactor: 1.0 添加到我的 MaterialApp 中，如下所示:

    builder: (context, widget) {
      return MediaQuery(
        child: widget,
        data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
      );
    },

但是帮助不大。我还尝试使用 MediaQuery.of(context).size.width 计算字体大小，但我认为这是危险和错误的。我希望它尽可能接近给我的设计，但我开始在这些步骤上失去它。

我该如何解决这个问题？

Answer 1

你可以使用这个插件flutter_screenutil .flutter 适配屏幕和字体大小的插件，让你的UI在不同尺寸的屏幕上显示合理的布局!

根据系统的“字体大小”可访问性选项初始化并设置合适的大小和字体大小以进行缩放#使用前请设置好设计稿的宽高，设计稿的宽高(单位px)。一定要在MaterialApp的home中设置页面(即入口文件，设置一次即可)，确保每次使用前都设置好适合尺寸:

//fill in the screen size of the device in the design

//default value : width : 1080px , height:1920px , 
allowFontScaling:false
ScreenUtil.instance = ScreenUtil.getInstance()..init(context);

//If the design is based on the size of the iPhone6 ​​(iPhone6 ​​750*1334)
ScreenUtil.instance = ScreenUtil(width: 750, height: 
1334)..init(context);

//If you wang to set the font size is scaled according to the system's 
"font size" assist option
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334, 
allowFontScaling: true)..init(context);

使用:#适配屏幕尺寸: #传递设计稿的px大小:

适配屏幕宽度:ScreenUtil.getInstance().setWidth(540),

适配屏幕高度:ScreenUtil.getInstance().setHeight(200),

也可以使用ScreenUtil()代替ScreenUtil.getInstance()，例如:ScreenUtil().setHeight(200)

注意

高度也根据setWidth适配保证不变形(当你想要正方形的时候)

setHeight方法主要是在高度上进行适配，你想在UI上控制一个屏幕的高度和实际显示时使用。

//for example:
//rectangle
Container(
       width: ScreenUtil.getInstance().setWidth(375),
       height: ScreenUtil.getInstance().setHeight(200),
       ...
        ),

////If you want to display a square:
Container(
       width: ScreenUtil.getInstance().setWidth(300),
       height: ScreenUtil.getInstance().setWidth(300),
        ),

适配器字体:

//Incoming font size，the unit is pixel, fonts will not scale to 
respect Text Size accessibility settings
//(AllowallowFontScaling when initializing ScreenUtil)
ScreenUtil.getInstance().setSp(28)    

//Incoming font size，the unit is pixel，fonts will scale to respect Text 
Size accessibility settings
//(If somewhere does not follow the global allowFontScaling setting)
ScreenUtil(allowFontScaling: true).setSp(28)  

//for example:

Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(
                'My font size is 24px on the design draft and will not change with the system.',
                style: TextStyle(
                  color: Colors.black,
                  fontSize: ScreenUtil.getInstance().setSp(24),
                )),
            Text(
                'My font size is 24px on the design draft and will change with the system.',
                style: TextStyle(
                  color: Colors.black,
                  fontSize: ScreenUtil(allowFontScaling: true).setSp(24),
                )),
          ],
        )

其他相关接口(interface):

ScreenUtil.pixelRatio       //Device pixel density
ScreenUtil.screenWidth      //Device width
ScreenUtil.screenHeight     //Device height
ScreenUtil.bottomBarHeight  //Bottom safe zone distance, suitable for buttons with full screen
ScreenUtil.statusBarHeight  //Status bar height , Notch will be higher Unit px
ScreenUtil.textScaleFactory //System font scaling factor

ScreenUtil.getInstance().scaleWidth //Ratio of actual width dp to design draft px
ScreenUtil.getInstance().scaleHeight //Ratio of actual height dp to design draft px