flutter - ListView 未更新

Question

我在 ListView 和 Column 中遇到了小部件树的问题。有人可以解释列的小部件树(包装在 singleChildScrollView 中)与 ListView 有何不同。

这是代码:-

主.dart

class Screen1 extends StatefulWidget {
  const Screen1({key}) : super(key: key);
  @override
  _Screen1State createState() => _Screen1State();
}

class _Screen1State extends State<Screen1> {
  List<Widget> list = [
    Artist(
      key: UniqueKey(),
      value: 1,
    ),
    Artist(
      key: UniqueKey(),
      value: 2,
    ),
    Artist(
      key: UniqueKey(),
      value: 3,
    ),
    Artist(
      key: UniqueKey(),
      value: 4,
    ),
    Artist(
      key: UniqueKey(),
      value: 5,
    ),
  ];
  @override
  Widget build(BuildContext context) {
    print(DataTable);
    print("list =>${list.length} ");

    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            list.insert(
                2,
                Artist(
                  value: 5,
                  key: UniqueKey(),
                ));
          });
        },
      ),
      body: ListView(children: list),
    );
  }
}

自定义飞镖

class Artist extends StatefulWidget {
  final int value;

  Artist({Key key, this.value}) : super(key: key);
  _ArtistState createState() {
    return _ArtistState();
  }
}

class _ArtistState extends State<Artist> with SingleTickerProviderStateMixin {
  Animation<double> anim;
  AnimationController controller;
  @override
  void initState() {
    controller = new AnimationController(
      duration: const Duration(milliseconds: 1000),
      vsync: this,
    );
    anim = Tween<double>(begin: 0, end: 60).animate(controller);
    controller.addListener(() {
      setState(() {});
    });
    print(widget.value);
    // if (!widget.firstBuild) {
    controller.forward();
    //  }
    super.initState();
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Container(
          height: 50,
          width: (anim.value > 0) ? anim.value : 60,
          color: Colors.red,
          child: Text(widget.value.toString()),
        ),
      ),
    );
  }
}

问题:点击 float 按钮时 ListView 未更新，但列表正在更新。但是当我用列替换 ListView 时，它开始按预期工作。

Answer 1

那是因为 Flutter 对 ListView 进行了一些优化，尝试使用简单对象/值(无小部件)的 List，并将其映射到小部件中，如下所示:

  List<int> list = [1, 2, 3, 4, 5];
  @override
  Widget build(BuildContext context) {
    print(DataTable);
    print("list =>${list.length} ");

    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            list.insert(2, 5);
          });
        },
      ),
      body: ListView(
          children: list
              .map(
                (val) => Artist(
                  key: UniqueKey(),
                  value: val,
                ),
              )
              .toList()),
    );
  }