当前位置:  开发笔记 > 编程语言 > 正文

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

如何解决《FlutterNestedScrollView/SliverAppBar-不需要的底边距》经验,为你挑选了1个好方法。

要使用导航抽屉构建应用栏:

@override
  Widget build(BuildContext context) {
    var drawerOptions = [];
    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 [
              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: [
              new UserAccountsDrawerHeader(
                  accountName: new Text("Go??"), accountEmail: null),
              new Column(children: drawerOptions)
            ],
          ),
        ));

结果:

因此,在身体上方有多余的白色边距。如果我尝试使用常规应用栏,则可以这样:

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: [
            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
  ];

小智.. 5

我使用嵌套的滚动视图面临着同样的问题。我使用网格视图作为正文并将其填充设置为0摆脱了空间

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

因此,无论您要从此方法返回哪种小部件,都请_getDrawerItemWidget(_selectedDrawerIndex)尝试向其添加填充。



1> 小智..:

我使用嵌套的滚动视图面临着同样的问题。我使用网格视图作为正文并将其填充设置为0摆脱了空间

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

因此,无论您要从此方法返回哪种小部件,都请_getDrawerItemWidget(_selectedDrawerIndex)尝试向其添加填充。

推荐阅读
oDavid_仔o_880
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有