Question

我是新手，我不确定如何构建我的新App。

我有一个抽屉，可以显示不同的屏幕（作为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

我不确定我是否正确理解了您的问题。如果要在按下抽屉项目时打开不同的屏幕，可以使用$(document).ready(function() { $(".page-scroll").click(function() { $(".page-scroll").removeClass("active"); //removes current active class $(this).addClass("active"); // adds active class to specific click }); }); $(window).scroll(function() { var selectedDiv = $(".page-scroll:first"); var topOffset = 1; var windowTop = $(window).scrollTop(); $(".page-scroll").each(function() { var id = $(this).attr("href"); var offset = ($(id).offset() || { top: 0 }).top - windowTop; if (offset < 1 && (topOffset == 1 || offset > topOffset)) { topOffset = offset; selectedDiv = $(this); } }); if (!selectedDiv.hasClass("active")) { $(".page-scroll").removeClass("active"); selectedDiv.addClass("active"); } });和ListTile属性，也可以导航到屏幕（使用onTap）。

您可以使用与片段相对应的Navigator。参见this。

Answer 2

我假设您正在Navigator.push()中使用Navigator.pushNamed()或Drawer推送屏幕，并且您推送的新屏幕是小部件。如果这些新屏幕是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(),
    );
  }
}

希望这会有所帮助。

Flutter Drawer在屏幕中自定义AppBar

2 个答案: