flutter - 是否建议根据显示大小设置字体大小？

Question

为了响应式设计，字体大小应该是一个固定的数字还是取决于屏幕大小的变量？

我问这个问题是因为 Flutter 在分配 FontSize 时使用“逻辑像素”，我不确定它们在不同屏幕尺寸上的表现如何。

当显示器尺寸从 4"变为 6.8"，甚至 10"平板电脑时，是这样的:

fontSize: min(MediaQuery.of(context).size.height,MediaQuery.of(context).size.width) /4

比直接硬编码更好 fontSize: 40?

我想这个问题更具体地是关于放置在其他容器/列/堆栈中的文本，如果它们以非预期的方式显示，可能会干扰其他设计元素。

如果容器宽度/高度取决于屏幕尺寸，行为会怎样

Container(
  width: MediaQuery.of(context).size.width / 2,
  height: MediaQuery.of(context).size.height / 3,
  child: Text('This is a sample text')
)

与容器具有固定大小相比

Container(
  width: 400,
  height: 500,
  child: Text('This is a sample text')
)

这些情况下的最佳做法是什么？

Answer 1

这是非常有情境的。

在某些情况下，您的字体大小应根据设计原则固定。除非可能溢出，否则没有问题。

如果可能出现溢出，您有两个选择:

1 - 如果您想要固定字体大小，请使用 https://api.flutter.dev/flutter/rendering/TextOverflow-class.html

当发生溢出时，您可以根据需要裁剪文本。

2 - 在响应式设计的情况下，有多种做法，但您的示例在响应性方面并不健康。由于设备有多种纵横比可用，因此您无法估计您的设计的外观。我建议您主要依赖设备 width 而不是 height。

我常用的一种方法是使用 FittedBox。

https://api.flutter.dev/flutter/widgets/FittedBox-class.html

FittedBox(
  fit: BoxFit.fitWidth,
  child: Text(someText)....

它会根据您的适合类型自动包装可用空间。

另一种解决方案是，您可以为特定大小范围创建 if 条件，而不是进行算术计算。

if(width < 400) fontsize = 14;
else if(width < 500) fontsize = 16;
...

最后，对于这类问题，有一个非常有用的包，看看吧: https://pub.dev/packages/auto_size_text