如何解决如何在颤振中为手机制作响应式用户界面
我观察到小部件在小屏幕上显示得更大,在大屏幕上显示得更小。 在大屏幕上它看起来很不错,但在小屏幕上看起来很奇怪。 如何在不同的移动屏幕尺寸下制作响应式且美观的 UI...??
解决方法
您可以使用 MediaQuery.of(context).size
方法检索当前屏幕的大小并根据此值定义小部件的大小。
这是一个例子:
@override
Widget build(BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width / 3.5,child: Center(
child: Card(
child: InkWell(
onTap: () => _openUrl(_shortcut.url),child: Column(
mainAxisAlignment: MainAxisAlignment.start,crossAxisAlignment: CrossAxisAlignment.start,mainAxisSize: MainAxisSize.min,children: [
Container(
height: MediaQuery.of(context).size.height / 6,color: Color(int.parse("0xFF${_shortcut.color}")),child: Center(child: Icon(_shortcut.icon,color: Colors.white)),),Padding(
padding: const EdgeInsets.all(8.0),child: Text(_shortcut.title,style: TextStyle(fontWeight: FontWeight.bold)),child: Text(
_shortcut.description,maxLines: 2,overflow: TextOverflow.ellipsis,]),))),);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。