我有一个可点击的小部件列表[即 MarkWidget],当点击小部件时,小部件的状态会发生变化。但是当列表滚动到底部并滚动回顶部时,所有小部件的状态都会重置为默认值。
如何停止/强制 flutter 在滚动后不重绘列表中的现有小部件?
例如: 如果我单击 ITEM 1,颜色会从绿色变为红色,但如果滚动到底部并滚动回顶部,则 ITEM 1 颜色会变回绿色。 如果在不考虑滚动的情况下单击它,我需要 ITEM 1 颜色为红色。
这里是代码:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomeScreen(),
theme: ThemeData(
platform: TargetPlatform.android,
),
);
}
}
class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
List<Widget> _widgetList = List.generate(
30,
(index) => MarkWidget(
key: Key('ITEM $index'),
title: 'ITEM $index',
),
);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("My List"),
),
body: ListView.builder(
key: new Key("my_list"), //new
itemBuilder: (BuildContext context, int index) {
return _widgetList[index];
},
itemCount: _widgetList.length,
),
);
}
}
class MarkWidget extends StatefulWidget {
final String title;
const MarkWidget({Key key, this.title}) : super(key: key);
@override
_MarkWidgetState createState() => _MarkWidgetState();
}
class _MarkWidgetState extends State<MarkWidget> {
bool _checked = false;
@override
Widget build(BuildContext context) {
return FlatButton(
onPressed: () {
setState(() {
_checked = !_checked;
});
},
child: Container(
padding: EdgeInsets.all(10.0),
margin: EdgeInsets.all(10.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(5.0),
),
color: _checked ? Colors.red : Colors.green,
),
child: Text(
"${widget.title}",
style: TextStyle(
color: Colors.white,
decoration: _checked ? TextDecoration.lineThrough : TextDecoration.none,
),
),
),
);
}
}
最佳答案
将 AutomaticKeepAliveClientMixin
mixin 添加到 StatefulWidget
(Item 小部件)的 State
中,覆盖 wantKeepAlive
方法并返回 true
。
class _MarkWidgetState extends State<MarkWidget> with AutomaticKeepAliveClientMixin{
...
@override
Widget build(BuildContext context) {
// call this method.
super.build(context);
...
}
@override
bool get wantKeepAlive => true;
}
更多信息在这里:https://docs.flutter.io/flutter/widgets/AutomaticKeepAliveClientMixin-mixin.html
https://stackoverflow.com/questions/55699781/
相关文章:
dart - 如何在继续 flutter 之前等待 future 的对象?
dart - ListView.builder 在 flutter 中逐项滚动
dart - Flutter - 关闭小部件时 BLoC 流实例会导致内存泄漏吗?
firebase - 持久化用户身份验证 Flutter Firebase
flutter - 使用 FadeInImage Flutter 正确拟合图像
dart - 如何在 Flutter 中清除 AnimatedList 中的所有项目
flutter - Hummingbird(现在是 Flutter for web)计划发布。我应该