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

Question

我正在尝试使用这个名为DOT导航栏的插件（ https://pub.dev/packages/packages/packages/dot_navigation_bar_bar_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(...),
    ...
)

如下所示，kudos to @iman

custom flo floating底部导航栏具有白色背景扑来

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 通过导航项目的数组。

此外，您需要添加 .index ，因为 _SelectedTab 不是INT值。

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