flutterダイナミックフォントサイズのキャンセル

2189 ワード

原生開発に触れた方ならご存知かもしれませんが
最初の数年間は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もコードを表示することができて、梯子を自分で用意する必要があります
後記
ダイナミックフォントのことはこうです