Question

我想画一条自动占据屏幕宽度的弧线。为此，我尝试了以下代码：

class ArcPainter extends CustomPainter   {


  @override
  void paint(Canvas canvas, Size size) {
    // create a bounding square, based on the centre and radius of the arc
    Rect rect = new Rect.fromPoints(new Offset(0.0, -45.0),new Offset(372.0, 45.0));


    // a fancy rainbow gradient
    final Gradient gradient = new RadialGradient(
      colors: <Color>[
        Colors.white.withOpacity(1.0),

      ],
      stops: [
        0.0,
      ],
    );

    // create the Shader from the gradient and the bounding square
    final Paint paint = new Paint()..shader = gradient.createShader(rect);

    // and draw an arc
    canvas.drawArc(rect, 0.0 , pi, true, paint);
  }

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

这是我的工作，但我想在Rect中使用rect rect = new Rect.fromPoints（new Offset（0.0，-45.0），new Offset（372.0，45.0））;占据整个屏幕宽度。

我已经尝试过Rect rect = new Rect.fromLTWH（0.0，-45.0，size.width，45.0）;但是在这种情况下，电弧消失了。

Answer 1

所以我找出了错误：

在调用此类时，我没有给出任何大小，因此size.width和size.height变为0。

我从以下位置更改了主版本中的代码：

new Row(
children: <Widget>[
    new CustomPaint(
    painter: new ArcPainter(),
  ],
),

收件人：

new Row(
children: <Widget>[
  new Container(
  width: screen_width * 1,
  height: screen_height * 0.05,
  child: 
    new CustomPaint(
    painter: new ArcPainter(),
      )
    )
  ],
),

最后在ArcPainter中：

Rect rect = new Rect.fromPoints（new Offset（0.0，-size.height），new Offset（size.width，size.height））;

注意： double screen_width = MediaQuery.of（context）.size.width; double screen_height = MediaQuery.of（context）.size.height;

如何在Flutter中绘制或绘制全角矩形？

1 个答案: