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,会有一个快速插入父组件的操作

相关文章
|
18天前
|
小程序 JavaScript 前端开发
小程序常见的UI框架
小程序常见的UI框架
|
9天前
|
开发框架 Android开发 iOS开发
Flutte之UI编写总结
Flutte之UI编写总结
|
前端开发 JavaScript Java
如何对使用React和EMF parsley设计的Web UI应用程序进行测试自动化
Web UI应用程序是指通过Web浏览器访问的应用程序,它们通常具有复杂的用户界面和交互逻辑。为了确保Web UI应用程序的功能、性能和用户体验,测试自动化是一种有效的方法,它可以在不需要人工干预的情况下,快速地执行重复的测试任务,并提供可靠的测试结果。本文将介绍如何对使用React和EMF parsley设计的Web UI应用程序进行测试自动化,以及使用HtmlUnitDriver和java代码实现的示例。
120 0
如何对使用React和EMF parsley设计的Web UI应用程序进行测试自动化
|
11月前
以前编写好能够正常运行的 SAP UI5 代码,几个月后忽然不能运行了该怎么办?
以前编写好能够正常运行的 SAP UI5 代码,几个月后忽然不能运行了该怎么办?
|
10月前
uview-ui工具函数的使用
uview-ui工具函数的使用
|
12月前
|
JavaScript 前端开发
使用 TypeScript 编写 SAP UI5 应用的准备工作
使用 TypeScript 编写 SAP UI5 应用的准备工作
|
XML Java BI
QMUILayout, 让 UI 开发更简单
在 Android UI开发过程中,我们会觉得非常繁琐的事情是什么呢?分隔线、圆角、边框、阴影、点击态等,在以往的实践中,我们都是通过 drawable 去实现的,非常麻烦。以分隔线为例,如果左右都打通,那还能复用,但现在的设计师都喜欢左边或右边有一定的 inset,而 inset 的值并非一成不变的,这不经意间就使得项目添加了数不清的 drawable,因此目前大多数人都开始尝试不使用 drawble 去解决这些问题了,QMUI 也不例外。
234 0
|
定位技术 UED
UI 设计是什么?
UI是用户界面的简称,UI是用户与设备、网站或应用程序交互的媒介,目标是使用户体验简单直观,用户只需付出最少的努力即可获得所期望的结果。
174 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 的一个具体例子