我有一个可点击的小部件列表[即MarkWidget],当小部件被点击时,小部件的状态就会改变.但是,当列表滚动到底部并回滚到顶部时,所有小部件的状态都将重置为默认状态.
滚动后,如何停止/强制Flutter 以不重新绘制列表中的现有小部件?
例如: 如果我点击Item 1 is colored颜色 从绿色变为红色,但是如果滚动到底部并回滚到顶部,Item 1的 colored颜色 就会变回绿色. 我需要项目1的 colored颜色 是红色的,如果它被点击,而不是滚动.
以下是代码:
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,
),
),
),
);
}
}