文本不随系统设置而改变大小[三]
- 前言
- 方案十三:使用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
获取的文本比例因子手动调整文本的大小,以确保文本不受系统字体大小变化的影响。
总结
这些方案提供了多样的选择,可以根据应用的具体需求选择最合适的方式,或者根据情况结合使用不同的方案。希望这些方案对你有帮助,如果有其他问题或需要更多帮助,请随时提问。