24.Flutter:CustomPaintを使用してクールなWidgetを構築する

ディレクトリ転送ドア:『Flutterクイックマニュアル』先導編
これまで、Flutterは構築ビューを組み合わせるために30種類以上の異なるWidgetを提供してきた.
しかし、いくつかの複雑なビューでは、SDKで提供されているこれらのWidgetはまだ組み合わせられません.
AndroidでCanvasとPaintを使って描くように、自分でこれらのビューを描かなければなりません.
Flutterでは、もちろん自由に描くことができる案もあります.彼はCustomPaintです.
CustomPaint
CustomPaintもWidgetです.
ビューツリーの任意のノード位置に埋め込むことができます.
一般的なプロパティを見てみましょう.
ツールバーの
タイプ
説明
painter
CustomPainter
背景ブラシ、childサブノードの後ろに描画内容が表示されます
foregroundPainter
CustomPainter
前景ブラシ、childサブノードの前に描画内容が表示されます
size
Size
描画領域のサイズを設定します.childがある場合、このパラメータは無視され、ペイント領域はchildのサイズです.
isComplex
bool
複雑な描画を行うかどうかは、Flutterによってキャッシュポリシーが適用され、重複レンダリングのコストが削減されます.デフォルトfalse
willChange
bool
キャッシュが有効になっている場合、次のフレームでペイントが変更されるかどうかを表すisComplexと組み合わせて使用します.デフォルトfalse
child
Widget
そう、CustomPaintはサブノードを含めることができます.
CustomPaintのプロパティから、実際のペイントはCustomPainterによって行われていることがわかります.
childを基準として、CustomPainterは、childの上に描かれたpinterと、childの下に描かれたforegroundPainterの2つの部分に分かれています.
? 例を見てみましょう.

CustomPaint(
    isComplex: true,
    willChange: true,
    size: Size(deviceSize.width, deviceSize.height),
    painter: GamePainter(background, maliao, position),
    foregroundPainter: ForegroundGamePainter(),
  )

馬良神筆CustomPainter
CustomPainterは抽象的なクラスであり、それを継承して自分の論理を実現する必要があります.

class MyPainter extends CustomPainter {

  @override
  paint(Canvas canvas, Size size)  {
    ...
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

CustomPainterを継承する上で最も重要なのはpaint(Canvas canvas, Size size)とshouldRepaint(CustomPainter oldDelegate)の2つの関数を実現することである.

paint()は描画ロジックであり、キャンバスCanvasとキャンバスのサイズSizeを得ることができる.

shouldRepaint()はtrueに戻ってから再描画されます.そうしないと、一度だけ描画されます.いくつかの条件で描画するたびに、システムリソースを節約できるかどうかを判断することができます.

CustomPainterを実装する上で最も重要なのは、paint()に描画ロジックを書くことです.
? 例:

class MyPainter extends CustomPainter {
  @override
  void paint(ui.Canvas canvas, ui.Size size) {
    Paint paint = Paint()
      ..isAntiAlias = true
      ..color = Colors.blueAccent
      ..strokeWidth = 10
      ..style = PaintingStyle.fill;

    canvas.drawLine(Offset(10, 10), Offset(250, 250), paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

? 効果を確認:
ペイントには、ペイントとCanvasの2つの重要な役割があります.
Paint
ペイントは絵筆で、Canvasで絵を描くのはそれに頼って「実行」します.
Paintの一般的なプロパティを見てみましょう.
ツールバーの
タイプ
説明
isAntiAlias
bool
アンチエイリアシングをオンにするかどうか、アンチエイリアシングをオンにするとエッジがスムーズになり、もちろんシステムリソースも消費されます.
color
Color
色
colorFilter
ColorFilter
色が変わります
filterQuality
FilterQuality
描画の画質の設定
invertColors
bool
反転色を使用するかどうか.画像を描くときにも画像の色を反転させることができます
maskFilter
MaskFilter
マスク効果を設定します.ガウスぼかしとか
shader
Shader
グラデーションカラー.カバーカラー
strokeCap
StrokeCap
描画シェイプのエッジスタイルを設定します.フィレット、四角など
strokeJoin
StrokeJoin
2つの描画シェイプの接続先のスタイルを設定します.フィレット、四角など
strokeWidth
double
ブラシの幅
style
PaintingStyle
充填方法.PaintingStyle.fill-充満;PaintingStyle.stroke-中空
blendMode
BlendMode
ピクセルブレンドモード.shapeや合成レイヤーを描くと有効になります.
以上がペイントでよく使われる属性ですので、効果を試してみてください.
これはPaintの構成コードです.

Paint paint = Paint()
  ..isAntiAlias = true
  ..color = Colors.redAccent
  ..strokeWidth = 10
  ..style = PaintingStyle.fill
  ..filterQuality = FilterQuality.high
  ..strokeCap = StrokeCap.round
  ..strokeJoin = StrokeJoin.round
  ..maskFilter = MaskFilter.blur(BlurStyle.normal, 50)
  ..invertColors = false
  ..blendMode = BlendMode.color
  ..shader = ui.Gradient.linear(
      Offset(0, 0), Offset(100, 100), [Colors.red, Colors.blueAccent])

Canvas
CanvasはキャンバスとしてAndroidで使われているCanvasと多くのインタフェースで似ています.
多くのベースのペイント操作が含まれており、これらのベースのペイント操作を組み合わせることで、ほとんどのビューをペイントすることができます.
Canvasの操作は主に2種類あります.

Canvasの変換操作、例えば、パン、回転、ズーム、レイヤーなどの操作.

線分、パス、ピクチャ、ジオメトリなどのベースグラフィックを描画します.

Canvasのこれらの操作は後で詳しく説明しますか?の
ディレクトリ転送ドア:『Flutterクイックマニュアル』先導編
どうやって私を見つけたの?
転送ゲート:CoorChiceのホームページ
トランスポートゲート:CoorChiceのGithub
転載先:https://juejin.im/post/5c94c4a3e51d450c1625db5a