屏幕与所有设备兼容

时间:2019-08-03 12:54:32

标签: flutter

如何在抖动中将屏幕调整为所有android设备屏幕。我已经检查了stackoverflow,但是不幸的是我没有任何令人满意的答案。

2 个答案:

答案 0 :(得分:1)

我认为您对响应式布局存在一些疑问,因此我将为您提供MediaQuery的一些示例:

使用MediaQuery,您可以获取设备的屏幕宽度:

    double width = MediaQuery.of(context).size.width; 

高度:

    double height = MediaQuery.of(context).size.height;

以及方向:

    Orientation orientation = MediaQuery.of(context).orientation;

以及有关设备的各种信息,然后,您可以根据方向,尺寸等来布局。

这是一个例子:

                 Container(
                    width: MediaQuery.of(context).orientation == Orientation.portrait ?
                      MediaQuery.of(context).size.width / 1.3 : MediaQuery.of(context).size.width / 2.1,
                    child: RaisedButton(
                        elevation: 0.0,
                        color: Colors.green,
                        child: Text("CONTINUE", style: TextStyle(color: Colors.white),),
                        onPressed: (){
                          //code of onPressed
                          );
                        }
                    ),
                  ),

您也可以使用Align来定义窗口小部件的位置,位置,列,中心等的属性。

另一个示例,使用FittedBox处理文本:

   @override
   Widget build(BuildContext context) {
       return Material(
          child: SafeArea(
              child: Scaffold(
                  body: ListView(
                      children: <Widget>[
                      FittedBox(child: Text("Test"),),
                      FittedBox(child: Text("Flutter Flutter Flutter"),) 
                   ],
                 ),
              ),
            ),
         );
      }

结果:

肖像:

Result1

风景:

Result2

答案 1 :(得分:1)

基本上,Flutter会根据设备尺寸自动设置高度和宽度。示例-如果使用的列表视图包含100个项目,则某些设备可能一次显示5个项目,而某些设备可能显示6个项目。它是由Flutter自动完成的。

仅当您指定高度和/或宽度的绝对值时,问题才会出现。假设您有一个小部件,并将宽度指定为450。现在,它可能适合较大的屏幕,但适合较小的屏幕(例如,宽度为400磅),那么您会在UI中看到像素溢出错误。

现在,要解决此问题,您可以按照LGM的建议使用MediaQuery.of(context).size.height / width。