我的第一个Flutter应用程序的布局在不同的屏幕分辨率下无法正常运行

问题描述

我想在Flutter中创建一个简单的计算器应用程序。经过三天的工作，我无法在不同的分辨率和屏幕尺寸下按设计运行。

主屏幕分为3个区域：

显示操作历史记录的顶部区域
中间区域，用于当前计算的计算器显示
键盘的底部区域。

This screenshot of the design can be helpful to understand the global idea

显示和键盘区域具有minHeight和maxHeight约束，并且屏幕的所有可用顶部空间均用于显示操作历史记录（只有minHeight约束）。

显示和键盘区域尝试使用其maxHeight，直到屏幕高度足够小以激活顶部区域的minHeight。

随着屏幕高度的不断缩小，显示和键盘区域将按比例缩小，直到达到其minHeight。

我已经编写了这个玩具示例，但是它没有所需的行为：

class HomePage extends StatelessWidget {
  const HomePage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
        child: Column(children: <Widget>[
      Expanded(
        child: ConstrainedBox(
          constraints:
              BoxConstraints(maxHeight: double.infinity,minHeight: 20),child: Container(
            color: Colors.red,),Expanded(
          child: ConstrainedBox(
        constraints: BoxConstraints(maxHeight: 100,minHeight: 50),child: Container(
          color: Colors.blue,)),Expanded(
          child: ConstrainedBox(
        constraints: BoxConstraints(maxHeight: 400,minHeight: 300),child: Container(
          color: Colors.green,]));
  }
}

有人可以指导我实现屏幕高度变化时这三个区域的行为吗？

非常感谢您！

致谢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

calculator layout screen-resolution