简体   繁体   English

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

[英]How to draw or paint a fullwidth rectangle in flutter?

I want to draw an arc which automatically occupies the width of the screen. 我想画一条自动占据屏幕宽度的弧线。 For this I tried the following code: 为此,我尝试了以下代码:

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;
  }
}

This does my work but I want the rect in Rect rect = new Rect.fromPoints(new Offset(0.0, -45.0),new Offset(372.0, 45.0)); 这可以完成我的工作,但我想使用Rect中的rect rect = new Rect.fromPoints(new Offset(0.0,-45.0),new Offset(372.0,45.0)); to occupy the full screen width. 占据整个屏幕宽度。

I already tried Rect rect = new Rect.fromLTWH(0.0, -45.0, size.width, 45.0); 我已经尝试过Rect rect = new Rect.fromLTWH(0.0,-45.0,size.width,45.0); but the arc disappears in this case. 但是在这种情况下,电弧消失了。

So I figured out the mistake: 所以我找出了错误:

I had not given any size while calling this class and thus the size.width and size.height was coming 0. 调用此类时,我没有给出任何大小,因此size.width和size.height即将变为0。

I changed the code in main build from: 我将主版本中的代码更改为:

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

To: 至:

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

and finally in the ArcPainter: 最后在ArcPainter中:

Rect rect = new Rect.fromPoints(new Offset(0.0, - size.height),new Offset(size.width, size.height)); Rect rect = new Rect.fromPoints(new Offset(0.0,-size.height),new Offset(size.width,size.height));

Note: double screen_width = MediaQuery.of(context).size.width; 注意:double screen_width = MediaQuery.of(context).size.width; double screen_height = MediaQuery.of(context).size.height; double screen_height = MediaQuery.of(context).size.height;

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM