Flutter NestedScrollView/SliverAppBar - 不需要的底部边距
Flutter NestedScrollView/SliverAppBar - unwanted bottom margin
使用导航抽屉构建应用栏:
@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)
],
),
));
结果:
因此 body 上方有多余的白边。如果我尝试使用常规应用栏,则这样:
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 定义:
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
];
我在使用嵌套滚动视图时遇到了同样的问题。我使用网格视图作为正文并将其填充设置为 0 摆脱了 space
GridView.builder(
padding: EdgeInsets.only(top: 0),
因此无论您从该方法返回什么小部件 _getDrawerItemWidget(_selectedDrawerIndex)
,请尝试向其添加填充。
Widget _getDrawerItemWidget(){
return MediaQuery.removePadding(
context: context,
removeTop: true,
child: ListView.builder(
.......
)
);
}
使用导航抽屉构建应用栏:
@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)
],
),
));
结果:
因此 body 上方有多余的白边。如果我尝试使用常规应用栏,则这样:
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 定义:
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
];
我在使用嵌套滚动视图时遇到了同样的问题。我使用网格视图作为正文并将其填充设置为 0 摆脱了 space
GridView.builder(
padding: EdgeInsets.only(top: 0),
因此无论您从该方法返回什么小部件 _getDrawerItemWidget(_selectedDrawerIndex)
,请尝试向其添加填充。
Widget _getDrawerItemWidget(){
return MediaQuery.removePadding(
context: context,
removeTop: true,
child: ListView.builder(
.......
)
);
}