Flutter Drawer 自定义屏幕中的 AppBar

Question

我是 Flutter 的新手，我不确定如何构建我的新应用程序。

我有一个显示不同屏幕的抽屉(作为 Android 开发中的片段样式)，我想为每个屏幕更改 AppBar(添加按钮，甚至将应用栏更改为 sliverAppBar)，但我不知道如何实现这一目标。

class Main extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      theme: new ThemeData(
        primarySwatch: Colors.teal,
      ),
      home: MyDrawer(),
    );
  }
}

在那个抽屉里:

return Scaffold(
  appBar: AppBar(
    title: Text(widget.appDrawerItems[_selectedDrawerIndex].title),
  ),
  drawer: new Drawer(
    child: new ListView(
      children: <Widget>[            
        new Column(children: appDrawerOptions),
        new Divider(),
        new Column(children: configurationDrawerOptions)
      ],
    ),
  ),
  body: _getDrawerItemWidget(_selectedDrawerIndex),
);

你能给我指出正确的方向吗？

Answer 1

我假设您在 Drawer 中使用 Navigator.push() 或 Navigator.pushNamed() 推送屏幕，并且您推送的新屏幕是小部件。如果这些新屏幕是 Scaffolds，而不是 Columns，您可以为它们中的每一个定义 appBar。这是一个例子:

在你的抽屉里，无论你在哪里调用Navigator.pushNamed():

ListTile(
 title: DrawerText(text: 'Second Screen'),
 onTap: () {
   Navigator.pushNamed(context, 'my_second_screen');
 },
),

在你的main中:

void main() {
  runApp(MaterialApp(
    home: MyHomeScreen(title: 'MyHomeScreen'),
    routes: <String, WidgetBuilder>{
      // define the routes
      'my_second_screen': (BuildContext context) => MySecondScreen(),
    },
  ));
}

您要导航到的屏幕 MySecondScreen 看起来像:

class MySecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // This is your custom app bar specific for this screen.
      ),
      body: SecondScreenBody(),
      drawer: MyDrawer(),
    );
  }
}

希望这对您有所帮助。