在列表视图中滚动时，项目状态会发生变化

问题描述

我有一个列表视图，其中包含 ExpansionPanelList ，每个 ExpansionPanel 都有一个按钮..选中/取消选中它会改变颜色.例如，当我取消选中列表中的前三个，然后向下滚动到列表的末尾，然后再次出现时，我看到未选中的项再次被选中.

I have list view, which contains ExpansionPanelList and each ExpansionPanel has a button .. checking/unchecking it will change a color. When I for example uncheck the first three on the list, then scroll down to the end of the list, then came up again I see the unchecked items being checked again.

这是我的代码:

new Expanded(
                child: new ListView(
                    padding: EdgeInsets.only(
                        right: 20.0, left: 20.0 /*, bottom: 20.0*/),
                    children: interestsMap['interests']
                        .map<Widget>((i) => new InterestsItem.fromJson(i))
                        .toList()),
              ),

，列表为:

class _InterestsItemState extends State<InterestsItem> {
final String id;
final String name;
final String icon;
final String description;
bool isExpanded = false;
var color = Colors.white;
var toggle = false;
bool clicked = true;

_InterestsItemState(this.id, this.name, this.icon, this.description);

@override
Widget build(BuildContext context) {
return this.clicked
    ? new CustomExpansionPanelList(
        expansionCallback: (int index, bool isExpanded) {
          setState(() {
            this.isExpanded = !this.isExpanded;
          });
        },
        children: [
          new ExpansionPanel(
            headerBuilder: (BuildContext context, bool isExpanded) {
              return new Container(
                child: new Row(
                  children: <Widget>[
                    Icon(
                      FontAwesomeIcons.createDoc[icon],
                      color: Colors.white,
                      size: 15.0,
                    ),
                    new Padding(
                      padding: EdgeInsets.only(left: 5.0, right: 7.0),
                      child: Text(
                        name,
                        style: TextStyle(color: Colors.white),
                      ),
                    ),
                    new Spacer(),
                    new IconButton(
                        icon: new Icon(
                          CustomFont.tick_2,
                          color: this.color,
                        ),
                        onPressed: () {
                          setState(() {
                            interestsArray.remove(name);
                            this.setState(() => this.clicked =
                                !this.clicked /*color = Colors.black*/);
                          });
                        }),
                  ],
                ),
              );
            },
            isExpanded: this.isExpanded,
            body: new Center(
              child: new Padding(
                padding: EdgeInsets.all(10.0),
                child: Text(description),
              ),
            ),
          ),
        ],
      )
    : new UnclickedExpansionPanelList(
        expansionCallback: (int index, bool isExpanded) {
          setState(() {
            /*interestsList[index].isExpanded =
      !interestsList[index].isExpanded;*/
            this.isExpanded = !this.isExpanded;
          });
        },
        children: [
          new ExpansionPanel(
            headerBuilder: (BuildContext context, bool isExpanded) {
              return new Container(
                child: new Row(
                  children: <Widget>[
                    Icon(
                      FontAwesomeIcons.createDoc[icon],
                      color: Color(0xff1A1824),
                      size: 15.0,

                    ),
                    new Padding(
                      padding: EdgeInsets.only(left: 5.0, right: 7.0),
                      child: Text(
                        name,
                        style: TextStyle(color: Color(0xff1A1824)),
                      ),
                    ),
                    new Spacer(),
                    new IconButton(
                        icon: new Image.asset(
                          'assets/Oval.png',
                          width: 22.0,
                          height: 22.0,
                        ),
                        onPressed: () {
                          setState(() {
                            interestsArray.add(name);
                            this.setState(() => this.clicked =
                                !this.clicked /*color = Colors.black*/);
                          });
                        }),
                  ],
                ),
              );
            },
            isExpanded: this.isExpanded,
            body: new Center(
              child: new Padding(
                padding: EdgeInsets.all(10.0),
                child: Text(description),
              ),
            ),
          ),
        ],
      );
 }
}

class InterestsItem extends StatefulWidget {
final String id;
final String name;
final String icon;
final String description;

InterestsItem(this.id, this.name, this.icon, this.description, {Key key})
  : super(key: key);

InterestsItem.fromJson(data)
  : this.id = data["id"],
    this.name = data["name"],
    this.icon = data["icon"],
    this.description = data["description"];

@override
_InterestsItemState createState() =>
  _InterestsItemState(this.id, this.name, this.icon, this.description);
}

为什么会这样以及如何解决?

why is this happening and how to solve it?

推荐答案

@lamatatListView项目是按需构建的，保存状态的最简单方法是使用 AutomaticKeepAliveClientMixin

@lamatat Hi, ListView items are built on demand and the easiest way to save the state is to use AutomaticKeepAliveClientMixin

您将需要进行以下更改:

You will need to make following changes:

• 将AutomaticKeepAliveClientMixin添加到您的子类中:

class _InterestsItemState extends State<InterestsItem> with AutomaticKeepAliveClientMixin<InterestsItem> {

• 在您的子类中实现wantKeepAlive:

@override
bool get wantKeepAlive => true;

• 在您的构建窗口小部件中调用super.build:

@override
Widget build(BuildContext context) {
  super.build(context);
  return this.clicked....(

祝你好运！

这篇关于在列表视图中滚动时，项目状态会发生变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！