Flutter-如何使图像在所有屏幕尺寸下都具有响应性

编程问答 2022-06-22

问题描述

您好，我正在制作一个书本应用程序，该应用程序会在每页图像的顶部都具有实质性按钮。但是我注意到，当我从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

dartflutter-layoutmobileresponsiveness