Flutter ButtomNavigationBarItem 添加圆圈并使其可点击

Question

因此，我正在处理我的 ButtomNavigationBar，它应该在中心包含一个用于图标的矩形。我已经存档了。但是，现在我面临一个问题：

遗憾的是形状和图标本身不可点击。单击它时没有任何反应（即使我尝试将某些内容打印到控制台）。它只会在稍微超出形状的地方单击时切换屏幕。对我来说，这似乎是一个“z-index”问题。知道如何解决这个问题吗？

我也曾尝试将我的 Container 包装到 GestureDetector 中，但这也不起作用..

BottomNavigationBarItem(
    icon: GestureDetector(
    onTap: () =>  { onClicked },
    child: 
        Container(
            // same code as below
        ),
    ),
    label: 'Add',
),

这是我的完整代码：

底部导航

class BottomNavigation extends StatelessWidget {
  int selectedIndex;
  ValueChanged<int> onClicked;
  BottomNavigation({Key? key, required this.selectedIndex, required this.onClicked}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      currentIndex: selectedIndex,
      selectedItemColor: AppColors.orange,
      onTap: onClicked,
      type: BottomNavigationBarType.fixed,
      showSelectedLabels: false,
      showUnselectedLabels: false,
      backgroundColor: AppColors.white,
      items: <BottomNavigationBarItem>[
        const BottomNavigationBarItem(
          icon: Icon(CupertinoIcons.home),
          label: 'Home',
        ),
        const BottomNavigationBarItem(
          icon: Icon(CupertinoIcons.search),
          label: 'Search',
        ),
        BottomNavigationBarItem(
          icon: Container(
            decoration: BoxDecoration(
              color: AppColors.orange,
              shape: BoxShape.circle,
            ),
            child: Padding(
                padding: const EdgeInsets.all(0.0),
                child: IconButton(
                  onPressed: () =>  { onClicked },
                    icon: Icon(CupertinoIcons.plus, color: AppColors.white)
                )
            ),
          ),
          label: 'Add',
        ),
        const BottomNavigationBarItem(
          icon: Icon(CupertinoIcons.bell),
          label: 'Notifications',
        ),
        const BottomNavigationBarItem(
          icon: Icon(CupertinoIcons.news),
          label: 'Blog',
        ),
      ],
    );
  }
}

Home（集成 BottomNavigation 的地方）：

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  int _selectedIndex = 0;

  final screens = [
    HomePage(),
    SearchPage(),
    ProductSubmitPage(),
    NotificationPage(),
    BlogPage()
  ];

  void onClicked(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: screens[_selectedIndex],
        bottomNavigationBar: BottomNavigation(
          selectedIndex: _selectedIndex,
          onClicked: onClicked,
        )
    );
  }
}

这个堆栈启发了我如何向图标添加形状：

更新： 这是我的飞镖板：https://dartpad.dev/?id=c42f306078c7ece655816482c5c0d413

亲切的问候

Answer 1

你的错误在于函数的调用。您应该像以下任一行那样执行此操作：

//Being 2 the index of this in the list
onPressed: () =>  onClicked(2),
onPressed: () {onClicked(2);},

我没有使用过这个 BottomNavigationBarItem，所以我不知道为什么它会这样，但这会解决你的问题。

Flutter ButtomNavigationBarItem 添加圆圈并使其可点击

Flutter ButtomNavigationBarItem add round circle and make it clickable

flutter

dart

bottomnavigationview