自定义Painter类在堆栈抖动中不可见 [英] Custom Painter class not visible in Stack flutter

问题描述

由于某些原因，Stack小部件不显示Container和CustomPaint.

For some reason, the Stack widget does not show the Container with the CustomPaint.

但是，如果从Stack中删除它，则可以正常工作.我在这里想念什么?

However if removed from Stack, it works fine. What am I missing here?

class _DemoNavBar extends State<DemoNavBar> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        home:
        Stack(
          children: <Widget>[
            Container(child: CustomPaint(painter: CurvePainter()))
      ],
    )
    );
  }
}

class CurvePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint();
    paint.color = Colors.green[800];
    paint.style = PaintingStyle.fill;

    var path = Path();

    path.moveTo(0, size.height - 100); 

    path.lineTo(size.width * 0.5, size.height - 100); 
    path.quadraticBezierTo(size.width * 0.7, size.height, size.width * 0.9,
        size.height - 100); 
    path.lineTo(size.width, size.height - 100); 
    path.lineTo(size.width, size.height); 
    path.lineTo(0, size.height);
    canvas.drawPath(path, paint);
  }

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

谢谢！

推荐答案

检查CustomPaint的来源

  /// The size that this [CustomPaint] should aim for, given the layout
  /// constraints, if there is no child.
  ///
  /// Defaults to [Size.zero].
  ///
  /// If there's a child, this is ignored, and the size of the child is used
  /// instead.

所以，给它一个尺寸.其他解决方案包括1)为CustomPaint的父级Container提供宽度和高度，以及2)为CustomPaint提供子级，而将忽略以下解决方案中提供的size.

So, give it a size. Other solutions include 1) providing width and height to the parent Container of CustomPaint and 2) provide a child for the CustomPaint which will ignore the size provided in the solution below.

我检查了此代码，以使其正常工作. size: MediaQuery.of(context).size使用完整的屏幕尺寸.

I checked this code to work fine. size: MediaQuery.of(context).size uses the complete screen size.

void main() {
  runApp(SO());
}

class SO extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DemoNavBar(),
    );
  }
}

class DemoNavBar extends StatefulWidget {
  @override
  _DemoNavBar createState() => _DemoNavBar();
}

class _DemoNavBar extends State<DemoNavBar> {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        CustomPaint(
          size: MediaQuery.of(context).size,
          painter: CurvePainter(),
        )
      ],
    );
  }
}

class CurvePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint();
    paint.color = Colors.green[800];
    paint.style = PaintingStyle.fill;

    var path = Path();

    path.moveTo(0, size.height - 100);

    path.lineTo(size.width * 0.5, size.height - 100);
    path.quadraticBezierTo(size.width * 0.7, size.height, size.width * 0.9, size.height - 100);
    path.lineTo(size.width, size.height - 100);
    path.lineTo(size.width, size.height);
    path.lineTo(0, size.height);
    canvas.drawPath(path, paint);
  }

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

---

现在，原因是由于Container没有父级或子级提供的大小，因此它需要完整的屏幕尺寸，并且在没有Stack的情况下也可以正常工作.当使用堆栈时，大小将为零，这将提供给自定义画家.

---

Now, the reason is since Container has no parent or child to provide the size it takes complete screen size and works fine without Stack. When a stack is used size goes to zero which is given to the custom painter.

等效代码可以写为

Stack(
  children: <Widget>[
    Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height,
      child: CustomPaint(
        painter: CurvePainter(),
      ),
    )
  ],
);

最终结果是

这篇关于自定义Painter类在堆栈抖动中不可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！