flutterダイナミックフォントサイズのキャンセル
2189 ワード
原生開発に触れた方ならご存知かもしれませんが
最初の数年間はspをフォントサイズの単位として公式に推奨していたが、実際に長い間実践されてきた状況で、みんなdpを単位として徐々に使用し始めた.
これにより,ユーザがシステムフォントサイズを調整すると,app中の文字サイズに影響を及ぼさず,エラーなどが発生する.
flutterでの変更
iOSでは動的フォントサイズと呼ばれ、補助機能のフォントサイズに対応しています
androidでフォントサイズと呼ぶ
開発が完了すると、ユーザーがシステムのフォントサイズを変更して位置を間違えたり、ボタンが押し出されて画面が見えなくなったりするのが問題です.
flutterには単位の概念がありませんが、私たちはどのようにこの機能を実現すればいいのでしょうか.
flutterでは、MediaQueryが対応機能を実現しています
ここはあなたのScaffold、Textなどのwidgetです.
しかし、このように修正しなければならないところが多すぎて、後ろは直しにくいです.
MaterialAppのbuilderプロパティを使用するには、小さなテクニックを使用します.
私はgithubでgist
後記
ダイナミックフォントのことはこうです
最初の数年間はspをフォントサイズの単位として公式に推奨していたが、実際に長い間実践されてきた状況で、みんなdpを単位として徐々に使用し始めた.
これにより,ユーザがシステムフォントサイズを調整すると,app中の文字サイズに影響を及ぼさず,エラーなどが発生する.
flutterでの変更
iOSでは動的フォントサイズと呼ばれ、補助機能のフォントサイズに対応しています
androidでフォントサイズと呼ぶ
開発が完了すると、ユーザーがシステムのフォントサイズを変更して位置を間違えたり、ボタンが押し出されて画面が見えなくなったりするのが問題です.
flutterには単位の概念がありませんが、私たちはどのようにこの機能を実現すればいいのでしょうか.
flutterでは、MediaQueryが対応機能を実現しています
var data = MediaQuery.of(context);
data.textScaleFactor; // , 『 』
修正はもちろん不可能です.これはfinalです.私たちがしなければならないのはflutterの一般的なやり方です.class NoScaleTextWidget extends StatelessWidget {
final Widget child;
const NoScaleTextWidget({
Key key,
@required this.child,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaxScaleTextWidget(
max: 1.0,
child: child,
);
}
}
class MaxScaleTextWidget extends StatelessWidget {
final double max;
final Widget child;
const MaxScaleTextWidget({
Key key,
this.max = 1.2,
@required this.child,
}) : super(key: key);
@override
Widget build(BuildContext context) {
var data = MediaQuery.of(context);
var scale = math.min(max, data.textScaleFactor);
return MediaQuery(
data: data.copyWith(textScaleFactor: scale),
child: child,
);
}
}
私のここのやり方はこのようにして、1つのコンポーネントを作成して、内部でこの値を修正して、それからあなたのコントロールを『パッケージ』にしますここはあなたのScaffold、Textなどのwidgetです.
しかし、このように修正しなければならないところが多すぎて、後ろは直しにくいです.
MaterialAppのbuilderプロパティを使用するには、小さなテクニックを使用します.
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State {
@override
Widget build(BuildContext context) {
return MaterialApp(
....
builder: (ctx, w) {
return MaxScaleTextWidget(
max: 1.0,
child: w,
);
},
);
}
}
このbuilderにこのように書くと、appのすべてのコントロールを動的フォントサイズの影響を受けないように変更できます.私はgithubでgist
https://gist.github.com/CaiJingLong/d28208f569b44f39dd572a7e8f455912
もコードを表示することができて、梯子を自分で用意する必要があります後記
ダイナミックフォントのことはこうです