Flutter中如何避免设备显示大小与字体设置影响应用字体大小

要同时解决设备显示大小调整、系统粗体设置导致的字体过度放大问题，可从以下几个方面处理：

1. 保持字体缩放比例固定（已实现） #

继续保留当前设置的textScaleFactor: 1.0，抵消系统字体缩放的影响。

2. 抵消设备显示大小调整的影响 #

设备显示大小调整会改变逻辑像素与物理像素的比例（devicePixelRatio），导致字体物理尺寸变大。可通过固定应用的逻辑像素密度解决：

• 获取设备物理宽度，设定一个固定的逻辑宽度（比如360dp，可按需调整），计算出固定的devicePixelRatio，强制应用使用该值。

3. 禁用系统粗体文本影响 #

通过MediaQuery禁用粗体标记，或在主题中强制设置默认字体权重为普通，避免文本因系统粗体设置而视觉上“放大”。

完整代码示例 #

import 'dart:ui';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    // 获取设备物理宽度
    final physicalWidth = window.physicalSize.width;
    // 固定逻辑宽度为360dp，可根据需求调整（比如414适配iPhone大屏）
    const fixedLogicalWidth = 360.0;
    // 计算固定的devicePixelRatio，抵消显示大小调整的影响
    final fixedDevicePixelRatio = physicalWidth / fixedLogicalWidth;

    return MaterialApp(
      builder: (context, child) {
        final originalMediaQuery = MediaQuery.of(context);
        return MediaQuery(
          data: originalMediaQuery.copyWith(
            // 固定字体缩放比例，不受系统字体大小设置影响
            textScaleFactor: 1.0,
            // 禁用系统粗体文本设置，避免文本变粗
            boldText: false,
            // 使用固定的devicePixelRatio，确保显示大小调整时字体物理尺寸不变
            devicePixelRatio: fixedDevicePixelRatio,
          ),
          child: child!,
        );
      },
      // 可选：在主题中强制设置默认字体权重，双重保障
      theme: ThemeData(
        textTheme: const TextTheme(
          bodyLarge: TextStyle(fontWeight: FontWeight.normal),
          bodyMedium: TextStyle(fontWeight: FontWeight.normal),
          titleLarge: TextStyle(fontWeight: FontWeight.normal),
          // 覆盖你使用到的所有文本样式
        ),
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("固定字体大小演示")),
      body: const Center(
        child: Text(
          "测试文本：无论系统字体大小、显示大小、粗体设置如何调整，我都保持固定大小",
          textAlign: TextAlign.center,
        ),
      ),
    );
  }
}

替代方案（灵活控制单文本） #

如果不想固定整个布局的逻辑尺寸，也可以单独给每个Text组件计算固定物理大小的字体：

double getFixedFontSize(double physicalSize) {
  return physicalSize / window.devicePixelRatio;
}

// 使用示例
Text("测试文本", style: TextStyle(fontSize: getFixedFontSize(16)));

这种方式无需修改全局布局，但需要逐一调整所有文本组件的样式。

内容的提问来源于stack exchange，提问作者ramedju