Flutter：如何使buttomNavigationBar的BottomAppBar出现在我拥有的每个屏幕中？

问题描述

我正在使用BottomAppBar而不是BottomNavigationBar小部件。我想使此栏出现在我拥有的每个屏幕中。同样，我不想使用BottomNavigationBar。

bottomNavigationBar: BottomAppBar(
        child: Container(
          height: 60,width: width,child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,children: <Widget>[
              // Home
              MaterialButton(
                onpressed: () {
                  setState(() {
                    currentScreen = HomeScreenWrapper();
                    currentTab = 0;
                  });
                },child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[
                    Icon(
                      Icons.home,color: currentTab == 0 ? primaryColor : Colors.grey,),Text(
                      AppLocalizations.of(context).translate('HOME'),style: TextStyle(
                        color: currentTab == 0 ? primaryColor : Colors.grey,fontSize: 10,],minWidth: width / 5,// Dashboard
              MaterialButton(
                onpressed: () {
                  setState(() {
                    currentScreen = PointScreenWrapper();
                    currentTab = 2;
                  });
                },children: <Widget>[
                    SvgPicture.asset(
                      'assets/images/dashboard.svg',color: currentTab == 2 ? primaryColor : null,// Icon(
                    //   // Icons.show_chart,//   Icons.dashboard,//   //Icons.crop_square,//   color: currentTab == 2 ? primaryColor : Colors.grey,// ),Text(
                      AppLocalizations.of(context).translate('DASHBOARD'),style: TextStyle(
                        color: currentTab == 2 ? primaryColor : Colors.grey,// //Make a dummy space between
              SizedBox(
                width: width / 5,// score
              MaterialButton(
                onpressed: () {
                  setState(() {
                    currentScreen = ChallengeScreen();
                    currentTab = 1;
                  });
                },children: <Widget>[
                    SvgPicture.asset(
                      'assets/images/ranking.svg',color: currentTab == 1 ? primaryColor : Colors.grey,// Icon(
                    //   Icons.star,//   color: currentTab == 1 ? primaryColor : Colors.grey,//   size: 30,Text(
                      AppLocalizations.of(context).translate('rating'),style: TextStyle(
                        color: currentTab == 1 ? primaryColor : Colors.grey,//
              MaterialButton(
                onpressed: () {
                  setState(() {
                    currentScreen = ProfileWrapper();

                    currentTab = 3;
                  });
                },children: <Widget>[
                    SvgPicture.asset(
                      'assets/images/profile.svg',color: currentTab == 3 ? primaryColor : Colors.grey,// Icon(
                    //   Icons.settings,//   color: currentTab == 3 ? primaryColor : Colors.grey,Text(
                      AppLocalizations.of(context).translate('PROFILE'),style: TextStyle(
                        color: currentTab == 3 ? primaryColor : Colors.grey,shape: CircularNotchedRectangle(),

我该怎么做？请给我一些有关此问题的指示。我期待着您的回音。预先谢谢你...

解决方法

您可以在下面复制粘贴运行完整代码
点击PageView与MaterialButton调用bottomTapped时可以使用index 代码段

Widget buildPageView() {
    return PageView(
      controller: pageController,onPageChanged: (index) {
        pageChanged(index);
      },children: <Widget>[
        Red(),Blue(),Yellow(),Green(),],);
  }

  @override
  void initState() {
    super.initState();
  }

  void pageChanged(int index) {
    setState(() {
      currentTab = index;
    });
  }

  void bottomTapped(int index) {
    setState(() {
      currentTab = index;
      pageController.animateToPage(index,duration: Duration(milliseconds: 500),curve: Curves.ease);
    });
  }

工作演示

完整代码

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',theme: ThemeData(
        primarySwatch: Colors.blue,),home: MyHomePage(title: 'Flutter Demo Home Page'),);
  }
}

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

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double width;
  Color primaryColor = Colors.blue;

  int currentTab = 0;

  PageController pageController = PageController(
    initialPage: 0,keepPage: true,);

  Widget buildPageView() {
    return PageView(
      controller: pageController,curve: Curves.ease);
    });
  }

  @override
  Widget build(BuildContext context) {
    width = MediaQuery.of(context).size.width;
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),body: buildPageView(),bottomNavigationBar: BottomAppBar(
        child: Container(
          height: 60,width: width,child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,children: <Widget>[
              // Home
              MaterialButton(
                onPressed: () {
                  bottomTapped(0);
                },child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[
                    Icon(
                      Icons.home,color: currentTab == 0 ? primaryColor : Colors.grey,Text(
                      'HOME',style: TextStyle(
                        color: currentTab == 0 ? primaryColor : Colors.grey,fontSize: 10,minWidth: width / 5,// Dashboard
              MaterialButton(
                onPressed: () {
                  bottomTapped(1);
                },children: <Widget>[
                    Image.network(
                      'https://picsum.photos/20/20?image=9',color: currentTab == 1 ? primaryColor : null,// Icon(
                    //   // Icons.show_chart,//   Icons.dashboard,//   //Icons.crop_square,//   color: currentTab == 2 ? primaryColor : Colors.grey,// ),Text(
                      'DASHBOARD',style: TextStyle(
                        color: currentTab == 1 ? primaryColor : Colors.grey,// //Make a dummy space between
              SizedBox(
                width: width / 10,// Score
              MaterialButton(
                onPressed: () {
                  bottomTapped(2);
                },color: currentTab == 2 ? primaryColor : Colors.grey,// Icon(
                    //   Icons.star,//   color: currentTab == 1 ? primaryColor : Colors.grey,//   size: 30,Text(
                      'RATING',style: TextStyle(
                        color: currentTab == 2 ? primaryColor : Colors.grey,//
              MaterialButton(
                onPressed: () {
                  bottomTapped(3);
                },color: currentTab == 3 ? primaryColor : Colors.grey,// Icon(
                    //   Icons.settings,//   color: currentTab == 3 ? primaryColor : Colors.grey,Text(
                      'PROFILE',style: TextStyle(
                        color: currentTab == 3 ? primaryColor : Colors.grey,shape: CircularNotchedRectangle(),);
  }
}

class Red extends StatefulWidget {
  @override
  _RedState createState() => _RedState();
}

class _RedState extends State<Red> {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,);
  }
}

class Blue extends StatefulWidget {
  @override
  _BlueState createState() => _BlueState();
}

class _BlueState extends State<Blue> {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blueAccent,);
  }
}

class Yellow extends StatefulWidget {
  @override
  _YellowState createState() => _YellowState();
}

class _YellowState extends State<Yellow> {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.yellowAccent,);
  }
}

class Green extends StatefulWidget {
  @override
  _GreenState createState() => _GreenState();
}

class _GreenState extends State<Green> {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.greenAccent,);
  }
}

@Eren是正确的，您不能在每个屏幕上都使用相同的窗口部件，因为它是Scaffold字段的范围，所以您不能在每个屏幕上使用相同的窗口部件，但是您可以为每个Page使用Common bottom-sheet类并传递该页面上下文。

一个好的做法是创建一个小部件并在每个支架中使用它。这是我在应用程序中使用的示例代码

import 'package:flutter/material.dart';

class AppBottomNavigationBar extends StatelessWidget {
  final int selectedIndex;
  const AppBottomNavigationBar({
    Key key,@required this.selectedIndex,}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      type: BottomNavigationBarType.fixed,items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(Icons.home),title: Text('Home'),BottomNavigationBarItem(
          icon: Icon(Icons.mail_outline),title: Text('Messages'),BottomNavigationBarItem(
          icon: Icon(Icons.explore),title: Text('Explore'),BottomNavigationBarItem(
          icon: Icon(Icons.person_outline),title: Text('Profile'),currentIndex: selectedIndex,onTap: (int index) {
        if (selectedIndex == index) {
          return;
        }
        if (index == 0) {
          Navigator.of(context).pushReplacementNamed('/home');
        } else if (index == 1) {
          Navigator.of(context).pushReplacementNamed('/messages');
        } else if (index == 2) {
          Navigator.of(context).pushReplacementNamed('/explore');
        } else if (index == 3) {
          Navigator.of(context).pushReplacementNamed('/profile');
        }
      },);
  }
}

bottomnavigationview bottomnavigationview bottomnavigationview dart navigation navigation screen screen

Flutter：如何使buttomNavigationBar的BottomAppBar出现在我拥有的每个屏幕中？

问题描述

解决方法

相关问答