flutter - 带有填充的缺口底部导航栏

Question

我正在尝试在 flutter 中使用带缺口效果的 bottomNavigationBar，当然没问题。但是，当我尝试向左侧和右侧的 BottomAppBar 添加填充以使导航器像 float 一样时，缺口位置向右移动!这意味着 float 操作按钮在正确的位置，但凹口不在它的正下方，而是向右移动。它完全向右移动，就像我给 BottomAppBar 的填充量一样!为什么!我用于 BottomAppBar 的形状特征是这样的:

AutomaticNotchedShape(RoundedRectangleBorder(borderRadius:BorderRadius.all(Radius.circular(35))), StadiumBorder()),

明确一点，我想要这样的东西，但中间有缺口效果 (FloatingActionButtonLocation.centerDocked)。

像这样但是中间有缺口

编辑

演示此问题的示例代码:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
      bottomNavigationBar: Padding(
        padding: const EdgeInsets.all(
          20.0,
        ),
        child: ClipRRect(
          borderRadius: BorderRadius.circular(30.0),
          child: BottomAppBar(
            notchMargin: 5.0,
            shape: const CircularNotchedRectangle(),
            child: Container(height: 50.0),
            color: Colors.blue,
            clipBehavior: Clip.hardEdge,
          ),
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
  }

呈现示例代码:

Answer 1

我通过创建自己的 CustomCircularNotchedRectangle 解决了这个问题。我添加到原始自定义偏移量 - notchOffset ...

使用:

Padding(
  padding: const EdgeInsets.symmetric(horizontal: 10.0).copyWith(bottom: 13),
  child: BottomAppBar(
    shape: CustomCircularNotchedRectangle(
      notchOffset: Offset(-10, 0),
    ),
    notchMargin: 6.0,
    color: widget.backgroundColor,
    child: Row(
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: items,
    ),
  ),
);

CustomCircularNotchedRectangle:

class CustomCircularNotchedRectangle extends NotchedShape {
  CustomCircularNotchedRectangle({
    this.notchOffset = const Offset(0, 0),
  });
  final Offset notchOffset;

  @override
  Path getOuterPath(Rect host, Rect? guest) {
    if (guest == null || !host.overlaps(guest)) return Path()..addRect(host);
    // The guest's shape is a circle bounded by the guest rectangle.
    // So the guest's radius is half the guest width.
    final double notchRadius = guest.width / 2.0;
    // We build a path for the notch from 3 segments:
    // Segment A - a Bezier curve from the host's top edge to segment B.
    // Segment B - an arc with radius notchRadius.
    // Segment C - a Bezier curve from segment B back to the host's top edge.
    //
    // A detailed explanation and the derivation of the formulas below is
    // available at: goo.gl/Ufzrqn

    const double s1 = 30.0;
    const double s2 = 1.0;

    final double r = notchRadius;
    final double a = -1.0 * r - s2;
    final double b = host.top - guest.center.dy;

    final double n2 = math.sqrt(b * b * r * r * (a * a + b * b - r * r));
    final double p2xA = ((a * r * r) - n2) / (a * a + b * b);
    final double p2xB = ((a * r * r) + n2) / (a * a + b * b);
    final double p2yA = math.sqrt(r * r - p2xA * p2xA);
    final double p2yB = math.sqrt(r * r - p2xB * p2xB);

    final List<Offset?> p = List<Offset?>.filled(6, null);

    // p0, p1, and p2 are the control points for segment A.
    p[0] = Offset(a - s1, b);
    p[1] = Offset(a, b);
    final double cmp = b < 0 ? -1.0 : 1.0;
    p[2] = cmp * p2yA > cmp * p2yB ? Offset(p2xA, p2yA) : Offset(p2xB, p2yB);

    // p3, p4, and p5 are the control points for segment B, which is a mirror
    // of segment A around the y axis.
    p[3] = Offset(-1.0 * p[2]!.dx, p[2]!.dy);
    p[4] = Offset(-1.0 * p[1]!.dx, p[1]!.dy);
    p[5] = Offset(-1.0 * p[0]!.dx, p[0]!.dy);

    // translate all points back to the absolute coordinate system.
    for (int i = 0; i < p.length; i += 1) {
      p[i] = p[i]! + guest.center + notchOffset;
    }

    return Path()
      ..moveTo(host.left, host.top)
      ..lineTo(p[0]!.dx, p[0]!.dy)
      ..quadraticBezierTo(p[1]!.dx, p[1]!.dy, p[2]!.dx, p[2]!.dy)
      ..arcToPoint(
        p[3]!,
        radius: Radius.circular(notchRadius),
        clockwise: false,
      )
      ..quadraticBezierTo(p[4]!.dx, p[4]!.dy, p[5]!.dx, p[5]!.dy)
      ..lineTo(host.right, host.top)
      ..lineTo(host.right, host.bottom)
      ..lineTo(host.left, host.bottom)
      ..close();
  }
}

之前:

之后: