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

ovfsdjhp  于 2023-02-13  发布在  Flutter
关注(0)|答案(1)|浏览(125)

我正在尝试使用这个插件称为点导航栏(https://pub.dev/packages/dot_navigation_bar),我已经安装到我目前的项目插件,但我只是想知道我如何通过我现有的屏幕。
我有主页(),日历(),帮助(),日程表()屏幕,所以只是想知道我如何才能打开这些页面时,我点击图标。任何帮助或建议将不胜感激。
这是文档中的示例代码。

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 }

现在就像这样.

jjhzyzn0

jjhzyzn01#

body中传递navigation项的数组。
此外,您还需要添加.index,因为_selectedTab不是int值。

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

相关问题