Как использовать двух нестандартных художников в трепетании

Question

Я сделал 2 пользовательских художников

1.

class DrawTriangle1 extends CustomPainter {
  DrawTriangle1() {
    painter = Paint()
      ..shader =
          LinearGradient(colors: [Colors.red, Colors.white]).createShader(rect)
      ..style = PaintingStyle.fill;
  }

  @override
  void paint(Canvas canvas, Size size) {
    var path = Path();

    path.moveTo(0, 0);
    path.lineTo(size.width, 0);
    path.lineTo(size.width, size.height / 2);
    path.close();
    canvas.drawPath(path, painter);
  }

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

class DrawTriangle2 extends CustomPainter {
  DrawTriangle2() {
    painter = Paint()
      ..shader = LinearGradient(colors: [
        Color(0xfffff),
        Color(0xff076585),
      ]).createShader(rect)
      ..style = PaintingStyle.fill;
  }

  @override
  void paint(Canvas canvas, Size size) {
    var path = Path();
    path.lineTo(size.width / 2, size.height / 4);
    path.lineTo(0, size.height / 2);
    path.close();

    canvas.drawPath(path, painter);
  }

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

Если я использую собственный художник, чтобы создать одну фигуру. Художник рисует ее с начала страницы.

ListView(
          children: <Widget>[
            CustomPaint(
              painter: DrawTriangle1(),
              size: Size(MediaQuery.of(context).size.width,
          MediaQuery.of(context).size.height), ,
            )
          ],
        )

, но если я добавлю еще один к списку, как это. Второй треугольник начинается в нижней части первого экрана.

ListView(
          children: <Widget>[
            CustomPaint(
              painter: DrawTriangle1(),
              size: Size(MediaQuery.of(context).size.width,
                  MediaQuery.of(context).size.height),
            ),
            CustomPaint(
              painter: DrawTriangle2(),
              size: Size(MediaQuery.of(context).size.width,
                  MediaQuery.of(context).size.height),
            )
          ],
        ),

Как сделать так, чтобы у них обоих была одинаковая начальная точка.

Answer 1

ListView строит каждый дочерний элемент один за другим, поэтому ожидаемое поведение, если вы хотите выполнить какую-то работу в одном и том же месте, удобен для виджета стека. это позволит вам рисовать оба пользовательских рисовальщика в одном месте.

Так что замените ваш виджет ListView на стек. Виджет решит вашу проблему.

Stack( //change 
          children: <Widget>[
            CustomPaint(
              painter: DrawTriangle1(),
              size: Size(MediaQuery.of(context).size.width,
                  MediaQuery.of(context).size.height),
            ),
            CustomPaint(
              painter: DrawTriangle2(),
              size: Size(MediaQuery.of(context).size.width,
                  MediaQuery.of(context).size.height),
            )
          ],
        ),