如何在没有 Re-running 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() 以避免这些 side-effects，因为 build() 可以运行多次。

因此我的问题是：

如何将对 FirebaseAnimatedList 的调用移到 build() 方法之外，以便我可以使用 setState() 更新 AppBar 标题的值：属性 WITHOUT it re运行宁 FirebaseAnimatedList？

或...

如何更新 AppBar 标题的值：属性无需重新运行 build() 方法即。不调用 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),
    );
  }
}

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

如何在没有 Re-running FirebaseAnimatedList 的情况下更改 AppBar 'title:' 值

How to Change AppBar 'title:' Value without Re-running FirebaseAnimatedList

setstate

dart

firebase-realtime-database

flutter