0

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), ,
            )
          ],
        )

しかし、このようにリストビューに別のものを追加すると。2 番目の三角形は、最初の画面の下部から始まります。

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),
            )
          ],
        ),

両方の開始点を同じにするにはどうすればよいですか?

4

2 に答える 2