Flutter App：Orientation Builder 更改导致 Stream 的 ConnectionState 为等待而不是活动

Question

我有一个简单的应用程序可以从 Firestore 中提取数据。我想让它在 Web 上更多 user-friendly，所以我添加了一个 OrientationBuilder，当方向为横向时，它将抽屉放在 body 旁边。

这是我的“响应式脚手架”小部件：

import 'package:flutter/material.dart';

class ResponsiveScaffold extends StatefulWidget {
  final AppBar? appBar;
  final Widget body;
  final Widget? drawer;
  const ResponsiveScaffold({
    Key? key,
    this.appBar,
    required this.body,
    this.drawer,
  }) : super(key: key);

  @override
  _ResponsiveScaffoldState createState() => _ResponsiveScaffoldState();
}

class _ResponsiveScaffoldState extends State<ResponsiveScaffold> {
  @override
  Widget build(BuildContext context) {
    return OrientationBuilder(builder: (context, orientation) {
      if (orientation == Orientation.portrait) {
        return portraitBuilder();
      } else {
        return landscapeBuilder();
      }
    });
  }

  Widget portraitBuilder() {
    return Scaffold(
      appBar: widget.appBar,
      drawer: widget.drawer,
      body: widget.body,
    );
  }

  Widget landscapeBuilder() {
    return Scaffold(
      appBar: widget.appBar,
      body: Row(
        children: [
          if (widget.drawer != null) widget.drawer!,
          Flexible(
            child: widget.body,
          ),
        ],
      ),
    );
  }
}

从 Firestore 中提取的 body 内部只是一个简单的 StreamBuilder，它提供了所有项目的 ListView。我没有在调试控制台中显示任何错误，但经过一些尝试和检查连接状态后，我发现当我从横向更改为纵向或反之时，ConnectionState 从活动更改为等待。只有在流中添加了新内容时，它才会恢复活动状态。

如果有body可以帮助解决这个问题，我将不胜感激！如果还需要更多信息，请告诉我。谢谢。

Answer 1

看来，经过多方查找，找到了原因和解决方法。

OrientationBuilder 只构建一个，本身不监听任何更改，因此当 orientation 发生更改时，它不会重建，也不会再尝试正确拉取列表。

解决方案是在 Builder widget 中使用 MediaQuery.of(context).orientation。这会监听任何调整，然后在 orientation 切换时完全重建。

Flutter App：Orientation Builder 更改导致 Stream 的 ConnectionState 为等待而不是活动

Flutter App: Orientation Builder change causes Stream to have a ConnectionState of waiting instead of active

database-connection

screen-orientation

flutter

flutter-layout

flutter-web