响应式UI在Flutter中
响应式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和其他固定大小呢?这里1,2是文档和示例,但我无法通过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日
根据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;