如何在Flutter中使用浮动底部导航栏

Question

我正在尝试使用这个名为点导航栏的插件（https://pub.dev/packages/dot_navigation_bar）并且我已经将该插件安装到我当前的项目中，但我只是想知道如何传递我现有的屏幕。

我有 Home()、Calender()、Help()、Schedule() 屏幕，所以只是想知道当我单击图标时如何打开这些页面。任何帮助或建议将非常感激。

这是文档中的示例代码。

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

class _HomeState extends State<Home> {
  var _selectedTab = _SelectedTab.home;

  void _handleIndexChanged(int i) {
    setState(() {
      _selectedTab = _SelectedTab.values[i];
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBody: true,
      body: Container(
        child: Image.asset("lib/img/1.png"),
      ),
      bottomNavigationBar: Padding(
        padding: EdgeInsets.only(bottom: 10),
        child: DotNavigationBar(
          margin: EdgeInsets.only(left: 10, right: 10),
          currentIndex: _SelectedTab.values.indexOf(_selectedTab),
          dotIndicatorColor: Colors.white,
          unselectedItemColor: Colors.grey[300],
          // enableFloatingNavBar: false,
          onTap: _handleIndexChanged,
          items: [
            /// Home
            DotNavigationBarItem(
              icon: Icon(Icons.home),
              selectedColor: Color(0xff73544C),
            ),

            /// Likes
            DotNavigationBarItem(
              icon: Icon(Icons.favorite),
              selectedColor: Color(0xff73544C),
            ),

            /// Search
            DotNavigationBarItem(
              icon: Icon(Icons.search),
              selectedColor: Color(0xff73544C),
            ),

            /// Profile
            DotNavigationBarItem(
              icon: Icon(Icons.person),
              selectedColor: Color(0xff73544C),
            ),
          ],
        ),
      ),
    );
  }
}

enum _SelectedTab { home, favorite, search, person }

现在就这样显示。

Answer 1

您可以替换此包并在主支架的 floatingActionButton 参数中提供任何（自定义/默认颤动导航栏），如下所示

Scaffold(
    extendBody: true,  // <--- do not forget to mark this as true
    floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
    floatingActionButton: NavigationBar(...),
    ...
)

如本帖所述，感谢@Iman

自定义浮动底部导航栏有白色背景颤动

Scaffold(
    extendBody: true, // <--- do not forget mark this as true
    floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
    floatingActionButton: Container(
      margin: const EdgeInsets.symmetric(horizontal: 25),
      decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(50),
      ),
      child: NavigationBar(
        backgroundColor: Colors.transparent, // <--- to remove background color
        elevation: 0,                       // <--- to remove shadows
        ....
      ),

Answer 2

在

body

中传递

navigation

项目数组。

此外，您还需要添加

.index

，因为

_selectedTab

不是 int 值。

navigation=[home(), favorite(), search(), person()]
body: navigation[_selectedTab.index]