快捷導(dǎo)航

Flutter CustomPaint繪制widget使用示例

更新時(shí)間：2022年12月12日 11:38:55 作者：IAM17

這篇文章主要為大家介紹了Flutter CustomPaint繪制widget使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

CustomPaint 介紹

Flutter CustomPaint 提供了一個(gè) canvas，可以在繪制階段在上面進(jìn)行繪制內(nèi)容。

需要繪制時(shí)，CustomPaint 首先要求它的 painter 在當(dāng)前畫(huà)布上繪畫(huà)，然后它繪畫(huà)它的 child，在繪畫(huà)完它的 child 之后，要求他的 foregroundPainter 繪畫(huà)。

需要在從原點(diǎn)開(kāi)始并包含給定大小的區(qū)域的矩形內(nèi)作畫(huà)。（如果在這些邊界之外繪畫(huà)，則分配的內(nèi)存可能不足以光柵化繪畫(huà)命令，并且結(jié)果行為未定義。）要保證在這些邊界內(nèi)繪畫(huà)，請(qǐng)考慮使用 ClipRect。

使用 CustomPaint

const CustomPaint({
    super.key,
    this.painter,
    this.foregroundPainter,
    this.size = Size.zero,
    this.isComplex = false,
    this.willChange = false,
    super.child,
  })

最重要就是這個(gè) painter，painter 需要自定義。

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..color = Colors.red
      ..style = PaintingStyle.stroke
      ..strokeWidth = 1.0;
    canvas.drawLine(
        Offset(0, 10),
        Offset(
          100,
          10,
        ),
        paint);
  }
  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

需要重寫(xiě)兩個(gè)方法，在 paint 方法中進(jìn)行繪制。如果繪制不受外界影響，shouldRepaint 返回 false 就好。

CustomPaint(painter: MyPainter(),);

把 MyPainter 賦值給參數(shù) painter 就好了。

size 的大小。

如果 CustomPaint 的約束可以為 0 的話(huà)，那么 size 的值 Size(0,0)，就是說(shuō)，size 的值總是 Constrains 的最小 width，最小 height。有兩種辦法可以改變 size。

可以給 CustomPaint 加上約束，比如加一個(gè) SizedBox

 SizedBox(
        height: 20,
        width: 20,
        child: CustomPaint(
          painter: MyPainter(),
      ))

可以直接指定 size 參數(shù)。

 SizedBox(
        height: 20,
        width: 20,
        child: CustomPaint(
          size:Size(30,30),
          painter: MyPainter(),
      ))

size 參數(shù)可以在 constrains 的范圍內(nèi)起到作用。在本例中，約束為 20, size 為 30，最后傳給 paint 方法的 size 為 20。 tight 約束下 size 參數(shù)無(wú)效，只有在loose 約束下，size 參數(shù)才能起到作用。

isComplex

是否提示應(yīng)該緩存該層的繪畫(huà)。如果為false，則合成器將自己來(lái)決定這一層是否應(yīng)該緩存。

willChange

是否應(yīng)該告知緩存層這幅畫(huà)在下一幀中可能會(huì)發(fā)生變化。如果 isComplex 為 true，才需要考慮這個(gè)參數(shù)。

foregroundPainter

默認(rèn)繪制的層是在 child 之下，foregroundPainter 在 child 之上。

動(dòng)畫(huà)

CustomPainter 有一個(gè) 可選的參數(shù) Listenable? repaint ，是用來(lái)做動(dòng)畫(huà)的。

舉個(gè)例子。

class MyPainter extends CustomPainter {
  MyPainter(Animation<double> animation) :_animation=animation, super(repaint: animation);
  final Animation<double> _animation;
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..color = Colors.red
      ..style = PaintingStyle.stroke
      ..strokeWidth = 1.0;
    canvas.drawLine(
        Offset(0, 10),
        Offset(
          100*_animation.value,
          10,
        ),
        paint);
  }
  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}
class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({super.key});
  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> with SingleTickerProviderStateMixin{
 late AnimationController controller= 
      AnimationController(duration: Duration(seconds: 2),vsync: this)..repeat();
  @override
  Widget build(BuildContext context) {
    return SizedBox(
        height: 20,
        width: 20,
        child: CustomPaint(
          painter: MyPainter(controller.view),
        ));
  }
}

會(huì)看到一條紅色的直線由短變長(zhǎng)。

以上就是Flutter CustomPaint繪制widget使用示例的詳細(xì)內(nèi)容，更多關(guān)于Flutter CustomPaint繪制widget的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: