如何在不重新运行 FirebaseAnimatedList 的情况下更改 AppBar 'title:' 值

Question

我在 Flutter/Dart 聊天应用程序中使用 FirebaseAnimatedList。简化的 build() 方法如下：

@override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: AppBar(
          title: Text(_onLineStatus), // <-- This text value changed using setState()
        ),
        body: Column(
          children: <Widget>[
            Flexible(
              child: FirebaseAnimatedList(
                query: reference,
                sort: (a, b) => b.key.compareTo(a.key),
                padding: EdgeInsets.all(8.0),
                reverse: true,
                itemBuilder: (BuildContext context, DataSnapshot snapshot,
                    Animation<double> animation, int index) {
                  return ChatMessage(snapshot: snapshot, animation: animation);
                },
              ),
            ),
            Divider(height: 1.0),
            Container(
              decoration: BoxDecoration(color: Theme.of(context).cardColor),
              child: _buildTextComposer(),
            )
          ],
        ));
  }

我想根据侦听器返回的事件值更改第 5 行的_onLineStatus 的值，主要是为了指示其他聊天参与者是在线还是离线。我希望对状态的任何更改都能立即反映出来。显而易见的方法是使用 setState() ，但这当然会触发 build() 方法的完全重新运行，因此会重新运行 FirebaseAnimatedList 查询，再次下载相同的数据。我想避免这种情况。

所有使用 FirebaseAnimatedList 的示例都将其显示为 build() 方法的一部分，但我们建议避免将数据库调用放入 build() 以避免这些副作用，因为 build() 可以运行多次。

因此我的问题是：

1. 如何将对 FirebaseAnimatedList 的调用移到 build() 方法之外，以便我可以使用 setState() 来更新 AppBar title: property 的值，而无需重新运行 FirebaseAnimatedList？

或者...

1. 如何在不重新运行 build() 方法的情况下更新 AppBar title: 属性的值，即。不调用 setState()？

Answer 1

创建一个包含您的应用栏的StateFullWidget。 像这样的：

Widget build(BuildContext context) {
    return new Scaffold(
        appBar: CustomAppBar(), 
        body: Column(
        ...

然后是您的新应用栏小部件：

class CustomAppBar extends StatefulWidget {
  @override
  _CustomAppBarState createState() => _CustomAppBarState();
}

class _CustomAppBarState extends State<CustomAppBar> {
  String _onLineStatus = "online";

  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: Text(_onLineStatus),
    );
  }
}

通过这种方式，您可以独立地从列表中重建 appbar。您需要在新的小部件中调用 setState。