Flutter：如何根据设备屏幕大小调整文本大小

Question

在Flutter中，如何根据设备屏幕大小调整应用程序中的文本大小？该应用程序用于阅读文本，我需要用户随着设备尺寸的增加看到更大的文本，并设置最大可能的大小。我知道一种方法可以做到这一点：

Text(
  'Some text here',
  style: TextStyle(
    fontSize: 20 * MediaQuery.of(context).size.width * some_ratio
  ),
)

有没有其他方法也考虑了显示高度？

- Amani

Answer 1

< p >对于基于屏幕的字体大小，我建议使用 Height 作为参考。

例如：

例如：

 double unitHeightValue = MediaQuery.of(context).size.height * 0.01;
 double multiplier = 25;
 return Text(
  'Some Text', 
  style: TextStyle(
    fontSize: multiplier * unitHeightValue,
  ),
 );

通过这种方法，您将获得完美的像素文本大小以及您选择的乘数值的额外优势。

这类似于Android中的“dp”或“sp”概念。

---

更新：

经过一些额外的实验，我意识到仅选择“高度”作为参考仅适用于移动设备，特别是在纵向模式/方向下。

简单来说，当设备的主滚动轴是设备的纵向模式时。

因此，我建议根据您的应用程序需求选择/更改参考。

即，如果您正在开发一个仅支持纵向方向且不支持旋转的移动应用程序，则上述代码应该可以正常工作而不会出现任何问题。

但是，在Flutter Web支持或仅支持旋转的移动应用程序的情况下，上述方法可能无法在用户旋转设备时产生预期结果。

在这种情况下，对于Flutter Web，根据屏幕宽度进行引用是有意义的，因为Web可访问横向显示器。但是，在支持旋转的情况下，您可以选择在所有方向上坚持使用宽度作为参考，或者根据方向更新参考。

- Harshvardhan Joshi

---

为什么height比width更好的参考？ - Amani

据我所知，字母表中的每个字母都是由一个块绘制而成的，这个块可以是正方形或竖长方形。因此，增加/减小字体大小对字母的高度影响更大，而不是宽度。然而，这就是我为什么认为高度是更好的参考的原因。我可能是错的，但这种方法从来没有让我失望。 - Harshvardhan Joshi

使用'Theme.of(context).textTheme.title'作为样式会更好吧？ - abrsh

@abrsh 如果我们访问Theme.of(context).textTheme.title的text style的text size，也可以起作用，我们可以根据需要进一步自定义。但是，我们需要记住，这种方法取决于Flutter框架中的默认样式，这些样式可能会在未来发生更改、弃用或删除。 - Harshvardhan Joshi

Answer 2

不是直接的答案，但对我来说解决方案不同。这取决于你想要实现什么。对我来说，auto_size_text小部件解决了大部分问题，因为行和其他小部件定义了基本大小。

AutoSizeText(
 'Text will be resized',
  style: TextStyle(fontSize: 20), //just info size
  maxLines: 2, //if needed
)

- MatejC

Answer 3

我偶然使用了RichText小部件，解决了这个问题。 你可以创建一个组件并传递文本和样式数据，它将返回一个RichText小部件。它会自动调整所有屏幕尺寸的字体大小，并在不同的屏幕上看起来相同。

ResponsiveText.dart

import 'package:flutter/material.dart';

class ResponsiveText extends StatelessWidget {
  ResponsiveText({
    this.text = 'text',
    this.textAlign = TextAlign.left,
    this.style = const TextStyle(fontSize: 14),
    Key? key
  }) : super(key: key);

  String text;
  TextStyle style;
  TextAlign textAlign;

  @override
  Widget build(BuildContext context) {
    return RichText(
      textAlign: textAlign,
      text: TextSpan(
        text: text,
        style: style,
      ),
    );
  }
}

使用此组件

ResponsiveText(
              text: 'You have pushed the button this many times:',
              style: const TextStyle(fontSize: 16, color: Colors.blue),
            ),

- Mukesh Bheel

Answer 4

这应该是目前为止最好的答案：

    final textScale=MediaQuery.of(context).size.height * 0.01;
    final screenHeight=MediaQuery.of(context).size.height;

    double getHeight(double sysVar,double size){
    double calc=size/1000;
    return sysVar *calc;
    }

    double getTextSize(double sysVar,double size){
    double calc=size/10;
    return sysVar *calc;
    }
    
    Text('lovely family',style: TextStyle(fontSize: getTextSize(textScale, 
    20),),
    SizedBox(height: getHeight(screenHeight, 30),),)

- zuri