如何使应用程序响应其他较小的分辨率。我使用过媒体查询，但效果不佳

Posted 2023-02-23

【中文标题】如何使应用程序响应其他较小的分辨率。我使用过媒体查询，但效果不佳

【英文标题】：How can I make app responsive for other smaller resolutions.I've used Media Query but I didn't work well

【发布时间】：2020-07-24 19:09:15

【问题描述】：

当我在具有较大显示屏的设备中设计此应用程序布局时，它工作得非常好（1920 x 1080）但是当我在具有较小屏幕的设备中运行应用程序时，底部按钮没有显示..我该怎么办？ mediaquery 是否支持列小部件...？我应该使用其他方法而不是 Mediaquery 吗？

这是主要飞镖....//不包括运行应用程序//

return ResponsiveWidget(
          builder: (context,constraints)
            return Stack(
            children: <Widget>[
              new Container(
                decoration:new BoxDecoration(
                  image: new DecorationImage(
                    image: new AssetImage(_Image()()),
                    fit: BoxFit.cover,
                  ),
                ),
              ),
       Scaffold(
          backgroundColor:Colors.transparent,
            appBar:AppBar(
              backgroundColor:Colors.transparent,
              elevation:0.0,
            ),
            drawer:Drawer(
              child: ListView(
                children: <Widget>[
                  DrawerHeader(
                  child: Text('Drawer Header',
                  style:TextStyle(
                    fontSize: 30.0,
                    ),
                  ),
                  decoration: BoxDecoration(
                  color: Colors.green[300],
                  ),
                  )],
              ),
            ),
            body:Column(
                children: <Widget>[
                  Row(
                    crossAxisAlignment:CrossAxisAlignment.center,
                    mainAxisAlignment:MainAxisAlignment.spaceEvenly,
                    children: <Widget>[
                      SizedBox(width:10,height:10,),
                      Text(
                        "NAME",
                        style:TextStyle(
                          fontSize:40.0,
                          fontWeight:FontWeight.bold,
                          color:Colors.white,
                        ),
                      ),
                      SizedBox(width:10),
                    ],
                    ),
                  SizedBox(height:20),

                  GestureDetector(
                    onTap:()
                      print("Clicked");

                    ,
                    child: CircleAvatar(
                      radius:80,
                      backgroundImage:_decideImageView(),
                    ),
                  ),

                SizedBox(height: 30,),
                Text("Text",
                      style:TextStyle(
                        fontStyle:FontStyle.italic,
                        fontSize:15,
                        color:Colors.white,
                        ),  
                      ),

                SizedBox(height: 10,),
                Text("Text",
                      style:TextStyle(
                        fontFamily:'mrsmonster',
                        fontSize:20,
                        color:Colors.white,
                        ), 
                       ),

                 SizedBox(height:50,),

                FlatButton(child:Text(
                  "TExt",
                  style:TextStyle(
                    fontWeight:FontWeight.bold,
                    fontSize:30,
                    color:Colors.white,
                        ),
                      ),
                  shape: RoundedRectangleBorder(
                      borderRadius: new BorderRadius.circular(30.0),
                          //side: BorderSide(color: Colors.red)
                            ),
                  color:Hexcolor('#149da5'),
                  padding:EdgeInsets.fromLTRB(30, 20, 30, 20),
                  onPressed: ()
                      setState(() );
                  ,
                ),

                SizedBox(height:10,),

                FlatButton(child:Text(
                  "Text",
                  style:TextStyle(
                    fontWeight:FontWeight.bold,
                    fontSize:30,
                    color:Colors.white,
                  ),
                  ),
                  shape: RoundedRectangleBorder(
                      borderRadius: new BorderRadius.circular(30.0),
                          //side: BorderSide(color: Colors.red)
                            ),
                  color:Hexcolor('#f4856b'),
                  padding:EdgeInsets.fromLTRB(30, 20, 30, 20),
                  onPressed: ()
                      setState(() );
                    ,
                    ),
                  ],
                  ),
                )
              ]
            );
            );

这是响应式小部件

import 'package:app/SizeInformation.dart';
import 'package:flutter/material.dart';



    class ResponsiveWidget extends StatelessWidget 


        final AppBar appBar;
        final Drawer drawer;
        final Widget Function(BuildContext context,SizeInformation constraints) builder;
      ResponsiveWidget(@required this.builder,this.appBar,this.drawer);


      @override
      Widget build(BuildContext context) 

        var width = MediaQuery.of(context).size.width;
        var height = MediaQuery.of(context).size.height;
        var orientation = MediaQuery.of(context).orientation;

        SizeInformation information = SizeInformation(width,height,orientation);



         return Stack(children: <Widget>[
                Scaffold(
              drawer:drawer,
              appBar:appBar,
              body: builder(context,information),

            ),
         ]
         );
      
    

【问题讨论】：

好吧，首先你为什么要使用两个 Scaffolds 和两个 Stack 小部件？？？

其次，你为什么还要使用 Stack 小部件？

这是因为有 3 个分离的 dart 文件。 MediaQuery 来自 Responsive Widget dart.Stack 用于背景图像。

【参考方案1】：

您应该在 Scaffold 主体内使用 Stack，而不是用 Stack 包裹 Scaffold。您必须在一个屏幕中只使用一个脚手架。你所做的只是错误的......没有徘徊它不起作用。脚手架主体中的任何内容都会自动调整为您的屏幕分辨率......因此无需手动进行。这是一个问题如何在不使用堆栈小部件Flutter SDK Set Background image 的情况下设置背景图像，因此甚至不需要使用堆栈

【讨论】：

我试试看告诉你