Question

我正面临ListView和Column中的小部件树的问题。有人可以解释一下（包装在singleChildScrollView中的）列的小部件树与listview有何不同。

这是代码：-

main.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),
    );
  }
}

custom.dart

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()),
        ),
      ),
    );
  }
}

问题：轻按浮动按钮时，ListView没有更新，但是列表正在更新。但是当我用列替换listview时，它按预期开始工作。

Answer 1

这是因为对ListView进行了Flutter优化，请尝试使用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()),
    );
  }

ListView没有更新

1 个答案: