天天瞎忙活,QQ:705719110,欢迎来撩!

Flutter初体验

Flutter学习 随风 237℃ 0评论

前面学习了一些Dart的基础,有了这些我们就可以来尝试使用Flutter了,这里介绍一下环境的配置与部分常用的基础组件。

环境搭建

Flutter的环境搭建起来很简单,去到Flutter官网查看一般都没问题,我这里简单介绍一下 mac 下 Flutter 环境的搭建。

  1. 安装 Java SDK,配置环境变量,因为我们这里要先搭建 Android 开发环境;
  2. 安装 Android Studio,安装 SDK,然后安装 Flutter 插件(可能需要自备梯子);
  3. 安装 Visual Studio Code,然后安装 Flutter 插件,由于 Android Studio 太重了,打开之后内存暴增, 我这里还是选择了更轻量级并且这两年很火爆的编辑器 VS Code;
  4. 在 Flutter 官网下载最新的 mac 版 Flutter SDK 压缩包,解压到某个路径;
  5. 配置环境变量,我们国内的网络,除了配置 Flutter 的环境变量,还需要配置其他的,你懂的,下面我列出来:

这样我这边的环境就搭建好了,直接运行就能看到效果~


说在组件前面

  • 在介绍组件之前我们先看几个东西:
    1. 在 Dart 里一切都是对象,哪怕是一个方法也可以赋值给一个变量,所以都是对象;
    2. Widget : Flutter 里面的组件都是 Widget,所以写法其实都差不多;
    3. package : 导入其他文件相当于导入包,因为默认把文件当成包,使用 import 导入。
  • 先明确一下:

使用 VS Code打开项目,能够看到有一个 lib 目录,打开此目录下的 main.dart 文件,可以看到一个 main 方法,看过之前的 Dart 学习就知道这是项目的入口,我们删除里面的内容,然后在 lib 同级目录下创建 basic 文件夹,并在里面创建 任意 dart 文件,我们之后的代码都写在这里,而 main.dart 中只作为入口引入该文件,也就是里面只有一行代码。


常用基础组件

  1. TextWidget 文本组件,所带的属性其实很像前端,可以查看一下文档
    1. TextAlign属性
    2. maxLines属性
    3. overflow属性
    4. style属性

  1. Button 按钮, 用法差不多
    1. RaisedButton “漂浮”按钮,自带阴影
    2. FlatButton 扁平按钮
    3. OutlineButton 有边框
    4. IconButton 可点击的Icon,不包括文字

  1. ImageWidget 图片
    1. Image.network() 从网络加载
    2. Image.asset() 从本地资源中加载,但是添加资源后需要配置 pubspec.yaml
    3. fit: BoxFit.fill, //图片填充形式
    4. color
    5. colorBlendMode: BlendMode.modulate, //颜色混合模式,结合颜色来用
    6. repeat: ImageRepeat.repeat, //类似于css中的图片重复

  1. TextField 输入框
    1. autofocus 是否自动获取焦点。
    2. InputDecoration 用于控制TextField的外观显示,如提示文本、背景颜色、边框等。

  1. 其他的一些常用的东西
    1. Icons 图标集合,集成了很多图标
    2. Colors 颜色集合
    3. Flutter 中的 居中/居左/居右 还是比较坑的,各种名字,不过总体来说还好了~

转载请注明:怼码人生 » Flutter初体验

喜欢 (0)
头像
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址