响应式UI在Flutter中

21 浏览
0 Comments

响应式UI在Flutter中

在Ui中,margin、padding、文本和图片大小给出了固定的值。我没有使用Fractional box和Constraint box等。我需要通过media query根据屏幕大小设置。

我尝试使用如下的media query,但无法正确设置。

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

如果我的padding是padding: const EdgeInsets.only(left: 25.0, right: 25.0),如何在media query中设置padding和其他固定大小呢?这里12是文档和示例,但我无法通过media query找到方法。

我还使用了这个库,但并没有我想要的效果。

以下是我的代码。

class _LoginPageState extends State {
  @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: [
            SizedBox(height: height35,),
            Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                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: [
                  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: [
                      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: [
                      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(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))
                  ),
            ],),))
          ],
        ),
      ),
    );
  }
}

\"在这里输入图片描述\"

admin 更改状态以发布 2023年5月21日
0
0 Comments

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

每个逻辑像素的设备像素数。这个数字可能不是2的幂。实际上,它可能甚至不是整数。例如,Nexus 6的设备像素比率为3.5。

设备像素也称为物理像素。逻辑像素也称为设备独立或分辨率无关像素。

按定义,每厘米大约有38个逻辑像素,或每英寸物理显示屏大约有96个逻辑像素。devicePixelRatio返回的值最终来自于硬件本身、设备驱动程序或存储在操作系统或固件中的硬编码值,并可能不准确,有时误差很大。

Flutter框架在逻辑像素上运行,因此很少需要直接处理此属性。

因此,您不必太担心设备分辨率,但如果您想访问该属性,可以通过以下方式:

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

0