有状态小部件中的子属性答案

【问题标题】：Child Property in Stateful Widget有状态小部件中的子属性
【发布时间】：2022-01-02 19:20:21
【问题描述】：

我制作了一些测试小部件来说明我在使用更复杂的小部件时遇到的困难。

我有以下小部件：

class TestListWidget extends StatefulWidget {
  Widget child;

  TestListWidget({Widget child}) {
    this.child = child;
  }

  @override
  State<StatefulWidget> createState() {
    return TestListWidgetState();
  }


}
class TestListWidgetState extends State<TestListWidget>
{
  Widget child;

  int buttonCount = 0;

  @override initState() {
    child = widget.child;
  }

  _clickedCountButton()
  {
    setState(() {
      buttonCount++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Column(children: [
      Text("Times Hit: $buttonCount"),
      ElevatedButton(onPressed: _clickedCountButton, child: Text("Update Count")),
      child
    ]);
  }
}

上面的小部件正在以下小部件中使用：

class TestList extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new TestListState();
  }
}

class TestListState extends State<TestList> {
  String _testStr = "not clicked";

  _clickButton()
  {
    setState(() {
      _testStr = "CLICKED";
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: "Test",
        theme: ThemeData(
        primarySwatch: Colors.blue
    ),
    home:Scaffold(
        body : testListWidget(child: Row(children: [
      Text(_testStr),
      ElevatedButton(onPressed: _clickButton, child: Text("Click me!"))
    ]))));
  }
}

我遇到的问题是“点击我！”单击按钮，调用该函数，但屏幕上的文本未更新为“CLICKED！”。 “更新计数”按钮按预期工作。

如果我将 TestListWidget 设为无状态小部件（并删除更新计数按钮功能），那么“点击我！”按钮按预期工作。当传递给有状态小部件时，有什么方法可以使子小部件重建？

【问题讨论】：

标签： flutter setstate flutter-widget statefulwidget statelesswidget

【解决方案1】：

你的问题很简单。你有两个变量，一个是TestListWidget.child，我们称之为有状态小部件的孩子。第二个是TestListWidgetState.child，我们称它为州的孩子。

您在initState 上使 state 的子代等于 stateful widget 的 child，但 initState 仅在您第一次创建 state 时运行，因此更新 stateful widget 的子代不会更新 state 的子代，因为 initState 不会再次运行。

要解决这个问题，我相信您可以完全删除 state 的孩子，并改用 widget.child：

return new Column(children: [
      Text("Times Hit: $buttonCount"),
      ElevatedButton(onPressed: _clickedCountButton, child: Text("Update Count")),
      widget.child
    ]);

完整示例：

import 'package:flutter/material.dart';

void main() => runApp(TestList());

class TestListWidget extends StatefulWidget {
  Widget child;

  TestListWidget({required this.child});

  @override
  State<StatefulWidget> createState() {
    return TestListWidgetState();
  }


}
class TestListWidgetState extends State<TestListWidget>
{

  int buttonCount = 0;

  _clickedCountButton()
  {
    setState(() {
      buttonCount++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Column(children: [
      Text("Times Hit: $buttonCount"),
      ElevatedButton(onPressed: _clickedCountButton, child: Text("Update Count")),
      widget.child
    ]);
  }
}

class TestList extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new TestListState();
  }
}

class TestListState extends State<TestList> {
  String _testStr = "not clicked";

  _clickButton()
  {
    setState(() {
      _testStr = "CLICKED";
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: "Test",
        theme: ThemeData(
        primarySwatch: Colors.blue
    ),
    home:Scaffold(
        body : TestListWidget(child: Row(children: [
      Text(_testStr),
      ElevatedButton(onPressed: _clickButton, child: Text("Click me!"))
    ]))));
  }
}

【讨论】：