1

我正在尝试从运球设计中创建一个底部应用栏，我希望这些曲线像设计一样平滑，但是浮动动作按钮的凹槽不像设计中的那样平滑。我想不出另一种方法来实现这一目标。

这是我的脚手架代码-

    bottomNavigationBar: ClipRRect(
    borderRadius: BorderRadius.only(
        topLeft: Radius.circular(40), topRight: Radius.circular(40)),
    child: Container(
      child: BottomAppBar(
        shape: CircularNotchedRectangle(),
        color: Colors.blue,
        child: SizedBox(
          height: height * 0.12,
          width: width,
        ),
      ),
    ),
  ),
  floatingActionButton: Container(
    margin: EdgeInsets.all(8),
    width: 80.0,
    height: 80.0,
    child: FloatingActionButton(
      onPressed: () {},
      child: Icon(
        Icons.add,
        size: 25.0,
      ),
    ),
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

左图是我想要实现的，右图是我已经实现的，请注意第一张图片中的平滑边框。我尝试将自定义画家用于 quadraticBezierCurve，但未能成功 在此处输入图像描述

帮助表示赞赏

4

1 回答 1

0

在花了很多时间之后，我编写了自己的自定义类，它扩展了 CustomClipper 并使用 ClipPath 小部件能够使用它来实现它

  • 第一条四边贝塞尔曲线

  • 然后在中心 2 三次贝塞尔曲线，

  • 再次结束四边形贝塞尔曲线。

然后用 Material andd 包裹 ClipPath 小部件，给出透明背景和 100 的高度。

输出如下：

在此处输入图像描述

参考代码：https ://github.com/sardapv/NavBar-CurvedShape-FromDribbleDesign

于 2020-07-26T08:47:49.113 回答