时间戳

首页 > 解决方案 > Flutter：从子小部件设置父小部件状态

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

问题描述

我是 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']);
              },
            );
        }
      },
    );
  }
}

标签： dartflutter

解决方案

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

这是所有 Flutter 新手（包括我）的通病，称为状态管理。

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

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

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

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

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

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

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

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

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

推荐阅读