Question

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

这是我的代码：

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);
}

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

Answer 1

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

您将需要进行以下更改：

将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....(

祝你好运！

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

1 个答案: