51工具盒子

依楼听风雨
笑看云卷云舒,淡观潮起潮落

Flutte之UI编写总结

目前Flutter是当下最为热门的跨平台开发框架,Flutter的组件非常的多,有几百个,我们不可能都熟悉了之后再去写项目,我一般学习新的技术或者学习,花1个小时学习一下基本语法,然后从编写UI开始,再学习使用一些第三方库,基本上就能上手了,今天总结一下Flutter上开发UI的几种重要技巧

Flutter核心主要几种组件:

1、Scaffold定义了一个 UI 框架,这个框架包含 头部导航栏,body,右下角浮动按钮,底部导航栏等;

2、Container在Flutter中用的非常多,两个重要属性:constraints(边界约束),decoration:背景、边框、圆角、阴影等;

3、Padding在Flutter中也是一个组件,可以单独作为父组件来设置;

4、Row和Column是通过设置多个child来决定子组件是水平布局还是垂直布局

5、Stack是层叠布局,在iOS是通过frame来设置位置,与Android中FrameLayout类似,默认在左上角位置,Positioned(top:200,right:100来设置位置;

6、CustomScrollView、ListView、GridView是非常常见的界面主组件的,几乎每个界面都会被这三个组件来嵌套;

小技巧:因为Flutter的嵌套的写法一开始会非常不适应,往往会要在当前组件再去用一个组件作为父组件,在AndroidStudio中有一个快捷操作,按Alt+Enter,会有一个快速插入父组件的操作,如图常见的布局组件:


赞(6)
未经允许不得转载:工具盒子 » Flutte之UI编写总结