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

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

前言
- - 方案十三：使用Flexible
  - 方案十四：使用MediaQueryData的textScaleFactor属性
  - 方案十五：使用FractionallySizedBox
  - 方案十六：使用自定义文本样式
  - 方案十七：使用自定义绘制（CustomPainter）
  - 方案十八：使用RichText和TextSpan结合MediaQuery
总结

前言

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

方案十三：使用Flexible

通过使用Flexible小部件，你可以将文本放置在Flexible容器中，以确保文本不随系统字体大小变化而缩放。

import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: MyHomePage(),);}
}class MyHomePage extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Non-Scaling Text'),),body: Center(child: Row(mainAxisAlignment: MainAxisAlignment.center,children: [Flexible(child: Text('This text will not scale with system font size',style: TextStyle(fontSize: 16.0, // 设置一个基础的字体大小),),),],),),);}
}

在这个例子中，我们将文本包装在Flexible小部件中，这样它就可以根据屏幕大小自动调整大小。通过这种方式，文本不会随系统字体大小变化而缩放。

方案十四：使用MediaQueryData的textScaleFactor属性

通过直接使用MediaQueryData的textScaleFactor属性，你可以动态调整文本的大小，以确保其不受系统字体大小变化的影响。

import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: MyHomePage(),);}
}class MyHomePage extends StatelessWidget {@overrideWidget 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, // 根据textScaleFactor调整文本大小),),),);}
}

在这个例子中，我们直接使用MediaQuery获取了textScaleFactor，并将其应用于文本样式中。这样，文本将动态调整大小，以确保不受系统字体大小变化的影响。

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

方案十五：使用FractionallySizedBox

FractionallySizedBox可以根据父容器的百分比来设置子部件的大小。通过结合使用FractionallySizedBox和Text，你可以根据需要设置文本的大小，并确保不受系统字体大小的影响。

import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: MyHomePage(),);}
}class MyHomePage extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Non-Scaling Text'),),body: Center(child: FractionallySizedBox(widthFactor: 0.8, // 根据需要调整百分比child: Text('This text will not scale with system font size',style: TextStyle(fontSize: 16.0, // 设置一个基础的字体大小),),),),);}
}

在这个例子中，FractionallySizedBox的widthFactor属性设置为0.8，你可以根据需要调整这个百分比。这样，文本的大小将相对于父容器的大小，而不受系统字体大小的影响。

方案十六：使用自定义文本样式

通过自定义文本样式，你可以直接设置字体大小，确保文本不受系统字体大小的影响。

import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: MyHomePage(),);}
}class MyHomePage extends StatelessWidget {@overrideWidget 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',style: TextStyle(fontSize: 16.0, // 设置一个基础的字体大小),),),);}
}

在这个例子中，直接在TextStyle中设置了字体大小，确保文本的大小不受系统字体大小变化的影响。

方案十七：使用自定义绘制（CustomPainter）

通过自定义绘制文本，你可以完全控制文本的大小，而不受系统字体大小变化的影响。这可以通过使用CustomPainter实现。

import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: MyHomePage(),);}
}class MyHomePage extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Non-Scaling Text'),),body: Center(child: CustomPaint(painter: NonScalingTextPainter(),),),);}
}class NonScalingTextPainter extends CustomPainter {@overridevoid paint(Canvas canvas, Size size) {final text = 'This text will not scale with system font size';final textStyle = TextStyle(fontSize: 16.0, // 设置一个基础的字体大小);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));}@overridebool shouldRepaint(CustomPainter oldDelegate) {return false;}
}

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

方案十八：使用RichText和TextSpan结合MediaQuery

结合使用RichText和TextSpan，并使用MediaQuery来获取文本比例因子，可以根据需求手动调整文本的大小。

import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: MyHomePage(),);}
}class MyHomePage extends StatelessWidget {@overrideWidget build(BuildContext context) {double textScaleFactor = MediaQuery.of(context).textScaleFactor;return Scaffold(appBar: AppBar(title: Text('Non-Scaling Text'),),body: Center(child: RichText(text: TextSpan(text: 'This text will not scale with system font size',style: TextStyle(fontSize: 16.0 / textScaleFactor, // 根据textScaleFactor调整文本大小),),),),);}
}