在颤动中仅导航一个子小部件答案

【问题标题】：Navigating only one child widget in flutter在颤动中仅导航一个子小部件
【发布时间】：2021-06-16 18:33:21
【问题描述】：

我有一个应用程序页眉和页脚，我想保持不变，定义为：

class MainPage extends StatelessWidget {
    @override
    Widget build(BuildContext context){
        return Column(
        children: [
        Container(child: Header()),
        Container(child: Page1()),
        Container(child: Footer()),
        ]);
    }
}

第 1 页：

class Page1 extends StatelessWidget {
    @override
    Widget build(BuildContext context){
        return Center(
           child: GestureDetector( 
               child: Text("String"),
               onTap: () => Navigator.of(context)
            .push(MaterialPageRoute(builder: (BuildContext context) =>Page2())))),
    }
}

我希望能够使用 Navigator 推送或弹出小部件。以前，我会使用 switch case 和自定义按钮在页面之间导航，但要求是在 android 上使用后退按钮/手势，所以我必须使用导航器。但是当我使用导航器时，整个页面变为 Page2，并且我失去了页眉和页脚。

【问题讨论】：

标签： flutter dart

【解决方案1】：

您可以让您的 MainPage 小部件采用子参数

class MainPage extends StatelessWidget {
final Widget child;

MainPage({this.child});

    @override
    Widget build(BuildContext context){
        return Column(
        children: [
        Container(child: Header()),
        Container(child: child),
        Container(child: Footer()),
        ]);
    }
}

class Page1 extends StatelessWidget {
    @override
    Widget build(BuildContext context){
        return Center(
           child: GestureDetector( 
               child: Text("String"),
               onTap: () => Navigator.of(context)
            .push(MaterialPageRoute(
            builder: (BuildContext context) => 
             MainPage(child: Page2()))))),
    }
}

这样你就可以传入要显示的当前页面。这是最简单的方法，但它并没有绕过不必要的页眉和页脚重建。

另一种选择是使用诸如 ValueListenableBuilder 或带有 ChangeNotifierProvider 的 Provider 之类的东西来仅重建中间区域，具体取决于您愿意去的复杂程度。

【讨论】：