flutter - 停止 flutter 根据手机字体更改字体大小

我正在构建一个应用程序有一个问题。当我将手机字体设置为更大尺寸时,字体会导致溢出。

我试过用这个:

class SizeConfig {
  static late MediaQueryData _mediaQueryData;
  static late double screenWidth;
  static late double screenHeight;
  static double? defaultSize;
  static Orientation? orientation;

  void init(BuildContext context) {
    _mediaQueryData = MediaQuery.of(context);
    screenWidth = _mediaQueryData.size.width;
    screenHeight = _mediaQueryData.size.height;
    orientation = _mediaQueryData.orientation;
  }
}

// Get the proportionate height as per screen size
double getProportionateScreenHeight(double inputHeight) {
  double screenHeight = SizeConfig.screenHeight;
  // 812 is the layout height that designer use
  return (inputHeight / 812.0) * screenHeight;
}

// Get the proportionate height as per screen size
double getProportionateScreenWidth(double inputWidth) {
  double screenWidth = SizeConfig.screenWidth;
  // 375 is the layout width that designer use
  return (inputWidth / 375.0) * screenWidth;
}

当我使用 Text 时:

Text(
        "Discover our latest products",
          style: TextStyle(
              letterSpacing: -1,
              fontFamily: 'Muli-Bold',
              fontSize: getProportionateScreenWidth(35),
              fontWeight: FontWeight.w700,
              color: kPrimaryColor),
        ),

当我将手机字体设置为更大尺寸时,它会导致溢出。我认为使用屏幕尺寸可以解决它,但正如您所见,它没有。如何阻止应用更改字体大小?

回答1

如果您试图阻止文本溢出屏幕,您可以尝试:

  • 将您的文本放入灵活的小部件中!:
Flexible(child: Text(
        "Discover our latest products",
          style: TextStyle(
              letterSpacing: -1,
              fontFamily: 'Muli-Bold',
              fontSize: getProportionateScreenWidth(35),
              fontWeight: FontWeight.w700,
              color: kPrimaryColor),
              ),
        ),
  • 或者设置文本的溢出选项以通过用点替换文本/淡出来隐藏其余文本,我通常使用两者的组合。
Text(
        "Discover our latest products",
          style: TextStyle(overflow: TextOverflow.fade,//fade/ellipsis
              letterSpacing: -1,
              fontFamily: 'Muli-Bold',
              fontSize: getProportionateScreenWidth(35),
              fontWeight: FontWeight.w700,
              color: kPrimaryColor),
        ),

相似文章

随机推荐

最新文章