有状态小部件中的子属性

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

我遇到的问题是；点击我"按钮，调用函数，但屏幕上的文本不更新为"；点击了&"；。"；更新计数"；按钮按预期工作。

如果我使TestListWidget成为无状态的小部件(并删除更新计数按钮功能(；点击我"按钮按预期工作。当传递给有状态的小部件时，有什么方法可以使子小部件重新生成吗？

Answer 1

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

在initState上，您使state的child等于有状态小部件的child，但initState仅在您第一次创建状态时运行，因此更新有状态小程序的child不会更新状态的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!"))
    ]))));
  }
}