OpenFlutter / flutter_screenutil

Flutter screen adaptation, font adaptation, get screen information
https://pub.dartlang.org/packages/flutter_screenutil
Apache License 2.0
3.88k stars 496 forks source link

ios 跟 Android 适配不一样 #69

Closed litaoyuan closed 4 years ago

litaoyuan commented 4 years ago

95F377EEB41112783C4EF8CA23976AEF 这个是ios的 3F5904AC17047FA1B3CAF3543042F7C1 这个是Android的

lizhuoyuan commented 4 years ago

应该是有些高度的地方用了setHeight了吧 ,替换成setWidth试试

litaoyuan commented 4 years ago

Widget oneWidght() { return Container( color: Colors.white, width: double.infinity, height: ScreenUtils.setHeight(437), child: Stack( children: [ Image.asset("images/home_zuan.gif"), Positioned( top: ScreenUtil.statusBarHeight, child: Offstage( offstage: boolTonzhi, child: Container( color: Color.fromRGBO(255, 246, 210, 1), padding: EdgeInsets.only(left: ScreenUtils.setWidth(40)), width: ScreenUtils.setWidth(750), height: ScreenUtils.setHeight(70), child: Row( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.center, children: [ Container( decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.topLeft, end: Alignment.bottomRight, colors: [ Color.fromRGBO(255, 138, 0, 1), Color.fromRGBO(255, 91, 0, 1), ], ), borderRadius: BorderRadius.all( Radius.circular(ScreenUtils.setWidth(1000)), ), ), child: Padding( padding: EdgeInsets.only( left: ScreenUtils.setWidth(14), top: ScreenUtils.setHeight(6), right: ScreenUtils.setWidth(14), bottom: ScreenUtils.setHeight(6)), child: Text( "紧急", style: TextStyle( fontSize: ScreenUtils.setSp(24), color: Colors.white, ), ), ), ), Container( child: Text( "修复了一些bug", style: TextStyle( fontSize: ScreenUtils.setSp(26), color: Color.fromRGBO(255, 117, 47, 1), ), ), margin: EdgeInsets.only(left: ScreenUtils.setWidth(10)), ), ], ), ), ), ), Positioned( top: ScreenUtil.statusBarHeight + ScreenUtils.setHeight(100), child: Container( width: ScreenUtils.setWidth(750), padding: EdgeInsets.only( left: ScreenUtils.setWidth(50), right: ScreenUtils.setWidth(100), ), child: Row( children: [ Expanded( flex: 1, child: InkWell( onTap: () => ToastUtils.showToast( "总共赚了多少钱", ), child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( "累计收入(元)", style: TextStyle( color: Colors.white, fontSize: ScreenUtils.setSp(24), ), ), SizedBox( height: ScreenUtils.setHeight(13), ), Text( "1000", style: TextStyle( color: Colors.white, fontSize: ScreenUtils.setSp(56), fontFamily: "Din", ), ), ], ), ), ), Expanded( flex: 1, child: InkWell( onTap: () => ToastUtils.showToast("今日赚了多少钱", mGravity: ToastGravity.CENTER), child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( "今日收入(元)", style: TextStyle( color: Colors.white, fontSize: ScreenUtils.setSp(24), ), ), SizedBox( height: ScreenUtils.setHeight(13), ), Text( "200", style: TextStyle( color: Colors.white, fontSize: ScreenUtils.setSp(56), fontFamily: "Din", ), ), ], ), ), ), ], ), ), ), Positioned( left: ScreenUtils.setWidth(40), bottom: ScreenUtils.setHeight(44), child: InkWell( onTap: () => ToastUtils.showToast("点击了打卡挑战"), child: Container( width: ScreenUtils.setWidth(157), height: ScreenUtils.setHeight(32), child: Image.asset("images/ic_home_daka.png"), ), ), ), Positioned( right: ScreenUtils.setWidth(20), bottom: ScreenUtils.setHeight(0), child: InkWell( onTap: () { ToastUtils.showToast("点击了动画区域"); }, child: Container( width: ScreenUtils.setWidth(288), height: ScreenUtils.setHeight(288), ), ), ), ], ), ); }

litaoyuan commented 4 years ago

上下的距离我都用ScreenUtils.setHeight 左右的距离我都用ScreenUtils. setWidth

double.infinity,这个会影响吗?

lizhuoyuan commented 4 years ago

因为现在手机比例比较多 , 18:9 18:10 啥的 长列表的布局, 如果在上下的适配上用setHeight可能导致不是自己想要的效果 因为这是专门针对高度来做适配的方法, 如无特殊需要 , 可以使用setWidth

litaoyuan commented 4 years ago

也就是说,只能是宽适配,高度随手机适配,大部分都用setWidth

lizhuoyuan commented 4 years ago

是的 除非是有需求高度上要保持比例, 但一般不用 所以用setWidth没有问题就不用考虑setHeight的方法了

litaoyuan commented 4 years ago

解决了,谢谢

lizhuoyuan commented 4 years ago

确认是这个问题吗?

litaoyuan commented 4 years ago

是的 C678F112FC6E297BD435F954EBA765E6 这是效果图,有些位置不对,是因为我获取状态栏的高度 iOS 跟android 不一样,所以导致有些适配有点问题