在Flutter中,如何根据设备屏幕大小调整应用中的文本大小?该应用程序用于阅读文本,我需要用户看到更大的文本,因为他们的设备尺寸的增加,也设置了最大可能的大小。我知道的一个方法就是这样做;
Text( 'Some text here', style: TextStyle( fontSize: 20 * MediaQuery.of(context).size.width * some_ratio ), )
有没有其他的方法来实现这一点,也将考虑显示高度?
fquxozlt1#
对于基于屏幕的字体大小,我建议使用Height作为参考。例如:
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概念。
dp
sp
更新:
经过一些额外的经验,我已经意识到,选择Height作为参考只适用于移动的设备,特别是在纵向模式/方向。简单来说,当设备的主滚动轴在设备的纵向模式下是垂直的。因此,我建议根据应用程序的需要选择/更改引用。也就是说,如果你正在开发一个应用程序,它肯定是一个只支持纵向和不支持旋转的移动的应用程序,那么上面的代码应该可以正常工作,没有任何问题。然而,在移动的应用中的摆动网支持或仅旋转支持的情况下,当用户旋转设备时,上述方法可能不会给予期望的结果。在这种情况下,由于水平显示器可以访问web,因此参考屏幕宽度对于 Flutter web是有意义的。但是在旋转支持的情况下,您可以选择在所有方向上坚持使用宽度作为参考,或者基于方向更新参考。
3hvapo4f2#
我偶然使用了RichText小部件,找到了解决这个问题的方法。你可以创建一个组件并传递文本和样式等数据,然后它将返回一个RichText小部件。它可以自动调整所有屏幕尺寸的字体大小,并在不同的屏幕上看起来相同。
响应文本.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), ),
siotufzp3#
这应该是目前为止最好的答案:
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),),)
n3h0vuf24#
这不是一个直接的答案,但对我来说,解决方案是不同的。这取决于你想要实现什么。对我来说,auto_size_text小部件解决了大部分问题,因为row和其他小部件定义了基本大小。
AutoSizeText( 'Text will be resized', style: TextStyle(fontSize: 20), //just info size maxLines: 2, //if needed )
4条答案
按热度按时间fquxozlt1#
对于基于屏幕的字体大小,我建议使用
Height
作为参考。例如:
通过这种方法,您将获得像素完美的文本大小,并具有您选择的乘数值的额外优势。
这类似于Android中的
dp
或sp
概念。更新:
经过一些额外的经验,我已经意识到,选择
Height
作为参考只适用于移动的设备,特别是在纵向模式/方向。简单来说,当设备的主滚动轴在设备的纵向模式下是垂直的。
因此,我建议根据应用程序的需要选择/更改引用。
也就是说,如果你正在开发一个应用程序,它肯定是一个只支持纵向和不支持旋转的移动的应用程序,那么上面的代码应该可以正常工作,没有任何问题。
然而,在移动的应用中的摆动网支持或仅旋转支持的情况下,当用户旋转设备时,上述方法可能不会给予期望的结果。
在这种情况下,由于水平显示器可以访问web,因此参考屏幕宽度对于 Flutter web是有意义的。但是在旋转支持的情况下,您可以选择在所有方向上坚持使用宽度作为参考,或者基于方向更新参考。
3hvapo4f2#
我偶然使用了RichText小部件,找到了解决这个问题的方法。你可以创建一个组件并传递文本和样式等数据,然后它将返回一个RichText小部件。它可以自动调整所有屏幕尺寸的字体大小,并在不同的屏幕上看起来相同。
响应文本.dart
使用此组件
siotufzp3#
这应该是目前为止最好的答案:
n3h0vuf24#
这不是一个直接的答案,但对我来说,解决方案是不同的。这取决于你想要实现什么。对我来说,auto_size_text小部件解决了大部分问题,因为row和其他小部件定义了基本大小。