Flutter - 保留不可见的 gridview 子项
Flutter - keep gridview children that are not visible
我正在构建一个学生选择视图,但是当我滚动网格视图时,数据丢失了
视频示例:https://drive.google.com/file/d/1oB3VQHSfZzZjANC8dNnd4p4TmTIePqBC/view?usp=sharing
我准备使用 addAutomaticKeepAlives 和 addRepaintBoundaries 属性
class StudentCellGridView extends StatelessWidget {
const StudentCellGridView({
Key? key,
this.crossAxisCount = 4,
}) : super(key: key);
final int crossAxisCount;
@override
Widget build(BuildContext context) {
return GridView.builder(
addAutomaticKeepAlives: false,
addRepaintBoundaries: false,
padding: EdgeInsets.only(bottom: defaultPadding),
itemCount: 30,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: crossAxisCount,
mainAxisSpacing: defaultPadding,
),
itemBuilder: (context, index) => StudentCell(),
);
}
}
class _StudentCellState extends State<StudentCell> {
var color = Colors.grey;
@override
Widget build(BuildContext context) {
return Stack(
children: [
TextButton(
style: ButtonStyle(
overlayColor: MaterialStateColor.resolveWith(
(states) => Colors.transparent),
),
onPressed: () {
setState(() {
this.color =
this.color == Colors.grey ? Colors.green : Colors.grey;
});
},
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: defaultPadding),
child: Column(
children: [
SizedBox(
height: 80,
child: ClipRRect(
borderRadius: BorderRadius.circular(8.0),
child: Image.asset("assets/images/Foto.png"),
),
),
Expanded(
child: Container(
child: Center(
child: Text(
"Child name",
maxLines: 3,
style: TextStyle(color: Colors.black),
overflow: TextOverflow.ellipsis,
),
),
),
),
],
),
)),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
width: 20,
height: 20,
decoration: new BoxDecoration(
color: this.color,
shape: BoxShape.circle,
),
),
SizedBox(
width: defaultPadding,
)
],
),
],
);
}
}
如何在名单很长的情况下保留选中的学生
首先你的 GridView.builder() 小部件应该有 addAutomaticKeepAlives: true
.
然后将 AutomaticKeepAliveClientMixin
添加到您的 _StudentCellState 小部件,如下所示:
class _StudentCellState extends State<StudentCell> with AutomaticKeepAliveClientMixin {
var color = Colors.grey;
@override
bool get wantKeepAlive => true;
@override
Widget build(BuildContext context) {
super.build(context);
return Stack(
children: [
//the rest of your code
],
);
}
}
我正在构建一个学生选择视图,但是当我滚动网格视图时,数据丢失了
视频示例:https://drive.google.com/file/d/1oB3VQHSfZzZjANC8dNnd4p4TmTIePqBC/view?usp=sharing
我准备使用 addAutomaticKeepAlives 和 addRepaintBoundaries 属性
class StudentCellGridView extends StatelessWidget {
const StudentCellGridView({
Key? key,
this.crossAxisCount = 4,
}) : super(key: key);
final int crossAxisCount;
@override
Widget build(BuildContext context) {
return GridView.builder(
addAutomaticKeepAlives: false,
addRepaintBoundaries: false,
padding: EdgeInsets.only(bottom: defaultPadding),
itemCount: 30,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: crossAxisCount,
mainAxisSpacing: defaultPadding,
),
itemBuilder: (context, index) => StudentCell(),
);
}
}
class _StudentCellState extends State<StudentCell> {
var color = Colors.grey;
@override
Widget build(BuildContext context) {
return Stack(
children: [
TextButton(
style: ButtonStyle(
overlayColor: MaterialStateColor.resolveWith(
(states) => Colors.transparent),
),
onPressed: () {
setState(() {
this.color =
this.color == Colors.grey ? Colors.green : Colors.grey;
});
},
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: defaultPadding),
child: Column(
children: [
SizedBox(
height: 80,
child: ClipRRect(
borderRadius: BorderRadius.circular(8.0),
child: Image.asset("assets/images/Foto.png"),
),
),
Expanded(
child: Container(
child: Center(
child: Text(
"Child name",
maxLines: 3,
style: TextStyle(color: Colors.black),
overflow: TextOverflow.ellipsis,
),
),
),
),
],
),
)),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
width: 20,
height: 20,
decoration: new BoxDecoration(
color: this.color,
shape: BoxShape.circle,
),
),
SizedBox(
width: defaultPadding,
)
],
),
],
);
}
}
如何在名单很长的情况下保留选中的学生
首先你的 GridView.builder() 小部件应该有 addAutomaticKeepAlives: true
.
然后将 AutomaticKeepAliveClientMixin
添加到您的 _StudentCellState 小部件,如下所示:
class _StudentCellState extends State<StudentCell> with AutomaticKeepAliveClientMixin {
var color = Colors.grey;
@override
bool get wantKeepAlive => true;
@override
Widget build(BuildContext context) {
super.build(context);
return Stack(
children: [
//the rest of your code
],
);
}
}