时间戳

首页 > 解决方案 > 重新缩放浏览器时更改 Web 上的字体大小

flutter - 重新缩放浏览器时更改 Web 上的字体大小

问题描述

我正在尝试更改 Flutter 网页上的文本大小。通过谷歌搜索，我找到了这个解决方案：

  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (context, child) {
        final MediaQueryData data = MediaQuery.of(context);
        print('----> ${data.textScaleFactor}');
        return MediaQuery(
          data: data.copyWith(
              textScaleFactor:
                  data.textScaleFactor > 2.0 ? 2.0 : data.textScaleFactor),
          child: child!,
        );
      },

print('----> ${data.textScaleFactor}');但是，当我更改 chrome 宽度大小并始终返回 1时，字体大小不会更改。

为什么？

标签： flutterflutter-web

解决方案

根据屏幕使用大小可变的容器，并使用 FittedBox 包装子 Text。

Container(
          height: height * 0.15,
          constraints: BoxConstraints(maxWidth: width * 0.9),
          padding: EdgeInsets.all(5),
          child: FittedBox(
            fit: BoxFit.fitWidth,
            child: Text(
              'Text you want to display',
              style: TextStyle(
                fontFamily: 'Calibri',
                color: Colors.white,
                fontWeight: FontWeight.bold,
                fontSize: 20,
              ),
            ),
          ),
        ),

推荐阅读