与很多孩子一起扩展时，ExpansionTile 滞后答案

【问题标题】：ExpansionTile lagging when expanding with a lot of children与很多孩子一起扩展时，ExpansionTile 滞后
【发布时间】：2020-08-28 17:40:45
【问题描述】：

你好！

一切都在标题中。

我有一个扩展图块来显示组的成员。当很多人在一个组中时（这里是 47 人），扩展一点也不顺畅，它只是闪烁并打开。

有没有办法在处理很多孩子时让动画更流畅？

提前致谢！

【问题讨论】：

我也遇到了同样的问题，这应该引起更多关注。它需要像 ListView 这样的东西来只在需要时渲染孩子

标签： flutter optimization lag tile expansion

【解决方案1】：

我意识到原因是当您展开一个面板时，会为所有子项触发 setState。这是我的解决方案。我制作了自己的扩展面板，这样当一个 setstate 被触发时，它不会影响整个事情。它对我来说更顺畅。注意调用 setstate 的位置和方式。 Column 小部件可以成为模板并在 ListView 中使用。

class TestPage extends StatefulWidget {
  const TestPage({Key? key}) : super(key: key);

  @override
  _TestPageState createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> {

  bool isExpanded = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ListView(
          children: [
            Column(
              children: [
                ListTile(
                  onTap: () {
                    setState(() => isExpanded = !isExpanded);
                  },
                  title: Text('Title widget'),
                ),
                AnimatedSize(
                  duration: Duration(milliseconds: 250),
                  curve: Curves.fastOutSlowIn,
                  child: AnimatedCrossFade(
                    firstChild: Container(height: 0.0),
                    secondChild: Column(
                      children: [
                        Text('widget 1'),
                        Text('widget 2'),
                        Text('widget 3'),
                        Text('widget 4'),
                        Text('widget 5'),
                      ],
                    ),
                    firstCurve:
                        const Interval(0.0, 0.6, curve: Curves.fastOutSlowIn),
                    secondCurve:
                        const Interval(0.4, 1.0, curve: Curves.fastOutSlowIn),
                    sizeCurve: Curves.fastOutSlowIn,
                    crossFadeState: isExpanded
                        ? CrossFadeState.showSecond
                        : CrossFadeState.showFirst,
                    duration: Duration(milliseconds: 250),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

【讨论】：