Flutter初体验

/ 0评 / 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 的环境变量,还需要配置其他的,你懂的,下面我列出来:

# flutter环境变量
vim ~/.bash_profile
export PATH="$PATH:/flutter/bin"

# 国内用户需要配置
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

# 启用环境变量
source ~/.bash_profile
 
 # 检查环境配置
 flutter doctor
 
 # 一般初次配置的话会提示缺的依赖,我这里需要执行下面的命令
 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
 brew update
 brew install cocoapods
 pod setup # 如果这里执行不动可以看我前面的文章呢
 brew install ideviceinstaller
 brew install ios-deploy
 brew install --HEAD usbmuxd
 brew link usbmuxd
 brew install --HEAD libimobiledevice
 flutter doctor --android-licenses  # 安装Android证书,一路yes 
 
 # 创建项目,项目名称只能是小写
 flutter create project_name
 
 # 运行项目
 flutter run -d 
 #r 键:点击后热加载,也就算是重新加载吧。
 #p 键:显示网格,这个可以很好的掌握布局情况,工作中很有用。
 #o 键:切换android和ios的预览模式。
 #q 键:退出调试预览模式。

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


说在组件前面

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

main() => runApp(ClassName());

常用基础组件

  1. TextWidget 文本组件,所带的属性其实很像前端,可以查看一下文档
    1. TextAlign属性
    2. maxLines属性
    3. overflow属性
    4. style属性
class MyTestApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Text Widget',
        home: Scaffold(
          appBar: AppBar(
            title: Text('Button'),
          ),
          body: Center(
            child: Text(
                'fadflajflajfljalfjaljfjfaslfdafmaldfmalmflamsfljljflsjlnvx,mvnz,nvc,aldfjlajfljsaflsjlfjsalfj',
                textAlign: TextAlign.left,
                maxLines: 2,
              ),
            ),
        )
    );
  }
}
  1. Button 按钮, 用法差不多
    1. RaisedButton "漂浮"按钮,自带阴影
    2. FlatButton 扁平按钮
    3. OutlineButton 有边框
    4. IconButton 可点击的Icon,不包括文字
class MyTestApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Button',
        home: Scaffold(
          appBar: AppBar(
            title: Text('Button'),
          ),
          body: Center(
            child: RaisedButton(
                 child: Text('Button'),
                 onPressed: () => {
                   //点击事件 
                 },
              ),
            ),
        )
    );
  }
}
  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中的图片重复
class MyTestApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Container Widget',
      home: Scaffold(
              body: Center(
                child: Container(
                  child: Image.network(
                    'https://blog.duicode.com/wp-content/uploads/2017/09/%E5%B7%A5%E5%85%B7.jpg',
                    // fit: BoxFit.fill,  //图片填充
                    // color: Colors.greenAccent,
                    // colorBlendMode: BlendMode.modulate, //颜色混合模式,结合颜色来用
                    repeat: ImageRepeat.repeat,
                  ),
                  width: 300,
                  height: 200,
                  color: Colors.lightBlue,
                ),
              )
          ),
    );
  }
}
  1. TextField 输入框
    1. autofocus 是否自动获取焦点。
    2. InputDecoration 用于控制TextField的外观显示,如提示文本、背景颜色、边框等。
class MyTestApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Button',
        home: Scaffold(
          appBar: AppBar(
            title: Text('Button'),
          ),
          body: Center(
            child: TextField(
                 autofocus: true,
                 decoration: InputDecoration(
                                    labelText: "用户名",
                                    hintText: "用户名或邮箱",
                                    prefixIcon: Icon(Icons.person)
                  ),
               ),
            ),
        )
    );
  }
}
  1. 其他的一些常用的东西
    1. Icons 图标集合,集成了很多图标
    2. Colors 颜色集合
    3. Flutter 中的 居中/居左/居右 还是比较坑的,各种名字,不过总体来说还好了~

评论已关闭。