如何在 flutter 中添加子视图并处理其导航

Question

我对 flutter 还很陌生。我试图克隆“canva”编辑用户界面。 整个用户界面可以分为两部分，左侧面板和编辑区域。 左侧面板包含多个选项，单击它后。它使用后退按钮导航到相应的子页面。视图仅在左侧面板内更新，因为它是一个子应用程序。编辑区域不受影响。

点击“查看全部”后

这是我创建的基本结构。

Widget build(BuildContext context){
return MaterialApp(
  home: Scaffold(
    body: Row(
      children : [
        Container(
          width : 200,
          child: Leftpanel()
        )
        Expanded(
          child: Rightpanel()
        )
      ]
    )
  )
 );
}

我应该如何在左侧面板上创建带有后退按钮的导航？ 到目前为止我一直在使用 Go-route 包，但不知道如何处理这个子导航。

Answer 1

尝试实现这个静态侧边菜单。

import 'package:flutter/material.dart';

class StaticSideMenu extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Screen'),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: Row(
              mainAxisSize: MainAxisSize.max,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                Flexible(
                  child: StaticDrawer(),
                ),
                Expanded(
                  child: PageView(
                    children: <Widget>[
                      MainContent(1),
                      MainContent(2),
                      MainContent(3),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class MainContent extends StatelessWidget {
  final int indexContent;

  MainContent(this.indexContent);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Text('Content # $indexContent'),
      ),
      color: Colors.black26,
    );
  }
}

class StaticDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        ListTile(title: Text("Menu A"), dense: true),
        ListTile(title: Text("Menu B"), dense: true),
        ListTile(title: Text("Menu C"), dense: true),
        ListTile(title: Text("Menu D"), dense: true),
        ListTile(title: Text("Menu E"), dense: true),
        ListTile(title: Text("Menu F"), dense: true),
        ListTile(title: Text("Menu G"), dense: true),
        ListTile(title: Text("Menu H"), dense: true),
        ListTile(title: Text("Menu I"), dense: true),
        ListTile(title: Text("Menu J"), dense: true),
        ListTile(title: Text("Menu K"), dense: true),
        ListTile(title: Text("Menu L"), dense: true),
        ListTile(title: Text("Menu M"), dense: true),
      ],
    );
  }
}