搭建开发环境
- 下载解压Flutter的sdk,并且将其中的bin目录配置到环境变量
- Android Studio安装安卓SDK,通常启动时如果未安装过都会自动执行下载安装
- Android Studio安装Flutter的插件
安装flutter插件时会自动安装其依赖的dart插件 - 在Android Studio的
AVD Manager
当中创建模拟器(需要选择屏幕尺寸以及安卓系统版本,当前系统中不存在的版本需要下载)
如果使用真机调试运行,该步骤可以跳过
执行flutter doctor
可以检验当前环境当中存在的问题
可以看到IDEA也是支持的,但是我们不打算使用IDEA来进行开发,所以就不在IDEA当中安装插件了
No devices available代表还未启动虚拟机或者连接真机
其余几项都是校验通过的
创建flutter项目
当Android Studio的flutter插件安装无误之后,就可以创建flutter项目了
新建的是一个flutter的demo项目
包含一个标题栏,一个按钮,和中间区域内的若干文字
点击按钮时进行计数,文字会相应变化
项目当中包含一个main.dart文件
内容如下
1 | // 引入material样式 |
以上代码当中构建对象都省略了new关键字
其中的每个对象都是一个组件(Widget)
常用组件
组件以及组件的一些属性,基本算是前端html和css的思想
Text组件
这是一个文本组件,可以用于在App当中显示文字
1 | Text( |
容器组件
就是Container
类以及它的一些子类
可以简单理解为div,通常用来方便控制布局
1 | Container( |
属性也都很容易理解,可以设置容器的宽高,内外边距等等
decoration属性可以用来修饰容器
比如边框、背景色等
1 | Container( |
图片组件
Image
是图片组件
显示图片的方式有4种
- Image.asset - 加载资源图片,资源图片需要打包在APP当中
- Image.network - 网络资源图片
- Image.file - 设备本地的图片,比如相机拍照后的图片预览
- Image.memory - 加载内存中的图片,Uint8List
1 | Image.network( |
图片混合模式
可以给图片混合上一种颜色,类似于添加滤镜
1 | Image.network( |
列表组件
就是ListView
组件
通常用于数据列表的展示
1 | ListView(children: <Widget>[ |
ListView其中的children是一个Widget数组
其中可以是任意的组件,纵向列表通常使用ListTile
(列表瓦片)来作为列表成员
其中的leading和title都可以是任意组件,可以利用各种组件的组合来构造出漂亮的列表
ListView有属性scrollDirection
,表示列表元素的排列方向,默认是纵向的
如果设置为 Axis.horizontal 可以实现横向的列表
自定义组件
当页面结构很复杂的时候,如果我们把原生组件都堆积在一起
就会产生非常多的嵌套结构,造成代码难以维护
所以就很有必要创建自定义的组件,进行封装和重用
1 | class MyList extends StatelessWidget { |
封装的组件就是这样一个继承StatelessWidget
的类
可以放在任意一个需要使用Widget的地方