为什么setState不能用于flutter中的小部件列表

5cg8jx4n  于 2023-02-09  发布在  Flutter
关注(0)|答案(1)|浏览(146)

我是flutter的新手,我尝试用小部件列表进行实验。我尝试改变小部件列表内的状态,即在initState中初始化。我创建了我想要实现的示例。

class Testing extends StatefulWidget {
  const Testing({super.key});

  @override
  State<Testing> createState() => _TestingState();
}

class _TestingState extends State<Testing> {
  bool isChanged = false;
  List<Widget> simpleWidget = [];

  @override
  void initState() {
    simpleWidget = [_someComplexWidget(), _someComplexWidget()];
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:const Text("Test"),
      ),
      body: Center(
        child: Column(
          children: [
            Container(
              child: Column(
                children: simpleWidget,
              ),
            ),
            ElevatedButton(
                onPressed: () {
                  setState(() {
                    isChanged = !isChanged;
                  });
                },
                child: const Text("Click"))
          ],
        ),
      ),
    );
  }

  Widget _someComplexWidget() {
    return Text(
        "Hello",
        style: TextStyle(color: isChanged ? Colors.red : Colors.blue),
      );
  }
}

我也尝试了键,但在此示例代码中不起作用。When to Use Keys
不工作这段代码背后的原因是什么。

ttp71kqs

ttp71kqs1#

因为您的simpleWidget是在initState创建的&它不会在重建时更改。
您应该在build下添加[_someComplexWidget(), _someComplexWidget()],以便它根据当前状态动态更改。

class Testing extends StatefulWidget {
  const Testing({super.key});

  @override
  State<Testing> createState() => _TestingState();
}

class _TestingState extends State<Testing> {
  bool isChanged = false;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Test"),
      ),
      body: Center(
        child: Column(
          children: [
            Container(
              child: Column(
                children: [_someComplexWidget(), _someComplexWidget()], // HERE
              ),
            ),
            ElevatedButton(
                onPressed: () {
                  setState(() {
                    isChanged = !isChanged;
                  });
                  print(isChanged);
                },
                child: const Text("Click"))
          ],
        ),
      ),
    );
  }

  Widget _someComplexWidget() {
    return Text(
      "Hello",
      style: TextStyle(color: isChanged ? Colors.red : Colors.blue),
    );
  }
}

相关问题