flutter 文本不随系统设置而改变大小[最全的整理]

---

前言

在flutter 越来越来的平台适配中，最常见的一直场景就是，修改了设备的字体大小或者样式，从而导致整个APP 的适配变形等情况的出现，对于这种问题的解决方案，当然就是限制字体了，但是如果一概而论的话，又不太适合，毕竟产品可不管你方不方便的，这里我整理了绝大部分的场景使用方案

---

方案一：使用MediaQuery

使用MediaQuery获取设备的文本比例因子，并将其应用到文本样式中。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    double textScaleFactor = MediaQuery.of(context).textScaleFactor;

    return Scaffold(
      appBar: AppBar(
        title: Text('Non-Scaling Text'),
      ),
      body: Center(
        child: Text(
          'This text will not scale with system font size',
          style: TextStyle(
            fontSize: 16.0, // 设置一个基础的字体大小
            textScaleFactor: 1.0 / textScaleFactor,
          ),
        ),
      ),
    );
  }
}

方案二：自定义Text Widget

创建一个自定义的NonScalingText小部件，该小部件在内部处理文本比例因子的调整。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Non-Scaling Text'),
      ),
      body: Center(
        child: NonScalingText(
          'This text will not scale with system font size',
        ),
      ),
    );
  }
}

class NonScalingText extends StatelessWidget {
  final String text;

  NonScalingText(this.text);

  @override
  Widget build(BuildContext context) {
    double textScaleFactor = MediaQuery.of(context).textScaleFactor;
    double adjustedTextScaleFactor = 1.0 / textScaleFactor;

    return Text(
      text,
      style: TextStyle(
        fontSize: 16.0, // 设置一个基础的字体大小
        textScaleFactor: adjustedTextScaleFactor,
      ),
    );
  }
}

这两种方案都是基于设置textScaleFactor属性，确保文本不受系统字体大小变化的影响。你可以根据自己的需求选择其中一种或结合使用。请注意，你可能需要根据应用的具体情况进行调整，以满足特定的设计和用户体验要求。

方案三：使用FittedBox

使用FittedBox小部件包装Text，以保持文本的缩放不受系统字体大小的影响。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Non-Scaling Text'),
      ),
      body: Center(
        child: FittedBox(
          fit: BoxFit.scaleDown,
          child: Text(
            'This text will not scale with system font size',
            style: TextStyle(
              fontSize: 16.0, // 设置一个基础的字体大小
            ),
          ),
        ),
      ),
    );
  }
}

FittedBox小部件通过BoxFit.scaleDown属性，确保文本在需要时进行缩小，以适应其父容器，但不会随着系统字体大小的变化而缩放。

方案四：使用LayoutBuilder

使用LayoutBuilder获取父容器的宽度和高度，并根据这些信息自定义文本样式。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Non-Scaling Text'),
      ),
      body: Center(
        child: LayoutBuilder(
          builder: (context, constraints) {
            return Text(
              'This text will not scale with system font size',
              style: TextStyle(
                fontSize: 16.0, // 设置一个基础的字体大小
                textScaleFactor: 1.0, // 确保文本不受系统字体大小变化的影响
              ),
            );
          },
        ),
      ),
    );
  }
}

LayoutBuilder允许你获取父容器的约束信息，你可以根据这些信息自定义文本样式，确保文本不受系统字体大小变化的影响。

方案五：使用自定义主题

在Flutter中，可以通过自定义主题来全局设置应用的文本样式。通过在MaterialApp中设置theme属性，你可以定义全局文本样式，包括字体大小，从而避免受到系统字体大小变化的影响。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        textTheme: TextTheme(
          bodyText2: TextStyle(
            fontSize: 16.0, // 设置一个基础的字体大小
          ),
        ),
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Non-Scaling Text'),
      ),
      body: Center(
        child: Text(
          'This text will not scale with system font size',
        ),
      ),
    );
  }
}

通过设置TextTheme中的bodyText2样式，你可以定义应用中主要文本的默认样式。这样，即使系统字体大小发生变化，主要文本的字体大小也会保持不变。

方案六：使用自定义字体

在某些情况下，你可能希望使用自定义字体，以确保应用中的文本不受系统字体大小变化的影响。首先，将自定义字体文件添加到Flutter项目中，然后在pubspec.yaml中进行配置。之后，通过TextStyle使用自定义字体。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        textTheme: TextTheme(
          bodyText2: TextStyle(
            fontFamily: 'CustomFont', // 自定义字体的名称
            fontSize: 16.0, // 设置一个基础的字体大小
          ),
        ),
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Non-Scaling Text'),
      ),
      body: Center(
        child: Text(
          'This text will not scale with system font size',
        ),
      ),
    );
  }
}

确保在pubspec.yaml中添加字体的配置：

flutter:
  fonts:
    - family: CustomFont
      fonts:
        - asset: fonts/CustomFont.ttf

以上是六种不同的方案，你可以根据应用的具体需求选择其中之一或结合使用。每种方案都有其优势和适用场景，根据你的情况选择最合适的方法。如果有任何进一步的问题或需要更多细节，请随时提问。

---

总结

这些方案提供了多样的选择，可以根据应用的具体需求选择最合适的方式，或者根据情况结合使用不同的方案。希望这些方案对你有帮助，如果有其他问题或需要更多帮助，请随时提问。