文本不随系统设置而改变大小[三]
- 前言
- 方案十三：使用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 {
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
Widget 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 {
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
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, // 根据textScaleFactor调整文本大小
),
),
),
);
}
}
在这个例子中，我们直接使用MediaQuery获取了textScaleFactor，并将其应用于文本样式中。这样，文本将动态调整大小，以确保不受系统字体大小变化的影响。
这些方案提供了多样的选择，你可以根据应用的具体需求选择最合适的方式，或者根据情况结合使用不同的方案。希望这些方案对你有帮助，如果有其他问题或需要更多帮助，请随时提问。
方案十五：使用FractionallySizedBox
FractionallySizedBox可以根据父容器的百分比来设置子部件的大小。通过结合使用FractionallySizedBox和Text，你可以根据需要设置文本的大小，并确保不受系统字体大小的影响。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
Widget 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 {
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
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',
style: TextStyle(
fontSize: 16.0, // 设置一个基础的字体大小
),
),
),
);
}
}
在这个例子中，直接在TextStyle中设置了字体大小，确保文本的大小不受系统字体大小变化的影响。
方案十七：使用自定义绘制（CustomPainter）
通过自定义绘制文本，你可以完全控制文本的大小，而不受系统字体大小变化的影响。这可以通过使用CustomPainter实现。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Non-Scaling Text'),
),
body: Center(
child: CustomPaint(
painter: NonScalingTextPainter(),
),
),
);
}
}
class NonScalingTextPainter extends CustomPainter {
void 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));
}
bool 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 {
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
Widget 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调整文本大小
),
),
),
),
);
}
}
在这个例子中，我们使用RichText和TextSpan来创建文本，并根据MediaQuery获取的文本比例因子手动调整文本的大小，以确保文本不受系统字体大小变化的影响。
总结
这些方案提供了多样的选择，可以根据应用的具体需求选择最合适的方式，或者根据情况结合使用不同的方案。希望这些方案对你有帮助，如果有其他问题或需要更多帮助，请随时提问。
