[英]How to minimize SliverList by clicking button in SliverAppbar flutter
How can I minimize Sliver list automatically by clicking on button in SliverAppBar如何通过单击 SliverAppBar 中的按钮自动最小化 Sliver 列表
I have minimize button in SliverAppbar, and SliverList with multiple ListTiles.我在 SliverAppbar 中有最小化按钮,在 SliverList 中有多个 ListTiles。 I want to minimize animatedly all list item by clicking on this minimize button我想通过单击此最小化按钮以动画方式最小化所有列表项
here is code for main class这是主要代码 class
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: [
const CustomTitleAppbar(
title: 'Sliver List',
),
CustomSliverListView(),
],
),
);
}
}
code for SliverAppbar Containing minimize button包含最小化按钮的 SliverAppbar 代码
class CustomTitleAppbar extends StatefulWidget {
const CustomTitleAppbar({Key? key, required this.title}) : super(key: key);
final String title;
@override
_CustomTitleAppbarState createState() => _CustomTitleAppbarState();
}
class _CustomTitleAppbarState extends State<CustomTitleAppbar> {
@override
Widget build(BuildContext context) {
return SliverAppBar(
title: Text(widget.title),
// centerTitle: true,
pinned: true,
snap: false,
backgroundColor: Colors.lightGreen,
actions: [
IconButton(
onPressed: () {
// Here i want to minimize sliver list
},
icon: const Icon(Icons.minimize_rounded),
),
],
);
}
}
code for Sliver List with multiple items包含多个项目的 Sliver List 的代码
class CustomSliverListView extends StatelessWidget {
CustomSliverListView({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return SliverList(
delegate: SliverChildListDelegate(
List.generate(
5,
(index) => ListTile(
leading: CircleAvatar(
child: Text('${index + 1}'),
backgroundColor: Colors.lightGreen,
foregroundColor: Colors.white,
),
title: Text('Row ${index + 1}'),
subtitle: Text('Subtitle ${index + 1}'),
trailing: const Icon(Icons.star_border_outlined),
),
),
),
);
}
}
I am new in flutter, So thanks for reading.我是 flutter 的新人,感谢阅读。
Using callBack and passing bool on CustomSliverListView
.在CustomSliverListView
上使用 callBack 和传递 bool。
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool _isOpen = true;
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: [
CustomTitleAppbar(
title: 'Sliver List',
onCallBack: () {
setState(() {
_isOpen = !_isOpen;
});
},
),
CustomSliverListView(
isOpen: _isOpen,
),
],
),
);
}
}
class CustomTitleAppbar extends StatefulWidget {
final Function onCallBack;
const CustomTitleAppbar({
Key? key,
required this.title,
required this.onCallBack,
}) : super(key: key);
final String title;
@override
_CustomTitleAppbarState createState() => _CustomTitleAppbarState();
}
class _CustomTitleAppbarState extends State<CustomTitleAppbar> {
@override
Widget build(BuildContext context) {
return SliverAppBar(
title: Text(widget.title),
// centerTitle: true,
pinned: true,
snap: false,
backgroundColor: Colors.lightGreen,
actions: [
IconButton(
onPressed: () {
// Here i want to minimize sliver list
widget.onCallBack();
},
icon: const Icon(Icons.minimize_rounded),
),
],
);
}
}
class CustomSliverListView extends StatelessWidget {
final bool isOpen;
const CustomSliverListView({
Key? key,
required this.isOpen,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return SliverList(
delegate: SliverChildListDelegate(
List.generate(
isOpen ? 5 : 0,
(index) => ListTile(
leading: CircleAvatar(
child: Text('${index + 1}'),
backgroundColor: Colors.lightGreen,
foregroundColor: Colors.white,
),
title: Text('Row ${index + 1}'),
subtitle: Text('Subtitle ${index + 1}'),
trailing: const Icon(Icons.star_border_outlined),
),
),
),
);
}
}
Does it solve your question?它能解决你的问题吗?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.