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

文本不随系统设置而改变大小[一]

• 前言
• • • 方案一：使用MediaQuery
    • 方案二：自定义Text Widget
    • 方案三：使用FittedBox
    • 方案四：使用LayoutBuilder
    • 方案五：使用自定义主题
    • 方案六：使用自定义字体
    • ���结

      ---

      前言

      在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

      ---

      总结

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