Question

我在this widget中使用了底部导航栏，

如何使底部导航栏显示在所有页面上？

当我从抽屉中选择一个页面时，它可以显示吗？

请帮助我

Answer 1

您实际上可以使用综合浏览量小部件来实现 https://api.flutter.dev/flutter/widgets/PageView-class.html 这样，您就可以将所有页面都放在一个类中，并在综合浏览量小部件下方构建底部的导航栏。默认情况下，页面是可滑动的，但是您可以禁用它

Scaffold(

body:
Container( 
child: 
Column(
children: <Widget> [
PageView(
  physics:new NeverScrollableScrollPhysics())
  controller: _controller,
  children: [
    MyPage1(),
    MyPage2(),
    MyPage3(),
  ],
  ),
  googleNavBar()
]
)
);

Answer 2

我建议您使用内置的flutter内置 BottomNavigationBar 小部件，而不要使用第三方小部件。

这是我的代码，您可以根据需要进行修改。希望这会有所帮助。

class DashboardScreen extends StatefulWidget {
  @override
  _DashboardScreenState createState() => _DashboardScreenState();
}

class _DashboardScreenState extends State<DashboardScreen> with SingleTickerProviderStateMixin {
  final _selectedItemColor = Colors.white;
  final _unselectedItemColor = Color(0xFF828282);
  final _selectedBgColor = Color(0xFF00cde7);
  final _unselectedBgColor = Colors.transparent;
  int _currentIndex = 0;

  GlobalKey<ScaffoldState> _key = GlobalKey();

  // List of body of current screen you import/create from other dart file. 
  final List<Widget> _children = [
    HomeScreen(),
    AppointmentScreen(id: 1),
    PaymentScreen(id: 1),
    ProfileScreen(id: 1)
  ];

  // List of dynamic app bar for different page. You can also import/create app bar easily
  final List<Widget> _childAppBar = [
    HomeAppBar(),
    AppointmentAppBar(),
    PaymentAppBar(),
    ProfileAppBar()
  ];

  void _onItemTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
    debugPrint("Tapped item : $index");
  }

  Color _getBgColor(int index) =>
      _currentIndex == index ? _selectedBgColor : _unselectedBgColor;

  Color _getItemColor(int index) =>
      _currentIndex == index ? _selectedItemColor : _unselectedItemColor;

  Widget _buildIcon(IconData iconData, String text, int index) => Container(
    width: MediaQuery.of(context).size.width,
    height: kBottomNavigationBarHeight,
    child: Material(
      color: _getBgColor(index),
      child: InkWell(
        child: Column(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Container(
                child: Column(
                  children: [
                    Icon(iconData, color: _getItemColor(index)),
                    Text(text,
                        style: TextStyle(fontSize: 12, fontWeight: FontWeight.w500, fontFamily: 'Poppins', color: _getItemColor(index))),
                  ],
                ),
            ),
          ],
        ),
        onTap: () => _onItemTapped(index),  // function responsible for navigation on tap
      ),
    ),
  );

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        key: _key,
        appBar: _childAppBar.elementAt(_currentIndex),  // this is dynamic app bar
        body: _children.elementAt(_currentIndex),       // this is dynamic body of the current screen
        bottomNavigationBar:
        BottomNavigationBar(
          currentIndex: 0,
          type: BottomNavigationBarType.fixed,
          iconSize: 30.0,
          items: [
            BottomNavigationBarItem(
              icon: _buildIcon(Icons.home, "Home", 0), // Check this _buildIcon function above
              title: SizedBox.shrink(),
            ),
            BottomNavigationBarItem(
                icon: _buildIcon(Icons.group, "Appointment", 1),
                title: SizedBox.shrink(),
            ),
            BottomNavigationBarItem(
                icon: _buildIcon(Icons.add_circle_outline, "Make Payment", 2),
                title: SizedBox.shrink(),
            ),
            BottomNavigationBarItem(
                icon: _buildIcon( Icons.person_outline, "My Account", 3),
                title: SizedBox.shrink(),
            ),
          ]
        ),
        drawer: _currentIndex == 0 || _currentIndex == 3 ? Drawer(  // check to show drawer on particular screen
          child: ListView(
            padding: const EdgeInsets.all(0.0),
            children: <Widget>[
              UserAccountsDrawerHeader(
                  accountName: Text("Mohammad Gayasuddin"),
                  accountEmail: Text("ladla8602@gmail.com"),
                  currentAccountPicture: CircleAvatar(
                    backgroundColor: Colors.white70,
                  )),
              ListTile(
                  title: Text('Login'),
                  trailing: Icon(Icons.lock),
                  onTap: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => LoginScreen(),
                      ),
                    );
                  }),
              ListTile(
                  title: Text('Sign Up'),
                  trailing: Icon(Icons.add_circle_outline),
                  onTap: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => RegisterScreen(),
                      ),
                    );
                  })
            ],
          ),
        ) : PreferredSize(
          child: Container(),
          preferredSize: Size(0.0, 0.0),
        ),
      ),
    );
  }
}

持续的底部导航栏抖动

2 个答案: