Flutte之UI编写总结

简介: 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,会有一个快速插入父组件的操作,如图常见的布局组件:
image.png

相关文章
|
2月前
|
开发框架 Android开发 iOS开发
Flutte之UI编写总结
Flutte之UI编写总结
|
安全 网络安全
SAP CRM WebClient UI 支持的一些 url 参数
SAP CRM WebClient UI 支持的一些 url 参数
|
XML 数据格式 容器
一个真实的 SAP 标准 UI5 应用的扩展开发项目(Extension Project)分享 - UI5 界面上新增订单创建者字段(2)
一个真实的 SAP 标准 UI5 应用的扩展开发项目(Extension Project)分享 - UI5 界面上新增订单创建者字段
138 0
|
XML 存储 搜索推荐
一个真实的 SAP 标准 UI5 应用的扩展开发项目(Extension Project)分享 - UI5 界面上新增订单创建者字(1)段
一个真实的 SAP 标准 UI5 应用的扩展开发项目(Extension Project)分享 - UI5 界面上新增订单创建者字段
108 0
|
JavaScript 前端开发 API
通过一个实际例子,理解 SAP UI5 sap.ui.model.odata.v2.ODataModel API 中 BindingContext 绑定上下文的概念和用法试读版
通过一个实际例子,理解 SAP UI5 sap.ui.model.odata.v2.ODataModel API 中 BindingContext 绑定上下文的概念和用法试读版
|
搜索推荐 Shell
SAP Fiori 3 的 Quartz Theme 在 WebClient UI 和 SAPGUI 中的应用
SAP Fiori 3 的 Quartz Theme 在 WebClient UI 和 SAPGUI 中的应用
161 0
SAP 电商云 Spartacus UI Configurable Product 的页面设置(3)
SAP 电商云 Spartacus UI Configurable Product 的页面设置
SAP 电商云 Spartacus UI Configurable Product 的页面设置(2)
SAP 电商云 Spartacus UI Configurable Product 的页面设置
SAP 电商云 Spartacus UI Configurable Product 的页面设置(1)
SAP 电商云 Spartacus UI Configurable Product 的页面设置(1)
|
XML 测试技术 区块链
SAP 电商云 Spartacus UI Configurable Product 的页面设置(1)
SAP 电商云 Spartacus UI Configurable Product 的页面设置