在flutter中僅導航一個子小部件

Question

我有一個應用程序頁眉和頁腳，我想保持不變，定義為：

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，並且我丟失了頁眉和頁腳。

Answer 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 或 Provider 和 ChangeNotifierProvider 之類的東西來僅重建中間區域，具體取決於您願意去的復雜程度。