有狀態小部件中的子屬性

我制作了一些測驗小部件來說明我在更復雜的小部件中遇到困難的一點。

我有以下小部件：

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 成為無狀態小部件（并洗掉更新計數按鈕功能），則“單擊我！” 按鈕按預期作業。有沒有辦法在傳遞給有狀態小部件時重建子小部件？

uj5u.com熱心網友回復：

你的問題很簡單。您有兩個變數，一個是TestListWidget.child，我們將其稱為有狀態小部件的子項。第二個是TestListWidgetState.child，我們稱它為 state 的 child。

您使 state 的 child 等于 stateful widget 的 child on initState，但initState僅在您第一次創建狀態時運行，因此更新有狀態小部件的 child 不會更新 state 的 child，因為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!"))
    ]))));
  }
}

標籤：扑 设置状态 颤动小部件 有状态的小部件 无状态小部件

上一篇：如何在顫振中從模態傳回資料？

下一篇：退出后Flutter重置所有提供者狀態