时间戳

首页 > 解决方案 > ListView 没有得到更新

flutter - ListView 没有得到更新

问题描述

我在 ListView 和 Column 中遇到了小部件树的问题。有人可以解释一下列的小部件树（包装在 singleChildScrollView 中）与列表视图有何不同。

这是代码： -

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

自定义.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 没有更新，但是列表正在更新。但是当我用 column 替换 listview 时，它开始按预期工作。

标签： flutterflutter-layout

解决方案

那是因为一些 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()),
    );
  }

推荐阅读