Question

我使用的ListView的可选项目类似于this example。

ListView中的每个有状态小部件都有一个_selected布尔值来确定其选择状态，该状态在点按该项目时会翻转。

当用户处于选择模式时，应用程序栏中有一个“后退”选项。确定何时按下后退按钮并处理基本的核心逻辑工作正常。我只想在每个单独的列表项上重置_selected标志，以使它们不再显示为选中状态。您可以在包含的gif中看到，一旦按下后退键，ListView项将保持选中状态。

我显然错过了一些非常基本的东西。

潜在的问题是，如何以编程方式触发ListView子项的重置。

编辑：添加了示例代码

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'List selection demo',
      home: new MyHomePage(title: 'List selection demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<String> playerList = [
    "Player 1",
    "Player 2",
    "Player 3",
    "Player 4"
  ];
  List<String> selectedPlayers = [];
  bool longPressFlag = false;

  void longPress() {
    setState(() {
      if (selectedPlayers.isEmpty) {
        longPressFlag = false;
      } else {
        longPressFlag = true;
      }
    });
  }

  void clearSelections(){
    setState(() {
      selectedPlayers.clear();
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
            title: new Text(selectedPlayers.length == 0?widget.title: selectedPlayers.length.toString() + " selected"),
            leading: selectedPlayers.length == 0? null: new IconButton(
                icon: new Icon(Icons.arrow_back),
                onPressed: () {clearSelections();
                })),
        body: ListView.builder(
      itemBuilder: (BuildContext context, int index) {
        return new PlayerItem(
            playerName: playerList[index],
            longPressEnabled: longPressFlag,
            callback: () {
              if (selectedPlayers.contains(playerList[index])) {
                selectedPlayers.remove(playerList[index]);
              } else {
                selectedPlayers.add(playerList[index]);
              }
              longPress();
            });
      },
      itemCount: playerList.length,
    ));
  }
}

class PlayerItem extends StatefulWidget {
  final String playerName;
  final bool longPressEnabled;
  final VoidCallback callback;

  const PlayerItem(
      {Key key, this.playerName, this.longPressEnabled, this.callback})
      : super(key: key);

  @override
  _PlayerItemState createState() => new _PlayerItemState();
}

class _PlayerItemState extends State<PlayerItem> {
  bool selected = false;

  @override
  Widget build(BuildContext context) {
    return new GestureDetector(
        onLongPress: () {
          setState(() {
            selected = !selected;
          });
          widget.callback();
        },
        onTap: () {
          if (widget.longPressEnabled) {
            setState(() {
              selected = !selected;
            });
            widget.callback();
          } else {
            final snackBar = SnackBar(content: Text(widget.playerName + " tapped"));
            Scaffold.of(context).showSnackBar(snackBar);
          }
        },
        child: new Card(
            color: selected ? Colors.grey[300] : Colors.white,
            elevation: selected ? 4.0 : 1.0,
            margin: const EdgeInsets.all(4.0),
            child: new ListTile(
              leading: new CircleAvatar(
                child: new Text(widget.playerName.substring(0, 1)),
              ),
              title: new Text(widget.playerName),
            )));
  }
}

Answer 1

您必须调用以下方法来重置小部件。

 setState(() {

    });

如何重置ListView子级

1 个答案: