时间戳

首页 > 解决方案 > 是否建议根据显示大小设置字体大小？

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

问题描述

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

我特别问这个问题，因为 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')
)

vs 如果容器有固定大小

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

在这些情况下，最佳实践是什么？

标签： flutter

解决方案

这是非常有情境的。

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

如果可能存在溢出，您有两种选择：

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

推荐阅读