dart Flutter:如何根据设备的屏幕大小调整文本大小

pbpqsu0x  于 2023-05-26  发布在  Flutter
关注(0)|答案(4)|浏览(469)

在Flutter中,如何根据设备屏幕大小调整应用中的文本大小?该应用程序用于阅读文本,我需要用户看到更大的文本,因为他们的设备尺寸的增加,也设置了最大可能的大小。我知道的一个方法就是这样做;

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

有没有其他的方法来实现这一点,也将考虑显示高度?

fquxozlt

fquxozlt1#

对于基于屏幕的字体大小,我建议使用Height作为参考。
例如:

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

通过这种方法,您将获得像素完美的文本大小,并具有您选择的乘数值的额外优势。
这类似于Android中的dpsp概念。

更新

经过一些额外的经验,我已经意识到,选择Height作为参考只适用于移动的设备,特别是在纵向模式/方向。
简单来说,当设备的主滚动轴在设备的纵向模式下是垂直的。
因此,我建议根据应用程序的需要选择/更改引用。
也就是说,如果你正在开发一个应用程序,它肯定是一个只支持纵向和不支持旋转的移动的应用程序,那么上面的代码应该可以正常工作,没有任何问题。
然而,在移动的应用中的摆动网支持或仅旋转支持的情况下,当用户旋转设备时,上述方法可能不会给予期望的结果。
在这种情况下,由于水平显示器可以访问web,因此参考屏幕宽度对于 Flutter web是有意义的。但是在旋转支持的情况下,您可以选择在所有方向上坚持使用宽度作为参考,或者基于方向更新参考。

3hvapo4f

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),
            ),
siotufzp

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),),)
n3h0vuf2

n3h0vuf24#

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

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

相关问题