【问题标题】:How to add Drawer for SliverAppBar如何为 SliverAppBar 添加抽屉
【发布时间】:2019-05-27 23:15:19
【问题描述】:

这是我的代码,复制自here:

SliverAppBar(
  expandedHeight: 150.0,
  flexibleSpace: const FlexibleSpaceBar(
      title: Text('Available seats'),
    ),
    actions: < Widget > [
      IconButton(
        icon: const Icon(Icons.add_circle),
          tooltip: 'Add new entry',
          onPressed: () { /* ... */ },
      ),
    ]
)

但我需要添加一个Drawer。我该怎么做?
我正在尝试在 Flutter 中重建我的应用程序。
Converting java android app to flutter

我替换了图标,但如何创建Drawer

leading: IconButton(icon: Icon( Icons.menu ),onPressed: ()=>{},)

我的完整代码

@override
  Widget build(BuildContext context) {

  return NestedScrollView(
      headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
        return <Widget>[
          SliverAppBar(
            leading: IconButton(
              icon: Icon(Icons.menu),
              onPressed: () => {},
            ),
            actions: <Widget>[
              IconButton(
                onPressed: () => {},
                icon: Icon(Icons.shopping_cart),
              )
            ],
            expandedHeight: 200.0,
            floating: false,
            pinned: true,
            flexibleSpace: FlexibleSpaceBar(
                centerTitle: true,
                title: Text("My Pet Shop",
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 16.0,
                    )),
                background: Image.network(
                  "https://firebasestorage.googleapis.com/v0/b/my-pet-world.appspot.com/o/images%2Fbannerads%2FxTmAblJI7fMF1l0nUa1gM32Kh9z1%2F734rm6w7bxznp%2FPETWORLD-HOME-SLIDER-KITTENS.webp?alt=media&token=cf7f48bb-6621-47b3-b3f8-d8b36fa89715",
                  fit: BoxFit.cover,
                )),
          ),
        ];
      },
      body: Container(
        margin: EdgeInsets.only(top: 0),
        child: Column(
          children: <Widget>[
            Expanded(
              //getHomePageWidget()
              child: ListView(
                padding: EdgeInsets.all(0.0),
                children: <Widget>[getHomePageWidget()],
              ),
            )
          ],
        ),
      ));
 }

【问题讨论】:

  • 您不需要在 SliverAppBar 中手动添加菜单图标。当您将 Scaffold 作为其祖先时,菜单图标会神奇地出现。
  • 你能用我的新代码更新一下吗
  • 在我的新代码中添加脚手架的位置?
  • 我刚做了。你的正文代码有很多不必要的代码,所以我把它们都去掉了,剩下的是 getHomePageWidget()。

标签: dart flutter flutter-layout flutter-sliver


【解决方案1】:

抽屉是 Scaffold 的属性。设置抽屉属性后,菜单图标将自动出现在 SliverAppBar 中。

在你的构建方法中返回这个,你会得到你想要的。

  return Scaffold(
    body: CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
          expandedHeight: 200.0,
          flexibleSpace: const FlexibleSpaceBar(
            title: Text('Available seats'),
          ),
          actions: <Widget>[
            IconButton(
              icon: const Icon(Icons.add_circle),
              tooltip: 'Add new entry',
              onPressed: () {},
            ),
          ],
        ),
        SliverList(
          delegate: SliverChildListDelegate([
            getHomePageWidget(),
          ]),
        ),
      ],
    ),
    drawer: Drawer(),
  );

注意:如果CustomScrollView 上方的树中有多个Scaffold,则Drawer 应位于最底部的Scaffold

【讨论】:

  • @Midhilaj 抱歉,我的代码有一些错误。我刚刚编辑了它,现在它应该可以工作了!
  • 让我检查一下
  • @Midhilaj 告诉我进展如何
  • @Midhilaj 你是什么意思?
  • 晚上 11 点 48 分你很棒,你帮了我,我的朋友没有帮我
猜你喜欢
  • 2021-12-25
  • 2020-09-26
  • 1970-01-01
  • 2020-03-12
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-07-05
  • 2015-10-04
相关资源
最近更新 更多