Как разместить CustomPaint в виджете Row? - PullRequest
Новая
       36

Как разместить CustomPaint в виджете Row?

2 голосов
/ 07 марта 2019

Я новичок с флаттером. Я хочу расположить индикатор выполнения (сделанный с помощью custompainter) в ряд, но я не знаю, как это сделать. Я хочу, чтобы все элементы строки были выровнены, центрированы вертикально и с одинаковым расстоянием между ними.

enter image description here

мой код: 

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;

1 Ответ

2 голосов
/ 08 марта 2019

В вашем текущем коде CustommPaint имеет размер 0. В документации для CustomPaint упоминается, как он получает свой размер, поэтому вам нужно либо предоставить дочернему элементу размер, либо предоставить свойство размера (например, размер: Размер (50, 14)). Также в методе рисования вы должны использовать параметр Size, чтобы рисовать только в доступном для вас пространстве и не выходить за границы (как вы это делаете в настоящее время): 

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