有状态小部件中的子属性

Question

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

我有以下小部件：

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!"))
    ]))));
  }
}

我遇到的问题是，当单击“单击我”按钮时，会调用 function。 但屏幕上的文本未更新为“CLICKED.”。 “更新计数”按钮按预期工作。

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

Answer 1

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

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

为了解决这个问题，我相信你可以完全删除状态的孩子，并使用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!"))
    ]))));
  }
}