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

Posted 2023-02-23

【中文标题】如何仅操作 ListView.builder 的一个元素

【英文标题】：How to manipulate only one element of ListView.builder

【发布时间】：2021-03-07 01:04:45

【问题描述】：

我正在使用动画容器通过操纵动画容器的_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,
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          );
        ,
      ),

【参考方案1】：

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

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

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

【讨论】：

嗯，有道理。但是在这种情况下我该如何使用地图呢？

声明地图：Map<int,bool> _heightMap = <int,bool>; 更改 AnimatedContainer 高度：height: _heightMap[index] != false ? 80 : 0, 并更改 onDoubleTap 和 RaisedButton onPress：setState(() _heightMap[index] = !(_heightMap[index] ?? true) )

是的！ ， 有用 。谢谢你，祝你有美好的一天:)