クリップの動作

コンテンツ

まとめ

Flutter のデフォルトは次のとおりですいいえいくつかの特殊なウィジェットを除いてクリップします（そのようなClipRect）。クリップなしのデフォルトをオーバーライドするには、明示的に設定clipBehaviorウィジェットの構造で。

コンテクスト

以前はクリップのせいで flutterが遅かったです。例えば、 Flutter ギャラリーアプリのベンチマークは平均フレームでした 2018年5月のラスタライズ時間は約35ミリ秒、ここで、スムーズな 60fps レンダリングの予算は 16 ミリ秒です。不要なクリップとそれに関連する操作を削除することで、 35 ミリ秒/フレームから 17.5 ミリ秒/フレームへ、ほぼ 2 倍の速度向上が見られました。

当時のクリッピングに関連する最大のコストは、Flutter を追加するために使用されますsaveLayer各クリップの後に呼び出します (単純な場合を除く) 軸に合わせた長方形クリップ) を使用して、ブリーディングエッジアーティファクトを回避します。で説明されているように問題 18057。そのような行動は普遍的でしたのようなウィジェットを介したマテリアルアプリCard、Chip、Button、等々、その結果、PhysicalShapeとPhysicalModelコンテンツをクリッピングします。

あsaveLayer古いデバイスでは特に通話料金が高くなります。オフスクリーンレンダーターゲットとレンダーターゲットスイッチを作成します。場合によっては約 1 ミリ秒かかることがあります。

なくてもsaveLayer電話してください、クリップはまだ高価です復元されるまで、それ以降のすべての描画に適用されるためです。したがって、単一のクリップによってパフォーマンスが低下する可能性があります。何百もの描画操作。

パフォーマンスの問題に加えて、Flutter は次のような問題も抱えていました。クリップが管理および実装されていないため、正確性の問題がいくつか発生しました一か所で。いくつかの場所で、saveLayer挿入されました間違った場所にあったため、パフォーマンスが向上しただけです最先端のアーティファクトを修正することなく、コストを削減します。

そこで、統一したのが、clipBehavior制御とその実装この画期的な変更。デフォルトclipBehaviorはClip.none以下を除くほとんどのウィジェットでパフォーマンスを節約します。

ClipPathデフォルトはClip.antiAlias
ClipRRectデフォルトはClip.antiAlias
ClipRectデフォルトはClip.hardEdge
StackデフォルトはClip.hardEdge
EditableTextデフォルトはClip.hardEdge
ListWheelScrollViewデフォルトはClip.hardEdge
SingleChildScrollViewデフォルトはClip.hardEdge
NestedScrollViewデフォルトはClip.hardEdge
ShrinkWrappingViewportデフォルトはClip.hardEdge

移行ガイド

コードを移行するには 4 つの選択肢があります。

コンテンツが必要ない場合は、コードをそのままにしておきますクリップされる (たとえば、ウィジェットの子はどれもクリップされない) 親の境界の外に拡張します）。これはアプリの動作にプラスの影響を与える可能性があります。全体的なパフォーマンス。
追加clipBehavior: Clip.hardEdgeクリッピングが必要な場合は、アンチエイリアスなしのクリッピングは、（そしてあなたのクライアントの）目。これはよくあるケースです非常に小さな湾曲領域を持つ長方形または形状をクリップする場合 (角丸長方形の角など)。
追加clipBehavior: Clip.antiAlias必要であればアンチエイリアス付きクリッピング。これにより、より滑らかなエッジが得られますわずかに高いコストで。これはよくあるケースです円と円弧を扱います。
追加clip.antiAliasWithSaveLayer正確な情報が必要な場合は以前 (2018 年 5 月) と同じ動作。であることに注意してくださいパフォーマンスに非常にコストがかかります。おそらくこれだけですほとんど必要ありません。これが必要になる可能性があるのは、次のような場合です。非常に異なる背景色に画像が重ねられています。このような場合は、重複を避けることができるかどうかを検討してください。 1 つのスポットに複数の色を配置する (たとえば、背景色は画像が存在しない場所にのみ存在します)。

のためにStack特にウィジェットを以前に使用した場合overflow: Overflow.visibleに置き換えてくださいclipBehavior: Clip.none。

のためにListWheelViewportウィジェット (以前に指定した場合)clipToSize、対応するものに置き換えてくださいclipBehavior:Clip.noneためにclipToSize = falseとClip.hardEdgeためにclipToSize = true。

移行前のコード:

    await tester.pumpWidget(
      Directionality(
        textDirection: TextDirection.ltr,
        child: Center(
          child: Stack(
            overflow: Overflow.visible,
            children: const <Widget>[
              SizedBox(
                width: 100,
                height: 100,
              ),
            ],
          ),
        ),
      ),
    );

移行後のコード:

    await tester.pumpWidget(
      Directionality(
        textDirection: TextDirection.ltr,
        child: Center(
          child: Stack(
            clipBehavior: Clip.none,
            children: const <Widget>[
              SizedBox(
                width: 100.0,
                height: 100.0,
              ),
            ],
          ),
        ),
      ),
    );

タイムライン

リリースされたバージョン:様々
安定版リリース: 2.0.0

参考文献

API ドキュメント:

Clip