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

Posted

技术标签:

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

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

【问题讨论】:

【参考方案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 会很好。再次改变方向也会有同样的问题。

以上是关于在模拟器中更改方向时出现颤振调试问题的主要内容,如果未能解决你的问题,请参考以下文章

在颤振中调试时出现异常错误

颤振:异常:SocketException:仅在iOS模拟器上连接失败

在 VS Code 中找不到模拟器。怎么修

调试 VS Code for Flutter 应用程序时出现问题

在调试模式下在颤振上显示特定的小部件

尝试使用 json_serializable 包运行 android 模拟器时出现 Flutter 编译错误