Flutter 3.10: 推送到子屏幕时保留 BottomNavigationBar

Flutter 3.10: Keep BottomNavigationBar when push to child screen

提问人:Roddy Andrade 提问时间:11/14/2023 更新时间:11/14/2023 访问量:43

问:

我的问题既简单又复杂,我有 4 个屏幕,ABCD,在屏幕 A 中我有一个将我重定向到 Screen2 的 TextButton,情况是不再显示 BottomNavigationBar,在这种情况下是一个示例,但万一除了屏幕 A 之外,其他人也有类似的情况......最好的方法是什么,如果问题可以在本地正式解决,我不想安装软件包。我在下面附上我的代码:

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreen();
}

class _HomeScreen extends State<HomeScreen> {
  int _currentIndex = 0;

  final List<Widget> _screens = [
    HomePage(),
    Text('2'),
    Text('3'),
    Text('4'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBarHomePage(callback: _onTabTapped),
      appBar: AppBar(
        elevation: 0,
        title: const Text('Player', style: TextStyle(color: Colors.black)),
        backgroundColor: Colors.white,
        actions: const [
          SizedBox(
            width: 20,
          ),
          Padding(
            padding: EdgeInsets.only(right: 10),
            child: Icon(
              Icons.notifications,
              color: Colors.black,
            ),
          )
        ],
      ),
      body: _screens[_currentIndex],
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        backgroundColor: Colors.black,
        child: const Icon(Icons.add),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
  }

  void _onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }
}
class BottomNavigationBarHomePage extends StatefulWidget {
  final Function(int) callback;

  const BottomNavigationBarHomePage({
    super.key,
    required this.callback,
  });

  @override
  State<BottomNavigationBarHomePage> createState() =>
      _BottomNavigationBarHomePageState();
}

class _BottomNavigationBarHomePageState
    extends State<BottomNavigationBarHomePage> {
  @override
  Widget build(BuildContext context) {
    return BottomAppBar(
      height: 50,
      elevation: 10,
      shape: const CircularNotchedRectangle(),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          IconButton(
            icon: const Icon(Icons.home),
            onPressed: () {
              widget.callback(0);
            },
          ),
          IconButton(
            icon: const Icon(Icons.search),
            onPressed: () {
              widget.callback(1);
            },
          ),
          IconButton(
            icon: const Icon(Icons.video_camera_front),
            onPressed: () {
              widget.callback(2);
            },
          ),
          IconButton(
            icon: const Icon(Icons.person),
            onPressed: () {
              widget.callback(3);
            },
          ),
        ],
      ),
    );
  }
}
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.lightBlueAccent,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          Container(
            margin: const EdgeInsets.all(16),
            child: const Center(
              child: Text(
                'Screen 1',
                style: TextStyle(color: Colors.white, fontSize: 20),
              ),
            ),
          ),
          TextButton(
            onPressed: () {
              Navigator.push(
                  context, MaterialPageRoute(builder: (context) => Screen2()));
            },
            child: const Text('Go to next screen'),
          ),
        ],
      ),
    );
  }
}
class Screen2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.lightBlueAccent,
        alignment: Alignment.center,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              margin: const EdgeInsets.all(16),
              child: const Text(
                'Screen 2',
                style: TextStyle(color: Colors.white, fontSize: 20),
              ),
            ),
            TextButton(
              onPressed: () {
                Navigator.pop(context);
              },
              child: const Text('Go back'),
            ),
          ],
        ),
      ),
    );
  }
}

首页 -Screen1 Screen2

切换屏幕时 BottomNavigationBar 重叠

Flutter 底部导航栏

评论

0赞 Akhil George 11/14/2023
这篇文章可以帮助你:stackoverflow.com/a/66404760/15908730

答: 暂无答案