android - flutter 中的响应式用户界面

Question

在Ui margin 中，padding、text 和image sizes 被赋予常量值。我没有使用Fractional box和Constraint box等。我需要根据屏幕尺寸通过media query

设置

我使用了这样的媒体查询，但无法正确设置。

    double width = MediaQuery.of(context).size.width;
    double height = MediaQuery.of(context).size.height;
    double height35 = height * 0.35;

如果我的填充是 padding:const EdgeInsets.only(left: 25.0,right: 25.0)，我如何从媒体查询中设置填充和其他固定大小。 Here 1 , Here 2是文档和示例，但没有从媒体查询中获得方法..

我用过这个library也是，但它没有我想要的那么有效。

这是我的代码。

class _LoginPageState extends State<LoginPage> {
  @override
  Widget build(BuildContext context) {
    MediaQueryData queryData;
    queryData = MediaQuery.of(context);


    double width = MediaQuery.of(context).size.width;
    double height = MediaQuery.of(context).size.height;
    double height35 = height * 0.35;

    return Scaffold(
      body: Container(
          decoration: BoxDecoration(color: Color(0xFFE7F6FD)),
        child: Column(
          children: <Widget>[
            SizedBox(height: height35,),
            Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                Container(
                  height: 50.0,
                  child: IconButton(icon: Icon(Icons.close,color: Color(0xFF005283),size: 36.0,), onPressed: null),
                ),
              ],),
            Container(child: SingleChildScrollView(
              padding:const EdgeInsets.only(left: 25.0,right: 25.0),
              child: Column(
                mainAxisSize: MainAxisSize.max,
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  Container(
                    height: 60.0,
                    child: Image.asset('assets/images/login_logo.png')),

                  SizedBox(
                    height: 30.0,
                  ),
                  TextFormField(
                    style: new TextStyle(fontSize:18.0,color: Color(0xFF005283)),
                    decoration: InputDecoration(
                      // prefixIcon: Icon(Icons.email, color: Colors.grey),
                        enabledBorder: UnderlineInputBorder(borderSide: new BorderSide(color: Color(0xFF005283))),
                        hintStyle: TextStyle(color: Color(0xFF005283),fontSize:18.0,fontFamily: "WorkSansLight"),
                        hintText: 'Email/Mobile No.'),
                  ),
                  SizedBox(
                    height: 30.0,
                  ),
                  TextFormField(
                    style: new TextStyle(fontSize:18.0,color: Color(0xFF005283)),
                    obscureText: true,
                    decoration: InputDecoration(
                      // prefixIcon: Icon(Icons.email, color: Colors.grey),
                        labelStyle: new TextStyle(color: Colors.blue),
                        enabledBorder: UnderlineInputBorder(borderSide: new BorderSide(color: Color(0xFF005283))),
                        hintStyle: TextStyle(color: Color(0xFF005283),fontSize:18.0,fontFamily: "WorkSansLight"),
                        hintText: 'Password'),
                  ),
                  SizedBox(
                    height: 30.0,
                  ),

                  RaisedButton(
                    onPressed: () {

                    },
                    shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(60.0)),
                    child: Padding(
                        padding: EdgeInsets.only(top:18.0,bottom: 18.0,left: 10.0,right: 10.0),
                        child: Text('LOG IN',style: new TextStyle(fontSize:18.0,color: Color(0xFF005283),fontFamily: "WorkSansMedium"),)),
                    color: Color(0xFFc1ff02),
                    textColor: Colors.white,),

                  SizedBox(
                    height: 30.0,),
                  Row(
                    children: <Widget>[
                      Expanded(
                        child: Divider(
                          color: Color(0xFF005283),
                          height: 8.0,
                        ),
                      ),
                      SizedBox(
                        width: 8.0,
                      ),
                      Text(
                        'OR CONNECT WITH',
                        style: TextStyle(fontSize:14.0,color: Color(0xFF005283),fontFamily: "WorkSansLight",fontWeight: FontWeight.normal),
                      ),
                     SizedBox(
                          width: 8.0,
                      ),
                      Expanded(
                        child: Divider(
                          color: Color(0xFF005283),
                          height: 8.0,
                        ),
                      )
                    ],
                  ),

                  Row(
                    children: <Widget>[
                      FlatButton.icon(
                          onPressed: null,
                          label: Text('Login with Facebook',style: TextStyle(color: Colors.white),),
                          icon: Icon(Icons.local_gas_station,color: Colors.white,),
                          shape: Border.all(color: Colors.grey,width: 2.0,style: BorderStyle.none ),
                          //shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0),)
                      ),

                      OutlineButton(
                        color: Colors.black,
                          child: new Text("Button text"),
                          onPressed: null,
                          shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0))
                      ),
                    ],
                  ),
                  SizedBox(
                    height: 20.0,
                  ),
              Center(
                child: GestureDetector(
                  onTap: () {
                    Navigator.pushNamed(context, "myRoute");
                  },
                  child:  RichText(
                    text: new TextSpan(
                      children: <TextSpan>[
                        TextSpan(text:'Not a Member? ',style: TextStyle(color: Color(0xFF005283),fontSize: 14.0,fontWeight: FontWeight.w400),),
                        TextSpan(text:'Register Now',style: TextStyle(color: Color(0xFF005283),fontSize: 18.0,fontWeight: FontWeight.w600),),
                      ],
                    ),
                  ),
                ) ,
              ),
                  SizedBox(
                    height: 20.0,
                  ),

                  OutlineButton(
                      color: Color(0xFF005283),
                      child: new Text("CONTINUE AS GUEST",style: TextStyle(color: Color(0xFF005283),fontSize: 14.0,)),
                      onPressed: null,
                      shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0))
                  ),
            ],),))
          ],
        ),
      ),
    );
  }
}

Answer 1

来自 devicePixelRatio 属性的文档: https://docs.flutter.io/flutter/dart-ui/Window/devicePixelRatio.html

The number of device pixels for each logical pixel. This number might not be a power of two. Indeed, it might not even be an integer. For example, the Nexus 6 has a device pixel ratio of 3.5.

Device pixels are also referred to as physical pixels. Logical pixels are also referred to as device-independent or resolution-independent pixels.

By definition, there are roughly 38 logical pixels per centimeter, or about 96 logical pixels per inch, of the physical display. The value returned by devicePixelRatio is ultimately obtained either from the hardware itself, the device drivers, or a hard-coded value stored in the operating system or firmware, and may be inaccurate, sometimes by a significant margin.

The Flutter framework operates in logical pixels, so it is rarely necessary to directly deal with this property.

所以你真的不必担心设备分辨率，但如果你想访问该属性，你可以喜欢以下内容:

double devicePixelRatio = MediaQuery.of(context).devicePixelRatio;