如何为 SliverAppBar 添加抽屉
How to add Drawer for SliverAppBar
这是我的代码,复制自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中。
Return 这在你的构建方法中,你会得到你想要的。
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
这是我的代码,复制自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中。
Return 这在你的构建方法中,你会得到你想要的。
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