如何解决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;
对于一个可以正常工作的解决方案,它将帮助您正确地缩放元素,我强烈建议您浏览此仓库:https://github.com/TechieBlossom/learning_platform_app
甚至还有一个带说明的视频系列: https://www.youtube.com/watch?v=afBmGC63iIQ
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。