flutter - Flutter - 如何使图像在所有屏幕尺寸下都具有响应性
问题描述
嗨,我正在制作一个扑腾的书籍应用程序,每页图像的顶部都会有材料按钮。但我注意到当我从 iPhone X 转到 iPhone XR 或任何其他设备时,按钮到处都是,我看到图片没有正确对齐或相同。我只需要横向模式图片来填满整个页面并在包括 iPad 在内的所有屏幕上完全响应......我该怎么做呢......?
我尝试了媒体查询,但是当我执行 screenSizes.width* 任何数字时,发生的事情是按钮未显示并且...图像无限滚动,所有屏幕尺寸仍显示不同的图像。
我将在下面分享一个按钮和图像的代码
@override
Widget build(BuildContext context) {
var screenSizes = MediaQuery.of(context).size;
return Scaffold(
appBar: new AppBar(title: new Text("1 Alif-laam-meem آلم, Pg2")),
body: new SingleChildScrollView(
child: Container(
constraints: BoxConstraints.expand(
// BoxConstraints
// BoxConstraints.expand(
// height: 1000,
// .expand(
width: screenSizes.width * 10,
height: screenSizes.height * 10,
),
// children: [
child: Stack(children: <Widget>[
SafeArea(
top: true,
bottom: true,
right: true,
left: true,
child: new Container(
// padding: EdgeInsets.zero,
child: new Image.asset(
"test/assets/quranpg0.png",
// fit: BoxFit.fitWidth,
fit: BoxFit.cover,
// color: Colors.purpleAccent,
// colorBlendMode:ui.BlendMode.colorDodge,
))),
Positioned(
// right: 600,
bottom: screenSizes.width * 0.985,
left: screenSizes.height * 0.87,
// bottom: 754.0,
// left: 360,
// left: width*0.5,
// top: 900,
// top: 100,
child: Opacity(
opacity: 0.95,
child: _visible
? MaterialButton(
// minWidth:screenSize.width*0.1,
// 0.1 = 10% of the screen , 0.5 = 50% of the screen
// ios sizes usually are 620...
// height: screenSize.height*0.1,
onPressed: () => changeTextArabic1(),
onLongPress: () => changeTextEnglish1(),
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(80.0),
// child: Text(labels[i]),
),
child: Ink(
child: Text(surah0),
// disabledTextColor: Colors.transparent,
// color: Colors.cyan[300],
// // color: Colors.purple[300],
// highlightColor: Colors.blue,
// // shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(60.0)
// // ),
// textColor: Colors.white,
// color: Colors.cyan[400],
padding: EdgeInsets.only(
top: screenSizes.height * 0.05,
left: screenSizes.width * 0.02,
right: screenSizes.width * 0.02,
bottom: screenSizes.height * 0.05),
// EdgeInsets.all(21.0),
// left: 28, top: 25, right: 28, bottom: 25),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
// all together looks COOL royal Blue:
Colors.tealAccent[400],
Colors.cyan[900],
Colors.teal
// Color(0xff0E0077),
// Color(0xff1B00EE)
],
// begin: Alignment.centerLeft,
// end: Alignment.centerRight,
),
),
),
// color: Colors.blue[300],
// highlightColor: Colors.blue,
splashColor: Colors.cyan,
// ),
textColor: Colors.white,
)
: Container(),
),
),
解决方案
如果您需要确定屏幕方向,您可以这样做:
var orientation = MediaQuery.of(context).orientation;
对于一个可以帮助您正确缩放元素的完全有效的解决方案,我强烈建议您探索这个 repo:https ://github.com/TechieBlossom/learning_platform_app
甚至还有一个附带解释的视频系列: https ://www.youtube.com/watch?v=afBmGC63iIQ
推荐阅读
- perl - 对输入文件的内容进行排序并写入输出文件
- c - 如果“i = i++”不被视为未定义行为会发生什么?
- ios - 真iPhone XR屏幕分辨率和swift给出的屏幕分辨率不一样?
- php - 表单提交后重定向在 IE 中不起作用,但在 chrome 中起作用
- html - Vuetify.js - 为 v-card 添加模糊和透明样式
- docker - Docker Container 中 ASP.NET Core appsettings.json 的路径
- python - Python 2.7.1 ValueError:解包的值太多
- css - 如何在仍然响应的 boostrap 4 导航栏中制作重叠的徽标图像?
- netsuite - 我可以在 Netsuite 中的装配物料清单打印中添加列吗?
- javascript - 是否可以在 Android 设备上延迟 PWA 横幅“添加到主屏幕”?