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

---

前言

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

---

方案七：使用LayoutBuilder和MediaQuery

结合使用LayoutBuilder和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) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Non-Scaling Text'),
      ),
      body: Center(
        child: LayoutBuilder(
          builder: (context, constraints) {
            double screenWidth = constraints.maxWidth;
            double textScaleFactor = MediaQuery.of(context).textScaleFactor;

            // 根据实际需求计算适当的字体大小
            double fontSize = screenWidth / 20; // 20是一个调整因子，根据需要调整

            return Text(
              'This text will not scale with system font size',
              style: TextStyle(
                fontSize: fontSize,
              ),
            );
          },
        ),
      ),
    );
  }
}

在这个方案中，通过LayoutBuilder获取父容器的宽度，然后根据实际需求计算适当的字体大小。这样，无论系统字体大小如何变化，都可以动态地调整文本大小以适应屏幕。

方案八：使用AutoSizeText库

AutoSizeText是一个Flutter库，可以根据可用空间自动调整文本大小。通过使用这个库，可以简化动态文本大小调整的过程。

首先，在pubspec.yaml文件中添加auto_size_text库的依赖：

dependencies:
  auto_size_text: ^3.0.0

然后运行flutter pub get安装依赖包。

使用AutoSizeText：

import 'package:flutter/material.dart';
import 'package:auto_size_text/auto_size_text.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: AutoSizeText(
          'This text will not scale with system font size',
          style: TextStyle(fontSize: 16.0), // 设置一个基础的字体大小
          minFontSize: 12.0, // 最小字体大小
          maxFontSize: 20.0, // 最大字体大小
          stepGranularity: 1.0, // 字体调整步长
          group: AutoSizeGroup(),
       

在上述代码中，我们使用了AutoSizeText小部件，并设置了一些属性，包括minFontSize、maxFontSize和stepGranularity。这些属性允许你定义文本的最小和最大字体大小，以及字体调整的步长。

AutoSizeText会根据可用空间自动调整文本大小，确保文本不受系统字体大小变化的影响。你可以根据需要调整这些属性的值以满足特定的设计要求。

方案九：使用RichText和TextSpan

通过使用RichText和TextSpan，你可以将文本分为多个部分，并对每个部分应用不同的样式。这样，你可以在其中一部分设置一个固定的字体大小，使其不受系统字体大小变化的影响。

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: RichText(
          text: TextSpan(
            text: 'This text ',
            style: TextStyle(
              fontSize: 16.0, // 设置一个基础的字体大小
            ),
            children: <TextSpan>[
              TextSpan(
                text: 'will not',
                style: TextStyle(
                  fontSize: 20.0, // 设置不受系统字体大小变化的特定部分的字体大小
                  fontWeight: FontWeight.bold,
                ),
              ),
              TextSpan(
                text: ' scale with system font size',
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这个例子中，我们使用了RichText和TextSpan，将文本分为三个部分，并在第二个部分中设置了一个不受系统字体大小变化的特定字体大小。

这些方案提供了多种选择，可以根据具体的应用场景和需求选择合适的方式。希望这些方案能够满足你的需求，如果有其他问题或需要更多帮助，请随时提问。

方案十：使用LayoutBuilder和CustomPainter

通过使用LayoutBuilder和CustomPainter，你可以手动绘制文本，并控制文本的大小，使其不受系统字体大小变化的影响。

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 CustomPaint(
              painter: NonScalingTextPainter(
                text: 'This text will not scale with system font size',
                baseFontSize: 16.0, // 设置一个基础的字体大小
              ),
            );
          },
        ),
      ),
    );
  }
}

class NonScalingTextPainter extends CustomPainter {
  final String text;
  final double baseFontSize;

  NonScalingTextPainter({required this.text, required this.baseFontSize});

  @override
  void paint(Canvas canvas, Size size) {
    final textStyle = TextStyle(
      fontSize: baseFontSize,
    );

    final textSpan = TextSpan(
      text: text,
      style: textStyle,
    );

    final textPainter = TextPainter(
      text: textSpan,
      textDirection: TextDirection.ltr,
    );

    textPainter.layout(minWidth: 0, maxWidth: size.width);

    textPainter.paint(canvas, Offset(0, (size.height - textPainter.height) / 2));
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

在这个例子中，我们创建了一个NonScalingTextPainter类，实现了CustomPainter接口。在paint方法中，我们手动创建了TextPainter，并使用TextSpan和TextStyle定义文本样式。通过手动控制文本的大小和位置，我们确保了文本不受系统字体大小变化的影响。

方案十一：使用自定义字体缩放比例

通过使用自定义的字体缩放比例，你可以在应用的全局范围内设置字体大小，而不受系统字体大小变化的影响。这可以通过设置TextTheme的bodyText2的fontSizeFactor属性来实现。

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(
            fontSizeFactor: 1.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样式中设置了fontSizeFactor属性，将其固定为1.0。这样，无论系统字体大小如何变化，应用中的文本都将保持相同的大小。

方案十二：使用第三方库auto_size_text

auto_size_text是一个方便的第三方库，可以根据可用空间动态调整文本大小。

首先，在pubspec.yaml文件中添加auto_size_text库的依赖：

dependencies:
  auto_size_text: ^3.0.0

然后运行flutter pub get安装依赖包。

使用AutoSizeText：

import 'package:flutter/material.dart';
import 'package:auto_size_text/auto_size_text.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: AutoSizeText(
          'This text will not scale with system font size',
          style: TextStyle(fontSize: 16.0), // 设置一个基础的字体大小
          minFontSize: 12.0, // 最小字体大小
          maxFontSize: 20.0, // 最大字体大小
          stepGranularity: 1.0, // 字体调整步长
          group: AutoSizeGroup(),
        ),
      ),
    );
  }
}

auto_size_text库允许你方便地根据可用空间自动调整文本大小，以确保文本不受系统字体大小变化的影响。

---

总结

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