Flutter NestedScrollView/SliverAppBar - 不需要的底部边距答案

【问题标题】：Flutter NestedScrollView/SliverAppBar - unwanted bottom marginFlutter NestedScrollView/SliverAppBar - 不需要的底部边距
【发布时间】：2019-02-06 12:06:13
【问题描述】：

使用导航抽屉构建应用栏：

@override
  Widget build(BuildContext context) {
    var drawerOptions = <Widget>[];
    for (var i = 0; i < widget.drawerItems.length; i++) {
      var d = widget.drawerItems[i];
      drawerOptions.add(new ListTile(
        leading: new Icon(d.icon),
        title: new Text(d.title),
        selected: i == _selectedDrawerIndex,
        onTap: () => _onSelectItem(i),
      ));
    }
    drawerOptions.add(
        new RaisedButton(onPressed: () => {}, child: new Text("Ustawienia")));

    return new Scaffold(
        body: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
              SliverAppBar(
                expandedHeight: 130.0,
                floating: false,
                pinned: true,
                flexibleSpace: FlexibleSpaceBar(
                  title:
                      new Text(widget.drawerItems[_selectedDrawerIndex].title),
                ),
              ),
            ];
          },
          body: _getDrawerItemWidget(_selectedDrawerIndex),
        ),
        drawer: new Drawer(
          child: new Column(
            children: <Widget>[
              new UserAccountsDrawerHeader(
                  accountName: new Text("Gość"), accountEmail: null),
              new Column(children: drawerOptions)
            ],
          ),
        ));

结果：

所以在正文上方有不需要的白边。如果我尝试使用常规的 appbar，这样：

return new Scaffold(
      appBar: new AppBar(
        // here we display the title corresponding to the fragment
        // you can instead choose to have a static title
        title: new Text(widget.drawerItems[_selectedDrawerIndex].title),
      ),
      drawer: new Drawer(
        child: new Column(
          children: <Widget>[
            new UserAccountsDrawerHeader(
                accountName: new Text("Gość"), accountEmail: null),
            new Column(children: drawerOptions)
          ],
        ),
      ),
      body: _getDrawerItemWidget(_selectedDrawerIndex),
    );

结果很好，没有多余的余量：

如何在展开模式下移除不需要的额外边距并将标题左对齐（应该放在汉堡菜单指示器下方）。

DrawerItem 类定义：

class DrawerItem {
  String title;
  IconData icon;

  DrawerItem(this.title, this.icon);
}

drawerItems定义如下：

final drawerItems = [
    new DrawerItem("Option1", Icons.list),
    new DrawerItem("Option2", Icons.event_note),
    new DrawerItem("Option3", Icons.account_balance),
   //... etc
  ];

【问题讨论】：

您是否尝试过降低展开高度？如果您设置为一个常数值（例如 130.0），它会在完全展开时始终使用该空间。
展开高度无关紧要。它只设置我可以扩展多少。展开时，总会有额外的空白。
我明白了，但是如果你的标题只有 100 像素，那么完全展开后剩余的 30.0 将是一个空白空间。即使扩展高度较小也会发生这种情况吗？
是的，即使扩展较少，也会有额外的空间，当向上滚动列表时，扩展减少（应该如此），并在屏幕截图上使用白色不需要的边距。当工具栏完全折叠并且我继续滚动列表时，可以隐藏空白区域，然后我可以滚动列表本身以查看下一个项目
您是否尝试将ListTile 内容填充属性设置为零？

标签： dart flutter android-collapsingtoolbarlayout margins

【解决方案1】：

我在嵌套滚动视图中遇到了同样的问题。我使用网格视图作为主体并将其填充设置为 0 摆脱了空间

GridView.builder(
   padding: EdgeInsets.only(top: 0),

所以无论你从这个方法_getDrawerItemWidget(_selectedDrawerIndex)返回什么小部件，尝试添加填充。

【讨论】：

【解决方案2】：

Widget _getDrawerItemWidget(){
  return MediaQuery.removePadding(
    context: context,
    removeTop: true,
    child: ListView.builder(
     .......
    )
  );
}

【讨论】：