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

Question

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

我的代码是：

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 的文档中提到了它是如何获取其大小的，因此您需要为孩子提供大小或提供其大小属性（如 size：Size(50, 14)）。同样在paint方法中，您应该使用 Size 参数，以便您只在可用的空间中绘制而不超出边界（就像您目前所做的那样）：

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