Question

通过使用CustomPainter，我创建了一个半圈。现在我有了这个小部件树：

return Scaffold(
  body: Center(
    child: SingleChildScrollView(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Container(
            // card view
            height: 100,
            alignment: Alignment.center,
            margin: EdgeInsets.only(
                top: 20.0, bottom: 0.0, left: 50.0, right: 50.0),
            decoration: BoxDecoration(
              boxShadow: ([
                BoxShadow(
                  color: color_transparent_black,
                  spreadRadius: 5,
                  blurRadius: 3.0,
                  offset: Offset(2, 3),
                ),
              ]),
              borderRadius: BorderRadius.circular(14.0),
            ),),
            MyArc(diameter: 200),

这是MyArc：

class MyArc extends StatelessWidget {
  final double diameter;

  const MyArc({Key key, this.diameter = 200}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: MyPainter(),
      size: Size(diameter, diameter),
    );
  }
}

// This is the Painter class
class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint()..color = Colors.blue;
    canvas.drawArc(
      Rect.fromCenter(
        center: Offset(size.height / 2, 0),
        height: size.height,
        width: size.width,
      ),
      6.4,
      2.9,
      false,
      paint,
    );
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

但是我遇到了这个问题：

我不要在灰色和蓝色形状之间留空格！

Answer 1

我终于知道了...

import 'dart:math' as math;

//...

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint blue = Paint()..color = Colors.blue;

    canvas.translate(0, -size.height / 2);
    canvas.drawArc(
      Offset.zero & size,
      -math.pi,
      -math.pi,
      false,
      blue,
    );
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

如果您想使画布很好地适合，也可以像这样使它成为矩形...

CustomPaint(
  painter: MyPainter(),
  size: Size(diamieter, diameter / 2),
)

然后让您自定义画家为...

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint blue = Paint()..color = Colors.blue;
    Paint red = Paint()..color = Colors.red;

    canvas.drawRect(Offset.zero & size, red);

    canvas.translate(0, -size.height);
    canvas.drawArc(
      Offset.zero & Size(size.width, size.height * 2),
      -math.pi,
      -math.pi,
      false,
      blue,
    );
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

这样很贴身...

Answer 2

尝试将spreadRadius更改为3.0 创建的边界可能大于容器的“模糊半径”边界。

BoxShadow( color: color_transparent_black, spreadRadius: 5, blurRadius: 3.0, offset: Offset(2, 3), ),

Flutter：删除小部件之间的空间

2 个答案: