有状态小部件中的子项属性

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，我们称它为有状态小部件的 child。第二个是 TestListWidgetState.child，我们称它为州的 child.

您在 initState 上使状态的 child 等于有状态小部件的 child，但是当您首次创建状态时 initState 仅运行，因此更新状态小部件的 child 不会更新状态的 child 因为 initState 不会再次运行。

要解决此问题，我相信您可以完全删除状态的 child，并改用 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!"))
    ]))));
  }
}

有状态小部件中的子项属性

Child Property in Stateful Widget

flutter

setstate

flutter-widget

statefulwidget

statelesswidget

有状态小部件中的子项 属性

Child Property in Stateful Widget

flutter

setstate

flutter-widget

statefulwidget

statelesswidget

有状态小部件中的子项属性