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

我在开发适用于网络和移动设备的响应式应用程序时遇到了同样的问题，但textScaleFactor帮助解决了我的问题，默认的 textScaleFactor 是1所以我编写了一个textScaleFactor根据屏幕宽度进行更改的方法

import 'dart:math';
import 'package:flutter/material.dart';

class ScaleSize {
  static double textScaleFactor(BuildContext context, {double maxTextScaleFactor = 2}) {
    final width = MediaQuery.of(context).size.width;
    double val = (width / 1400) * maxTextScaleFactor;
    return max(1, min(val, maxTextScaleFactor));
  }
}

我们可以根据其比例来控制大小版本，在文本小部件中使用

Text(
     intro.subtitle,
     style: Theme.of(context).textTheme.subtitle1,
     textAlign: TextAlign.center,
     textScaleFactor: ScaleSize.textScaleFactor(context),
   ),

Answer 2

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

根据系统的“字体大小”辅助功能选项初始化并设置适配大小和字体大小#使用前请设置设计稿的宽度和高度，设计稿的宽度和高度（单位px）。一定要在MaterialApp的首页设置页面（即入口文件，设置一次即可），确保每次使用前都设置好合适的尺寸：

//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 方法主要是在高度上进行适配，你想在 UIUsed 上控制一个屏幕的高度和实际显示的时候一样。

//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),
                )),
          ],
        )

其他相关的api？

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

Answer 3

试试这个：根据不同的屏幕尺寸获得自适应文本大小

    class AdaptiveTextSize {
      const AdaptiveTextSize();

      getadaptiveTextSize(BuildContext context, dynamic value) {
    // 720 is medium screen height
        return (value / 720) * MediaQuery.of(context).size.height;
      }
    }

用例：

                 Text("Paras Arora",style: TextStyle(fontSize: 
                 AdaptiveTextSize().getadaptiveTextSize(context, 20)),

Answer 4

class SizeConfig {
  static MediaQueryData _mediaQueryData;
  static double screenWidth;
  static double screenHeight;
  static double blockSizeHorizontal;
  static double blockSizeVertical;

  void init(BuildContext context) {
    _mediaQueryData = MediaQuery.of(context);
    screenWidth = _mediaQueryData.size.width;
    screenHeight = _mediaQueryData.size.height;
    blockSizeHorizontal = screenWidth / 100;
    blockSizeVertical = screenHeight / 100;
  }
}

SizeConfig().init(context);在小部件构建和使用之后添加此内容 style: TextStyle(fontSize: 2 * SizeConfig.blockSizeVertical,)，

乘以你想要的数字，至少尝试一次。我已附上屏幕截图。

我的解决方案：

其他解决方案：