Flutter：解决首页跳子页面时仍显示底部导航栏问题

问题描述

Flutter做的app，底部有底部导航栏。点击页面上部跳转到新的页面后，底部导航栏仍然显示。

解决方案

页面跳转的时候，传入主界面的context。

Navigator.push(widget.parentContext,
    MaterialPageRoute(builder: (context) => AddBlogPage()));

关键代码： 1、主页面初始化子页面的时候传入context

class _HomeWidgetState extends State {
  final bottomNavigationColor = Colors.blue;
  int _currentIndex = 0;
  List list = [];

  @override
  void initState() {
    super.initState();
    list..add(BlogListPage(context))..add(MinePage());
  }
}

2、子页面初始化方法中增加传入context的地方，跳转的时候使用主页面的context

class BlogListPage extends StatelessWidget {
  final parentContext;

  BlogListPage(this.parentContext);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '花生皮博客',
      home: BlogListWidget(this.parentContext),
    );
  }
}

class BlogListWidget extends StatefulWidget {
  final parentContext;

  BlogListWidget(this.parentContext);

  @override
  createState() => new _BlogListState();
}

class _BlogListState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("博客"),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: gotoAddBlogPage,
        child: Icon(Icons.add),
      ),
    );
  }

  gotoAddBlogPage() {
    Navigator.push(widget.parentContext,
        MaterialPageRoute(builder: (context) => AddBlogPage()));
  }
}

完整代码

https://gitee.com/hspbc/flutter_botttom_navigation.git

关于我

厦门大学计算机专业|华为八年高级工程师 十年软件开发经验，5年编程培训教学经验 目前从事编程教学，软件开发指导，软件类毕业设计指导。