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 中的 居中/居左/居右 还是比较坑的，各种名字，不过总体来说还好了~

评论已关闭。