如何仅操作 ListView.builder 的一个元素

Question

我正在使用动画容器通过操纵动画容器的_height 字符来制作关闭动画。我正在使用ListView.builder 创建卡片，每个卡片的文本都是列表中的值（用户可以通过添加和删除项目来操作列表）。集成的GestureDetector 查找双击并删除列表中的一项并操纵高度。然而，问题在于，所有卡片的高度都被操纵和消散。 我们如何让动画高度操作只发生在用户双击的卡片上？

listview.builder 代码如下：

ListView.builder(
        padding: EdgeInsets.fromLTRB(0, 0, 0, 100),
        shrinkWrap: true,
        scrollDirection: Axis.vertical,
        itemCount: items.length,
        itemBuilder: (context, index) {
          return AnimatedContainer(
            duration: Duration(seconds: 2),
            alignment: Alignment.center,
            decoration: new BoxDecoration(
              color: Color(0xFF324467),
              shape: BoxShape.rectangle,
              borderRadius: BorderRadius.all(Radius.circular(100.0)),
            ),
            margin: EdgeInsets.fromLTRB(22, 15, 50, 9),
            height: _height ? 80 : 0,
            child: Stack(
              children: <Widget>[
                GestureDetector(
                  onDoubleTap: () {
                    setState(() {
                      _height = !_height;
                    });
                    setState(() {
                      items.removeAt(index);
                    });
                  },
                  child: Card(
                    color: Color(0xFF324467),
                    elevation: 0,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(30),
                    ),
                    child: Row(
                      children: [
                        SizedBox(
                          height: 30,
                          width: 63,
                          child: RaisedButton(
                            onPressed: () {
                              setState(() {
                                _height = !_height;
                              });
                              setState(() {
                                items.removeAt(index);
                              });
                            },
                            elevation: 0,
                            color: Colors.transparent,
                            shape: CircleBorder(
                              side: BorderSide(
                                width: 2.3,
                                color: Colors.blue,
                              ),
                            ),
                          ),
                        ),
                        Padding(padding: EdgeInsets.fromLTRB(0, 0, 7, 0)),
                        Flexible(
                          child: Container(
                            child: Text(
                              items[index],
                              overflow: TextOverflow.fade,
                              style: TextStyle(
                                fontSize: 21,
                                fontWeight: FontWeight.w400,
                                color: Colors.white,
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          );
        },
      ),

Answer 1

问题在于height: _height ? 80 : 0, 这一行。 _height 是一个针对所有列表项进行检查的变量。如果你设置_height = false，你所有的物品列表都会消失。

使用AnimatedList 在列表中删除/添加动画。该页面有参考代码实验室，当项目被删除或添加到列表时，它使用 AnimatedList 创建效果。

如果您需要当前方法的解决方案，请针对每个列表项存储 _height 值。您可以使用 Map 或在当前模型中添加 bool 变量。然后检查项目状态。希望你能理解 ;-)