Question

我是一名初学者，尝试使用Flutter进行编码，因此，如果解释或建议易于理解，将会很有帮助。 :)预先感谢！

[目标]

我已经创建了两个文件夹，其中一个用于可以在多个地方使用的零件，而不必每次都创建它们。另一个包含具有不同页面的文件（我希望将它们分开）。

[问题]

我目前正在尝试使用侧面抽屉进行导航，并想转到其他页面，但是它不起作用，并且我得到了黑色的空白:(请帮助...

在这种情况下，我应该使用“ routes：”参数还是应该使用MaterialPageRoute（）或还有其他建议？

我为发布整个代码表示歉意，但我认为最好理解整个上下文。如果有什么看起来很奇怪或有更好的主意。请让我知道！

[抽屉代码]

class AppDrawer extends StatefulWidget {
  @override
  _AppDrawerState createState() => _AppDrawerState();
}

class _AppDrawerState extends State<AppDrawer> {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        children: <Widget>[
          UserAccountsDrawerHeader(
              accountName: Text('John T.'),
              accountEmail: Text('*********@gmail.com'),
              currentAccountPicture: GestureDetector(
                  child: CircleAvatar(
                      backgroundColor: Colors.grey,
                      child: Icon(Icons.person, color: Colors.white))),
              decoration: BoxDecoration(color: Colors.red)),
          ListTile(
            leading: Icon(Icons.home, color: Colors.redAccent),
            title: Text('Home'),
            trailing: null,
            onTap: () {
              Navigator.of(context).pop();
              Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (BuildContext context) {
                    Home();
                  },
                ),
              );
            },
          ),
          ListTile(
            leading: Icon(Icons.person, color: Colors.redAccent),
            title: Text('My Acount'),
            trailing: null,
            onTap: () {
              Navigator.of(context).pop();
              Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (BuildContext context) {
                    MyAccount();
                  },
                ),
              );
            },
          ),
          ListTile(
            leading: Icon(Icons.fitness_center, color: Colors.redAccent),
            title: Text('My Workout'),
            trailing: null,
            onTap: () {},
          ),
          ListTile(
            leading: Icon(Icons.cancel, color: Colors.redAccent),
            title: Text('My Nutrition'),
            trailing: null,
            onTap: () {},
          ),
          Divider(color: Colors.red, indent: 20.0),
          ListTile(
            leading: Icon(Icons.settings, color: Colors.blue),
            title: Text('Settings'),
            trailing: null,
            onTap: () {},
          ),
          ListTile(
            leading: Icon(Icons.help, color: Colors.green),
            title: Text('About'),
            trailing: null,
            onTap: () {},
          ),
        ],
      ),
    );
  }
}

[主页代码]

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 5.0,
        title: Text('Home'),
        backgroundColor: Colors.red,
        centerTitle: true,
      ),
      endDrawer: AppDrawer(),
      body: Container(
        color: Colors.white,
        child: Center(
          child: ListView(
            children: <Widget>[],
          ),
        ),
      ),
    );
  }
}

[我的帐户页面]

class MyAccount extends StatefulWidget {
  final String value;

  MyAccount({Key key, this.value}) : super (key: key);

  @override
  _MyAccountState createState() => _MyAccountState();
}

class _MyAccountState extends State<MyAccount> {
  final TextEditingController _ageFieldController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My Account'),
        centerTitle: true,
        backgroundColor: Colors.blue,
      ),
      endDrawer: AppDrawer(),
      body: Container(
        color: Colors.white,
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                child: Column(
                  children: <Widget>[
                    TextField(
                      controller: _ageFieldController,
                      decoration: InputDecoration(
                        hintText: 'Example: 27',
                      ),
                      autocorrect: true,
                      keyboardType: TextInputType.number,
                    ),
                    Text('${widget.value}')
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

[Main.dart代码]

void main(List<String> args) {
  runApp(Bmi());
}

class Bmi extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'BMI',
      theme: ThemeData(
        primarySwatch: Colors.deepPurple,
      ),
      home: Home(),
    );
  }
}

Answer 1

您需要将新页面返回到导航器的构建器功能。

正确的代码：

 ListTile(
        leading: Icon(Icons.person, color: Colors.redAccent),
        title: Text('My Acount'),
        onTap: () {
          Navigator.push(context,
              MaterialPageRoute(builder: (context) => MyAccount()));
        },
      ),

Answer 2

《材料设计指南》建议在同等重要的站点之间进行导航的抽屉，因此不应使用Navigator.push（），因为它的动画看起来像是线性导航（例如转到下一页，而不是下一页）同样重要。）

以下是与此主题相关的链接：material.io site for Navigation Drawer Component

我总是根据抽屉中当前选择的项目来更新我的身体，就像您使用BottomNavigationBar所做的一样。

其实现类似于以下内容：

return Scaffold(
  drawer: Drawer(),
  body: Stack(
    children: <Widget>[
      Offstage(
        offstage: index != 0,
        child: _buildAccountPage(),
      ),
      Offstage(
        offstage: index != 0,
        child: _buildHomePage(),
      ),
    ],
  ),
);

如何使用Drawer类正确导航到多个页面

2 个答案: