在模拟器中更改方向时出现颤振调试问题答案

【问题标题】：Flutter Debugging issue when changing Orientation in emulator在模拟器中更改方向时出现颤振调试问题
【发布时间】：2021-12-07 01:10:54
【问题描述】：

我在 Flutter 中进行响应式 UI 设计。然后我在我的android模拟器中调试它。第一个方向是纵向的，这很好。然后我改变了方向，这是一个糟糕的用户界面，这是意料之外的。如果我热重启或热重载 UI 改变，这是意料之中的。更改方向后，我必须始终重新加载或重新启动。保存后已对自动重新加载进行了设置。如何解决这个问题？

【问题讨论】：

标签： flutter android-emulator flutter-layout flutter-test flutter-debug

【解决方案1】：

您需要让您的 UI 具有响应性。您可以使用“MediaQuery”来完成。例子：

return Scaffold(
  appBar: AppBar(
    title: Text("Responsive Container"),
  ),
  body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Container(
          height: MediaQuery.of(context).size.height/ 4,
          width: MediaQuery.of(context).size.width/3,
          color: Colors.red,
          child: Center(child: Text("Hello There !")),
        ),
      ],
    ),
  ),
);

【讨论】：

【解决方案2】：

Yuu 说您正在创建响应式 UI，这意味着您正在使用屏幕的宽度和高度来使其具有响应性。当方向改变时，宽度明显增加，高度减少，所以也许你需要添加对方向变化的检查。有很多方法可以做到，这里是最简单的一种

return Scaffold(
        key: scaffoldKey,
        body: OrientationBuilder(
          builder: (BuildContext context, Orientation orientation) {
            orientation == Orientation.portrait ? 
                      doSomeThingifportrait : doSomethingifLandscape;
          },
        ),
);

【讨论】：

我已经用过这个了。更改方向 UI 更改非常糟糕时出现问题。比如字体很小，按钮都在扩展。但是再次重新启动或重新加载该方向的 UI 会很好。再次改变方向也会有同样的问题。