Question

如何制作此答案How to keep changing a Images every 5 seconds in Flutter?中的代码，以避免父代与子代一起重建？我只希望孩子做setState。

我希望Timer中的setState不影响父级。

在此链接https://androidpedia.net/en/knowledge-base/51725031/flutter-setstate-of-child-widget-without-rebuilding-parent中，我了解了如何仅在没有父母的情况下重新呈现孩子，但是我对将其实现到代码中感到困惑。

My Objective is like on the image, please click on this link to see the image

蓝色圆圈是徽标，红色圆圈是横幅。我希望他们像gif。但是我不能做硬编码并放置gif。因为我是从网上提取图片的，所以像How to keep changing a Images every 5 seconds in Flutter?中的答案一样。因此，我需要使用setState，不幸的是，它会渲染整个应用程序。如何只重新渲染图像？

Answer 1

只需将要更改的部分提取到新的有状态小部件中即可。

您可以通过选择该部分并在vs代码中按ctrl shift r来做到这一点。

Answer 2

尝试以下示例。在该代码中，我只是更改了容器的颜色，只需将其替换为代码中的图像即可。

class Sample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
  print("Parent Widget rebuild");

    return SafeArea(
      child: Column(
        children: [
          Container(
            height: 50,
            width: 50,
            color: Colors.red,
          ),
          SizedBox(height: 20),
          ChangingColor(),
        ],
      ),
    );
  }
}

class ChangingColor extends StatefulWidget {
  @override
  _ChangingColorState createState() => _ChangingColorState();
}

class _ChangingColorState extends State<ChangingColor> {
  Timer _timer;
  Color _color;

  @override
  void initState() {
    _timer = Timer.periodic(Duration(seconds: 5), (Timer t) {
      setState(() {
        _color = Colors.primaries[Random().nextInt(Colors.primaries.length)];
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
  print("Child Widget rebuild");

    return Container(
      height: 50,
      width: 50,
      color: _color,
    );
  }

  @override
  void dispose() {
    _timer.cancel();
    _timer = null;
    super.dispose();
  }
}

使用setState时如何呈现没有父母的孩子？

2 个答案: