在模拟器中改变方向时的颤振调试问题

Question

我在flutter中做响应式UI设计。然后我在我的android模拟器中调试它。第一个方向是肖像，这是一个很好的。然后我改变了方向，它是一个糟糕的UI，这是意料之外的。如果我热重启或热重载UI改变，这是意料中的。在改变方向后，我必须重新加载或重新启动。保存后自动加载的设置。如何解决这个问题?

Answer 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 !")),
),
],
),
),
);

Answer 2

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

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