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

相关文章
|
前端开发 JavaScript 小程序
|
9天前
|
小程序 JavaScript 前端开发
小程序常见的UI框架
小程序常见的UI框架
|
1月前
|
前端开发 关系型数据库 MySQL
Python基于Django框架图书管理系统,Bootstrap框架UI,后台EasyUI框架UI,有登录,实现增删改查的富文本效果
本文介绍了一个使用Python Django框架开发的图书管理系统,该系统采用Bootstrap框架进行前端UI设计,EasyUI框架用于后台UI界面,集成了富文本编辑器,并实现了登录及增删改查功能。
|
前端开发 JavaScript Java
如何对使用React和EMF parsley设计的Web UI应用程序进行测试自动化
Web UI应用程序是指通过Web浏览器访问的应用程序,它们通常具有复杂的用户界面和交互逻辑。为了确保Web UI应用程序的功能、性能和用户体验,测试自动化是一种有效的方法,它可以在不需要人工干预的情况下,快速地执行重复的测试任务,并提供可靠的测试结果。本文将介绍如何对使用React和EMF parsley设计的Web UI应用程序进行测试自动化,以及使用HtmlUnitDriver和java代码实现的示例。
119 0
如何对使用React和EMF parsley设计的Web UI应用程序进行测试自动化
|
11月前
以前编写好能够正常运行的 SAP UI5 代码,几个月后忽然不能运行了该怎么办?
以前编写好能够正常运行的 SAP UI5 代码,几个月后忽然不能运行了该怎么办?
|
前端开发 JavaScript Android开发
|
12月前
|
JavaScript 前端开发
使用 TypeScript 编写 SAP UI5 应用的准备工作
使用 TypeScript 编写 SAP UI5 应用的准备工作
|
XML Java BI
QMUILayout, 让 UI 开发更简单
在 Android UI开发过程中,我们会觉得非常繁琐的事情是什么呢?分隔线、圆角、边框、阴影、点击态等,在以往的实践中,我们都是通过 drawable 去实现的,非常麻烦。以分隔线为例,如果左右都打通,那还能复用,但现在的设计师都喜欢左边或右边有一定的 inset,而 inset 的值并非一成不变的,这不经意间就使得项目添加了数不清的 drawable,因此目前大多数人都开始尝试不使用 drawble 去解决这些问题了,QMUI 也不例外。
232 0
|
Web App开发 XML 存储
深入学习SAP UI5框架代码系列之二:UI5 控件的渲染器
深入学习SAP UI5框架代码系列之二:UI5 控件的渲染器
深入学习SAP UI5框架代码系列之二:UI5 控件的渲染器
|
设计模式 前端开发 JavaScript
使用 SAP UI5 系统测试工具 UIVeri5 的一个具体例子
https://developers.sap.com/tutorials/cp-uiveri5-cap.html
使用 SAP UI5 系统测试工具 UIVeri5 的一个具体例子