我们如何将尺寸传递给 CustomPaint？

Question

列的子级 CustomPainter 的大小变为 (0, 0)。

1）当我们刚刚使用CustomPaint和CustomPainter时，我们期望的大小被传递给CustomPainter，它按预期渲染。

2）当我们使用CustomPaint和CustomPainter作为Stack的子级时，我们期望的大小没有传递给CustomPainter。

3）但是当我们将它用作SizedBox.expand的子项时，我们期望的大小被传递给CustomPainter并被渲染。

4）当我们使用CustomPaint和CustomPainter作为Column的子项时，我们期望的大小没有传递给CustomPainter。我们正在研究解决该问题的方法。

5) 但是，它的高度要么是 0.0，要么是无穷大。我们希望它能够扩展到合适的尺寸。

import 'package:flutter/material.dart';

class TestWidget extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
    // 1) OK Size(360.0, 640.0)
    // return CustomPaint(
    //   painter: TestPainter(),
    // );

    // 2) NG Size(0.0, 0.0)
    // return Stack(
    //   children: <Widget>[
    //     CustomPaint(
    //       painter: TestPainter(),
    //     ),
    //   ],
    // );

    // 3) OK Size(360.0, 640.0)
    // return Stack(
    //   children: <Widget>[
    //     SizedBox.expand(
    //       child: CustomPaint(
    //         painter: TestPainter(),
    //       ),
    //     ),
    //   ],
    // );

    // 4)5) NG BoxConstraints forces an infinite height.
    // return Column(
    //   children: <Widget>[
    //     SizedBox.expand(
    //       child: CustomPaint(
    //         painter: TestPainter(),
    //       ),
    //     ),
    //     Text('test'),
    //   ],
    // );

    // 4)5) NG Size(0.0, 0.0)
    // return Column(
    //   children: <Widget>[
    //     SizedBox(
    //       child: CustomPaint(
    //         painter: TestPainter(),
    //       ),
    //     ),
    //     Text('test'),
    //   ],
    // );

    // 4)5) Size(360.0, 0.0)
    // return Column(
    //   children: <Widget>[
    //     SizedBox(
    //       width: double.infinity,
    //       child: CustomPaint(
    //         painter: TestPainter(),
    //       ),
    //     ),
    //     Text('test'),
    //   ],
    // );
    }
}

class TestPainter extends CustomPainter {
    @override
    void paint(Canvas canvas, Size size) {
    print(size);
    Paint p = Paint();
    p.color = Color.fromARGB(0xff, 0xff, 0x00, 0x00);
    Rect rect = Rect.fromLTWH(0, 0, size.width, size.height);
    canvas.drawRect(rect, p);
    }

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

我们期望 CustomPaint 和 CustomPainter 扩展到适当的大小，并且该大小将传递给 CustomPainter。

Answer 1

下面是 的构造函数CustomPaint()：

const CustomPaint({
  Key key,
  this.painter,
  this.foregroundPainter,
  this.size = Size.zero,
  this.isComplex = false,
  this.willChange = false,
  Widget child,
}) : assert(size != null),
     assert(isComplex != null),
     assert(willChange != null),
     super(key: key, child: child);

当省略尺寸时，尺寸被视为Size.zero（意思是），因此您需要将所需的尺寸传递给“CustomPaint()”。Size(0.0, 0.0)

return CustomPaint(
  size: const Size(double.infinity, double.infinity),  // or whatever size you want it to be
  painter: TestPainter(),
);

至于内部小部件的扩展Column，请使用Expanded代替SizedBox.expand。

Answer 2

在 TestPainter 类中创建一个构造函数并从那里接受参数。

例如：

var size;
TestPainter(this.size);

现在，在调用此类时，将大小值传递给构造函数

TestPainter(20.0);

并在 Paint 方法中使用它：

widget.size.width