如何解决我的第一个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 举报,一经查实,本站将立刻删除。