将 Text 小部件添加到其子项映射到 Flutter 的 ListView？

Posted 2023-02-23

【中文标题】将 Text 小部件添加到其子项映射到 Flutter 的 ListView？

【英文标题】：Add Text widget to ListView that has its children mapped in Flutter?

【发布时间】：2021-04-09 11:15:19

【问题描述】：

我有一个 ListView 可以动态地从地图中显示其子项。 ListView 位于显示和隐藏 ListView 的动画控制器内。如何将一个 Text 小部件添加到 ListView 的底部？还是应该改用 ListView.builder？

AnimatedContainer(
    duration: Duration(milliseconds: duration),
    height: _expandRedFlag ? (args.map1.length * 37.0 + 20) : 0,
    padding: EdgeInsets.symmetric(horizontal: 8, vertical: 4),
    child: Container(
      child: ListView(
        physics: NeverScrollableScrollPhysics(),
        children: args.map1.entries
            .map((e) => Column(children: [
                  Row(
                    textDirection: TextDirection.rtl,
                    mainAxisAlignment:
                        MainAxisAlignment.spaceEvenly,
                    children: [
                      Text(
                        "$e.value",
                        style: TextStyle(fontSize: 14),
                      ),
                      SizedBox(
                        width: 8,
                        height: 25,
                      ),
                      Expanded(
                        child: Text(
                          e.key,
                          style: TextStyle(fontSize: 14),
                        ),
                      ),
                    ],
                  ),
                  Container(
                    height: 2,
                    width: double.infinity,
                    child: Divider(
                      color: Colors.black,
                    ),
                  ),
                ]))
            .toList(),
      ),
    ),
  ),

【参考方案1】：

Flutter 有一个现成的解决方案！

使用AnimatedList

一个滚动容器，当项目被插入或移除时，它们会产生动画效果。此小部件的 AnimatedListState 可用于动态插入或删除项目。要引用 AnimatedListState，请提供 GlobalKey 或使用项目输入回调中的静态方法。此小部件类似于 ListView.builder 创建的小部件。