如何在 Row 小部件中定位 CustomPaint？

Question

我是 Flutter 新手。我想连续放置一个进度条（用 custompainter 制作），但我不知道该怎么做。我希望行中的所有元素对齐、垂直居中并且它们之间具有相同的 space。

我的代码是：

Widget build(BuildContext context) {
return MaterialApp(
    home: Scaffold(
  body: Container(alignment: Alignment.center, child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: <Widget>[
      Text('text1'),
      Text('text2'),
      CustomPaint(painter: progressBar(),),
      Text('text3'),
      Text('text4')
    ],
  ),) 
));

和：

class progressBar extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
Paint paint = Paint();


Radius corner =Radius.circular(8);

paint.color =Color.fromRGBO(0, 0, 0, 1);
canvas.drawRRect(RRect.fromRectAndRadius(Rect.fromLTWH(0, 0, 250, 14), corner), paint);

paint.color =Color.fromRGBO(191, 20, 28, 1);
canvas.drawRRect(RRect.fromRectAndRadius(Rect.fromLTWH(1, 2, 50, 10), corner), paint);
}

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

Answer 1

在您当前的代码中，CustommPaint 的大小为 0。CustomPaint 的 documentation 提到了它如何获得其大小，因此您需要提供 child 大小或提供其大小属性（比如尺寸：Size(50, 14)）。同样在 paint 方法中，您应该使用 Size 参数，这样您就可以只绘制可用的 space 而不会越界（就像您现在所做的那样）：

canvas.drawRRect(RRect.fromRectAndRadius(Rect.fromLTWH(0, 0, size.width, size.height), corner), paint);

如何在 Row 小部件中定位 CustomPaint？

How to position a CustomPaint in a Row widget?

flutter

custom-painting