Flutter：从子小部件设置父小部件状态

Question

我是 Flutter 和 Dart 的初学者。因此，我正在尝试更新父小部件的状态，但老实说，在尝试了许多不同的解决方案后，都没有为我工作，还是我做错了什么？

我要做的是在 _Books() 类中的页面更改时更新 _BooksState() 中的 _title。

如何从子 (_Books()) 小部件设置 _title 状态？

class Books extends StatefulWidget {
  @override
  _BooksState createState() {
    return _BooksState();
  }
}

class _BooksState extends State<Books> {
  String _title = 'Books';

  _setTitle(String newTitle) {
    setState(() {
      _title = newTitle;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(_title),
      ),
      body: _Books(),
    );
  }
}

class _Books extends StatelessWidget {
  final PageController _controller = PageController();
  final Stream<QuerySnapshot> _stream =
      Firestore.instance.collection('Books').orderBy('title').snapshots();

  _setAppBarTitle(String newTitle) {
    print(newTitle);
    // how do I set _title from here?
  }

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<QuerySnapshot>(
      stream: _stream,
      builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
        final books = snapshot.data.documents;
        switch (snapshot.connectionState) {
          case ConnectionState.waiting:
            return Center(child: CircularProgressIndicator());
          default:
            return PageView.builder(
              controller: _controller,
              scrollDirection: Axis.horizontal,
              itemCount: books.length,
              itemBuilder: (context, index) {
                final book = books[index];
                return ListTile(
                  title: Text(book['title']),
                  subtitle: Text(book['author']),
                );
              },
              onPageChanged: (index) {
                _setAppBarTitle(books[index].data['title']);
              },
            );
        }
      },
    );
  }
}

Answer 1

让我用换句话说重复你的问题：当发生某些事情时（不在同一个小部件类内），你想设置小部件（或刷新页面，或将变量“绑定”到小部件）。

这是所有flutter新手（包括我）的通病，叫做状态管理。

当然，你总是可以将所有内容放在同一个 dart 文件中，甚至放在同一个类中，但是对于较大的应用程序，我们不会这样做。

为了解决这个问题，我创建了2个例子：

1. https://github.com/lhcdims/statemanagement01

此示例使用计时器来检查小部件内的某些内容是否发生了变化，如果是，则设置小部件所属的页面。

尝试看看 main.dart 中的 funTimerDefault() 函数

好的，这是我的第一次尝试，不是一个好的解决方案。

1. https://github.com/lhcdims/statemanagement02

此示例的输出与 1 相同，但使用的是 Redux 而不是 setState。迟早你会发现 setstate 并不适合所有情况（比如你的情况！），你会使用 Redux 或 BLoC。

阅读示例中的自述文件，构建并运行它们，然后您就可以在任何时间（和任何地方）您想要（刷新）任何小部件（或更改绑定到小部件的变量）。 （即使应用被推到后台，你也可以在例子中试试这个）

Answer 2

您可以做的是将您的 _Books 类移动到 _BooksState 类中。 而不是使用_Books 作为类，您可以在_BooksState 类中将其用作Widget，这样您就可以在您创建的StatefulWidget 中访问StatefulWidget 的setState 方法。

我就是这样做的，即使我是 Flutter 和 Dart 的新手……即使在进行 API 调用之后，这对我来说在任何情况下都有效……我可以使用 setState 并设置响应来自 API。

示例：

class Books extends StatefulWidget {
  @override
  _BooksState createState() {
    return _BooksState();
  }
}

class _BooksState extends State<Books> {
  String _title = 'Books';

  _setTitle(String newTitle) {
    setState(() {
      _title = newTitle;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(_title),
      ),
      body: _books(), // Using the Widget here
    );
  }

  // Your `_Books` class created as `Widget` for setting state and new title.
  Widget _books() {
    final PageController _controller = PageController();
    final Stream<QuerySnapshot> _stream =
    Firestore.instance.collection('Books').orderBy('title').snapshots();

    _setAppBarTitle(String newTitle) {
      print(newTitle);
      // how do I set _title from here?

      // Since you created this method and setting the _title in this method 
      // itself using setstate you can directly pass the new title in this method..
      _setTitle(newTitle);
    }

    return StreamBuilder<QuerySnapshot>(
      stream: _stream,
      builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
        final books = snapshot.data.documents;
        switch (snapshot.connectionState) {
          case ConnectionState.waiting:
            return Center(child: CircularProgressIndicator());
          default:
            return PageView.builder(
              controller: _controller,
              scrollDirection: Axis.horizontal,
              itemCount: books.length,
              itemBuilder: (context, index) {
                final book = books[index];
                return ListTile(
                  title: Text(book['title']),
                  subtitle: Text(book['author']),
                );
              },
              onPageChanged: (index) {
                _setAppBarTitle(books[index].data['title']);
              },
            );
        }
      },
    );
  }
}