Flutter CustomPainter 半径直

Question

在自定义画家的帮助下，我有自定义底部导航栏我需要使左右半径笔直。

代码

 bottomNavigationBar: Container(
        width: size.width,
        // color: Colors.transparent.withOpacity(0.1),
        height: 80,
        child: Stack(
          // clipBehavior: Clip.none,
          children: [
            CustomPaint(
              size: Size(size.width, 80),
              painter: BNBCustomPainter(),
            ),
            Center(
              heightFactor: 0.6,
              child: FloatingActionButton(
                  backgroundColor: primarycolor,
                  child: Image.asset(
                    'assets/slicing/Untitled-17.png',
                    width: 27,
                  ),
                  elevation: 0.1,
                  onPressed: () {
                    setBottomBarIndex(2);
                  }),
            ),
            Container(
              width: size.width,
              height: 80,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  IconButton(
                    icon: Image.asset(
                      'assets/slicing/Untitled-19.png',
                      width: 20,
                    ),
                    onPressed: () {
                      setBottomBarIndex(0);
                    },
                    splashColor: Colors.white,
                  ),
                  IconButton(
                      icon: Image.asset(
                        'assets/slicing/Untitled-18.png',
                        width: 20,
                      ),
                      onPressed: () {
                        setBottomBarIndex(1);
                      }),
                  Container(
                    width: size.width * 0.20,
                  ),
                  IconButton(
                      icon: Image.asset(
                        'assets/slicing/Untitled-20.png',
                        width: 20,
                      ),
                      onPressed: () {
                        setBottomBarIndex(3);
                      }),
                  IconButton(
                      icon: Image.asset(
                        'assets/slicing/Untitled-21.png',
                        width: 20,
                      ),
                      onPressed: () {
                        setBottomBarIndex(4);
                      }),
                ],
              ),
            )
          ],
        ),
      ),

和

class BNBCustomPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = new Paint()
      ..color = secondarycolor
      ..style = PaintingStyle.fill;

    Path path = Path();
    path.moveTo(0, 20); // Start
    path.quadraticBezierTo(size.width * 0.20, 0, size.width * 0.35, 0);
    path.quadraticBezierTo(size.width * 0.40, 0, size.width * 0.40, 20);
    path.arcToPoint(Offset(size.width * 0.60, 20),
        radius: Radius.circular(20.0), clockwise: false);
    path.quadraticBezierTo(size.width * 0.60, 0, size.width * 0.65, 0);
    path.quadraticBezierTo(size.width * 0.80, 0, size.width, 20);
    path.lineTo(size.width, size.height);
    path.lineTo(0, size.height);
    path.lineTo(0, 20);
    canvas.drawShadow(path, Colors.black, 5, true);
    canvas.drawPath(path, paint);
  }

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

问题是左右角不直。

预览

这里可以看到左右都是弯的我要弄直

如果我这样做 path.moveTo(0, 20) to path.moveTo(0, 0)。那么只有左侧是直的，但对右侧不起作用。

Answer 1

你可以试试这个，因为我没有设备来测试代码。

更新: 添加由 dartpad 测试的图像。

class BNBCustomPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = new Paint()
      ..color = secondarycolor
      ..style = PaintingStyle.fill;

    Path path = Path();
    // path.moveTo(0, 20);
    path.moveTo(0, 0); // -> start at top left
    // path.quadraticBezierTo(size.width * 0.20, 0, size.width * 0.35, 0);
    path.lineTo(size.width * 0.35, 0); // -> move to middle left
    path.quadraticBezierTo(size.width * 0.40, 0, size.width * 0.40, 20);
    path.arcToPoint(Offset(size.width * 0.60, 20),
        radius: Radius.circular(20.0), clockwise: false);
    path.quadraticBezierTo(size.width * 0.60, 0, size.width * 0.65, 0);
    // path.quadraticBezierTo(size.width * 0.80, 0, size.width, 20);
    path.lineTo(size.width, 0); // -> move from middle right to top right
    path.lineTo(size.width, size.height);
    path.lineTo(0, size.height);
    // path.lineTo(0, 20);
    path.close(); // -> close path, same as path.lineTo(0, 0)
    canvas.drawShadow(path, Colors.black, 5, true);
    canvas.drawPath(path, paint);
  }

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

Answer 2

关于 UI，您正在尝试归档与 CircularNotchedRectangle() 相似的形状。

Scaffold(
  bottomNavigationBar: BottomAppBar(
    shape: CircularNotchedRectangle(),
    notchMargin: 12.0,

    ///control space
    clipBehavior: Clip.antiAlias,
    child: BottomNavigationBar(
   // backgroundColor: 
    items: const [
      BottomNavigationBarItem(icon: Icon(Icons.cancel), label: "Title"),
      BottomNavigationBarItem(icon: Icon(Icons.cancel), label: "Title"),
    ]),
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.abc),
  ),
  floatingActionButtonLocation:
      FloatingActionButtonLocation.centerDocked,
  body:

更多关于 BottomAppBar and CircularNotchedRectangle。

Flutter CustomPainter 半径直

Flutter CustomPainter radius straight

flutter

dart