加入收藏 | 设为首页 | 会员中心 | 我要投稿 核心网 (https://www.hxwgxz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 业界 > 正文

Flutter 开发中的一些 Tips

发布时间:2019-06-21 21:46:36 所属栏目:业界 来源:唯鹿lv-2
导读:学习Flutter也有一阵子了。闲着没事,用了公司一个已经凉凉的App设计图来练手。当然了接口不可能用的了,所以都是些死数据,实现效果可以说是很完美了(得到了设计的认可。。。)。当然自己也是边查边写,也借鉴了许多Github上优秀的Flutter项目。现在开源出

同时使用Theme还可以修改许多默认的设置,比如FlatButton的默认宽度为88,高度为36,但是FlatButton中没有直接修改的属性,网上好多的方法都是通过包一层Container去修改,不仅增加的嵌套,有些需求还不能达到。所以善用Theme可以让你省时省力,不过缺点就是你需要去翻翻源码,寻找使用这些Theme的地方。

5.注意平台差异

注意部分组件在Android与IOS平台之间的差异。

(1)Scaffold的 AppBar,AppBar中默认的title在Android中靠左显示,IOS中居中显示。如果需要两个平台效果统一,需要设置在AppBar中主动设置centerTitle属性。同时AppBar的返回箭头图标也不相同,统一的话需要自定义leading。

Flutter 开发中的一些 Tips

(2)页面跳转如果使用MaterialPageRoute来做过渡效果,注意Android中新的页面会从屏幕底部滑动到屏幕顶部,IOS中新的页面会从屏幕右侧滑动到屏幕左侧。

如果需要两个平台效果统一,我们不使用自带效果,可以自定义一个。

  1. Navigator.push(context, PageRouteBuilder(transitionDuration: Duration(milliseconds: 300), 
  2.   pageBuilder: (context, animation, secondaryAnimation){ 
  3.     return new FadeTransition( //使用渐隐渐入过渡, 
  4.       opacity: animation, 
  5.       child: TestPage(), 
  6.     ); 
  7.   }) 
  8. ); 

要么修改Theme,统一两平台的实现。:

  1. class MyApp extends StatelessWidget { 
  2.  
  3.   static const Map _defaultBuilders = { 
  4.     TargetPlatform.android: FadeUpwardsPageTransitionsBuilder(), 
  5.     TargetPlatform.iOS: FadeUpwardsPageTransitionsBuilder(), 
  6.   }; 
  7.    
  8.   @override 
  9.   Widget build(BuildContext context) { 
  10.      
  11.     return MaterialApp( 
  12.       theme: ThemeData( 
  13.         pageTransitionsTheme: PageTransitionsTheme( 
  14.           builders: _defaultBuilders 
  15.         ) 
  16.       ), 
  17.       ... 
  18.     ); 
  19.   } 

(3)ScrollPhysics效果,可以滑动的部件都有一个physics属性。滑动到边界时,Android平台为边缘阴影的效果ClampingScrollPhysics,IOS为回弹效果BouncingScrollPhysics。如果需要统一,可以指定physics属性。

(4)状态栏方面,Android平台默认是半透明的效果,IOS则是透明效果。比如Android要实现IOS的效果,可以设置状态栏为透明。不过IOS要实现Android的效果则不行。。。,难道只能自定义?有知道方法的可以分享一下。

  1. void main(){ 
  2.   runApp(MyApp()); 
  3.   // 透明状态栏 
  4.   if (Platform.isAndroid) { 
  5.     SystemUiOverlayStyle systemUiOverlayStyle =  
  6.     SystemUiOverlayStyle(statusBarColor: Colors.transparent); 
  7.     SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle); 
  8.   } 

5.输入键盘

当TextField的keyboardType属性设置为TextInputType.phone 或TextInputType.number时,IOS系统弹出的数字输入键盘没有"完成"按钮,导致输入法无法关闭。当然了Android不存在这个问题。

(编辑:核心网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读