Question

是否可以在BottomNavigationBar中的中心图标上方添加一个缺口？这张图片中的内容：

我目前有类似这样的东西来生成导航：

        return BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          fixedColor: Color(0xff2398C3),
          showSelectedLabels: false,
          showUnselectedLabels: false,
          currentIndex: snapshot.data.index,
          onTap: _bottomNavBarBloc.pickItem,
          items: [
            BottomNavigationBarItem(
              title: Text('Search'),
              icon: Icon(Icons.search),
            ),
            BottomNavigationBarItem(
              title: Text('Browse'),
              icon: Icon(Icons.view_list),
            ),
            BottomNavigationBarItem(
              title: Text('Icon'),
              icon: Container(
                child: FlutterLogo(
                  size: 35.0,
                ),
              ),
            ),
            BottomNavigationBarItem(
              title: Text('Favorites'),
              icon: Icon(Icons.bookmark),
            ),
            BottomNavigationBarItem(
              title: Text('Settings'),
              icon: Icon(Icons.settings),
            ),
          ],
        );

Answer 1

您可以通过用容器包装FlutterLogo并使用其装饰属性来完成所需的工作，如下所示：

function solution(A) {
    const length = A.length
    if (length > 100000) return -1
    const counters = new Array(length).fill(0)
    const negativeCounters = new Array(length).fill(0)
    for (i=0; i < length; i++){
        if (A[i] < -2147483648 || A[i] > 2147483647) return -1
        if (A[i] > -1){
            counters[A[i]] = counters[A[i]] + 1
            if (counters[A[i]] > (length / 2)) return i
        } else {
            negativeCounters[A[i] * -1]  =  negativeCounters[A[i] * -1] + 1
            if (negativeCounters[A[i] * -1] > (length / 2)) return i
        }
    }
    return -1
}

Answer 2

您应该在lib以下使用。 convex_bottom_bar

Answer 3

您可以使用BottomAppBar代替BottomNavigationBar来实现此目的。您可以看到full documentation here.

shape中有一个名为ButtomAppBar的属性，您可以在其中传递CircularNotchedRectangle的对象来实现该刻痕。但是默认情况下，它会给出一个内部刻痕，因此您可以建立扩展CircularNotchedRectangle并扩展getOuterPath(Rect host, Rect guest)的类以绘制您的自定义路径。我已经做了一个小例子：

class MyShape extends CircularNotchedRectangle{
  @override
  Path getOuterPath(Rect host, Rect guest) {
    if (guest == null || !host.overlaps(guest))
      return Path()..addRect(host);
      final double notchRadius = guest.width / 2.0;

      const double s1 = 8.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>(6);

      // 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] += guest.center;
      return Path()
        ..moveTo(host.left, host.top)
        ..lineTo(p[1].dx, p[1].dy)
        ..arcToPoint(
          p[4],
          radius: Radius.circular(notchRadius),
          clockwise: true,
        )
        ..lineTo(host.right, host.top)
        ..lineTo(host.right, host.bottom)
        ..lineTo(host.left, host.bottom)
        ..close();
    }
}

然后您可以在自己的BottomAppBar中使用它

Scaffold(
        appBar:AppBar(),
        body: Container(),
        bottomNavigationBar: BottomAppBar(
          child: Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              RaisedButton(onPressed:(){})
            ],
          ),

          notchMargin: 30.0,
          shape: MyShape(

          ),
          color:Colors.blue
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButton: FloatingActionButton(onPressed:(){})
      ),

Flutter BottomNavigationBar中心图标样式

3 个答案: