Flutter底部导航栏插件button_navigation_bar的使用

Flutter底部导航栏插件button_navigation_bar的使用

button_navigation_bar 是一个提供替代默认菜单栏样式的导航栏小部件。实现简单，并且可以自定义样式。

使用

当使用此小部件作为导航栏时，可以通过 Scaffold() 的 floatingactionbutton 属性来定位该小部件，如以下两个示例所示。

示例截图

Floating Navbar	Docked Navbar	Expandable Demo
Floating Navbar	Docked Navbar	Expandable Demo

对于基本的导航栏，可以在 floatingActionButton: 属性中放置一个 ButtonNavigationBar，并填充一个或多个 ButtonNavigationItem。

return Scaffold(
     appBar: appBar(context),
     body: body(context),
     floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
     floatingActionButton: ButtonNavigationBar(
       borderRadius: BorderRadius.all(Radius.circular(10)),
       children: [
         ButtonNavigationItem(
             icon: Icon(Icons.map_outlined),
             onPressed: () {
               Navigator.push(
                   context,
                   MaterialPageRoute(
                       builder: (BuildContext context) => SubPageOne()));
             }),
         ButtonNavigationItem(
             icon: Icon(Icons.add),
             label: "Add a card",
             width: 140,
             onPressed: () {
               setState(() {
                 cardCounter++;
               });
             }),
         ButtonNavigationItem(
             icon: Icon(Icons.search),
             onPressed: () {
               Navigator.push(
                   context,
                   MaterialPageRoute(
                       builder: (BuildContext context) => SubPageTwo()));
             }),
       ],
     ),
);

更多高级代码片段（例如上面显示的两个导航栏）可以在 这里 查看。

贡献到这个插件

这个插件仍处于开发的早期阶段，因此任何形式的插件开发、示例或测试的贡献都受到欢迎。有关更多信息，请参阅我们的 GitHub。

完整示例代码

import 'package:button_navigation_bar/button_navigation_bar.dart';
import 'package:button_navigation_bar/button_navigation_expandable.dart';
import 'package:example/card_service.dart';
import 'package:example/sub_pages/subpage1.dart';
import 'package:example/sub_pages/subpage2.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Button Nav Bar Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: MyHomePage(title: 'Demo App'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int example = 1;
  int cardCounter = 2;

  [@override](/user/override)
  Widget build(BuildContext context) {
    switch (example) {
      case 1:
        return example1(context);
      case 2:
        return example2(context);
      default:
        throw "Example nr. $example is not implemented";
    }
  }

  Scaffold example1(BuildContext context) {
    return Scaffold(
      appBar: appBar(context),
      body: body(context),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: ButtonNavigationBar(
        borderRadius: BorderRadius.only(
            topRight: Radius.circular(10), topLeft: Radius.circular(10)),
        children: [
          ButtonNavigationItem(
              icon: Icon(Icons.map_outlined),
              onPressed: () {
                Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (BuildContext context) => SubPageOne()));
              }),
          ButtonNavigationItem(
              icon: Icon(Icons.add),
              onPressed: () {
                setState(() {
                  cardCounter++;
                });
              }),
          ButtonNavigationItem.expandable(
              expandableSpacing: 48.0,
              verticalOffset: 56.0,
              icon: Icon(Icons.expand_less),
              collapseButton: ButtonNavigationItem(
                  onPressed: () {},
                  color: Colors.blueGrey,
                  icon: Icon(Icons.close)),
              children: [
                ButtonNavigationExpandable(
                  onPressed: () {},
                  label: "Option 1",
                  height: 40,
                  width: 128,
                  icon: Icon(Icons.info),
                ),
                ButtonNavigationExpandable(
                    onPressed: () {}, height: 40, width: 96, label: "Option 2"),
              ]),
          ButtonNavigationItem(
              icon: Icon(Icons.remove),
              onPressed: () {
                setState(() {
                  if (cardCounter > 1) {
                    cardCounter--;
                  }
                });
              }),
          ButtonNavigationItem(
              icon: Icon(Icons.view_stream_sharp),
              onPressed: () {
                setState(() {
                  cardCounter = 2;
                });
              }),
        ],
      ),
    );
  }

  Scaffold example2(BuildContext context) {
    return Scaffold(
      appBar: appBar(context),
      body: body(context),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      floatingActionButton: ButtonNavigationBar(
        borderRadius: BorderRadius.all(Radius.circular(10)),
        children: [
          ButtonNavigationItem(
              icon: Icon(Icons.map_outlined),
              onPressed: () {
                Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (BuildContext context) => SubPageOne()));
              }),
          ButtonNavigationItem(
              icon: Icon(Icons.add),
              label: "Add a card",
              width: 140,
              onPressed: () {
                setState(() {
                  cardCounter++;
                });
              }),
          ButtonNavigationItem(
              icon: Icon(Icons.search),
              onPressed: () {
                Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (BuildContext context) => SubPageTwo()));
              }),
        ],
      ),
    );
  }

  AppBar appBar(BuildContext context) {
    return AppBar(
      title: Text(widget.title),
      actions: [
        PopupMenuButton(
          itemBuilder: (BuildContext context) {
            return [
              PopupMenuItem(
                  onTap: () {
                    setState(() {
                      example = 1;
                    });
                  },
                  child: InkWell(
                    splashColor: Colors.grey,
                    child: Text("Example 1"),
                  )),
              PopupMenuItem(
                  onTap: () {
                    setState(() {
                      example = 2;
                    });
                  },
                  child: InkWell(
                    splashColor: Colors.grey,
                    child: Text("Example 2"),
                  ))
            ];
          },
        ),
      ],
    );
  }

  Widget body(BuildContext context) {
    return SingleChildScrollView(
        padding: EdgeInsets.all(8),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: CardService().returnCards(cardCounter),
        ));
  }
}