Flutter初探

Flutter简介

Flutter is fast.It's powered by the same hardware-accelerated Skia 2D graphics library that underpins Chrome and Android.We architected Flutter to support glitch-free, jank-free graphics at the native speed of your device.Flutter code is powered by the world-class Dart platform, which enables compilation to native 32-bit and 64-bit ARM code for iOS and Android.
Flutter很快。它由支持Chrome和Android的相同硬件加速的Skia 2D图形库提供支持。我们设计Flutter以支持设备本机速度的无毛刺，无抖动图形.Flutter代码由世界驱动 -class Dart平台，可以编译为iOS和Android的本机32位和64位ARM代码。

跨平台：RN 底层沿用的是原生iOS和安卓区别
Flutter：谷歌开发的，有自己的渲染引擎，保持Android和iOS保持一致性
渲染方式自己渲染

Skia简介

Skia is sponsored and managed by Google, but is available for use by anyone under the BSD Free Software License.
Skia是一个开放源码的二维图形库，它提供跨各种硬件和软件平台工作的通用API。它是Google Chrome和Chrome OS、Android、Mozilla Firefox和Firefox OS以及许多其他产品的图形引擎。

Flutter小技巧

1.创建flutter工程

#创建flutter工程
#工程名不能用大写
flutter create flutter_demo

Flutter Package 只能用于 Dart 语言
Flutter Plugin 针对原生和Dart
Flutter Module 适用混合开发
pubspec.yaml 配置资源
代码写在lib文件夹下
主文件：main.dart

2.运行Flutter

模拟器运行

#运行 flutter run -d '模拟器名称'
flutter run -d 'iPhone X'

真机运行

#真机运行：配置证书

调试和热更新

Shift + R 重新运行
Shift + r 热更新
Release 版本后不支持热更新，有点儿像playground
flutter项目在Android环境下不能放在中文目录下，否则会编译报错或者用终端运行

输入r是热重载
输入R是热重启
输入h是flutter的帮助
输入d是断开调试
输入q是退出调试

热更新按钮，不用每次都运行工程

image

快捷键 Command + /

3.清除缓存

#清除flutter缓存 rm flutter缓存目录
rm /opt/flutter/bin/cache/lockfile

4.格式化代码

Command + option + L 格式化代码

5.代码块伸缩快捷键

Command + 减号代码块伸缩

6. 查看连接设备

flutter devices

7.补充

final 不可变 var 可变
stl 无状态代码块快捷键 stful 有状态代码块创建
MaterialApp封装好一些列UI控件，类似iOS原生控件
SizeBox(占位，设置间距)
代码块全部合起来 Command + Shift + 减号
Command + Shift + O 快速打开文件
Command + [ / ] 快速切换上次编辑文件
类名是驼峰的，文件名不是驼峰
option + 回车自动导入所需头文件
removetop 禁掉类似uitableview的自动偏移

8.源码

语言

dart语言

UI框架导入

import 'package:flutter/material.dart'; //类似UIKit

Flutter widget分类 `Widget(小部件类似UIView)`

有状态的 Stateful(多一个状态类) StatefulWidget
无状态 Stateless(不可变) StatelessWidget

入口类函数

Simple

//入口函数(widget),采用声明式Ui
void main() {
  runApp(MyWidget());
}

其他写法

// main函数只有一行代码时，可以用 => 代替括号
void main() => runApp(App());```

定义Class及样式

传统定义Class

//一个widget就是一个类
class MyWidget extends StatelessWidget {
  //build 渲染方法或者构造函数
  @override
  Widget build(BuildContext context) {
    final _textStyle = TextStyle(
        color: Colors.red, fontSize: 40.0, fontWeight: FontWeight.bold);
    return Center(
      child: Text(
        'Hello,Widget,牛逼🐂',
        textDirection: TextDirection.ltr,
        style: _textStyle,
      ),
    );
  }

  Widget func() {
    return Text(
      '哈哈',
      textDirection: TextDirection.ltr,
    );
  }
}

MaterialApp使用

//dart语言
import 'package:flutter/material.dart'; //类似UIKit

//void main() {
//  runApp(MyWidget());
//}
// main函数只有一行代码时，可以用 => 代替括号
void main() => runApp(App());

class App extends StatelessWidget {
  //MaterialApp封装好一些列UI控件，类似iOS原生控件
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('我是MaterialApp'),
        ), //导航条
        body: MyWidget(),
      ), //根控制器,debug标志
      theme: ThemeData(primaryColor: Colors.yellow),
    );
  }
}

//一个widget就是一个类
class MyWidget extends StatelessWidget {
  //build 渲染方法或者构造函数
  @override
  Widget build(BuildContext context) {
    final _textStyle = TextStyle(
        color: Colors.red, fontSize: 40.0, fontWeight: FontWeight.bold);
    return Center(
      child: Text(
        'Hello,Widget,牛逼🐂',
        textDirection: TextDirection.ltr,
         style: _textStyle,
      ),
    );
  }

  Widget func() {
    return Text(
      '哈哈',
      textDirection: TextDirection.ltr,
    );
  }
}
//material.app

效果图

Flutter效果图

补充

拖动widget自动生成相关代码 https://flutterstudio.app 可以玩玩

1.hot reload和hot restart

hot reload和hot restart

他们的区别是什么

如果修改了状态相关的代码则需要hot restart，否则只需要hot reload即可

2.hot reload和hot restart 置灰，无法点击

hot reload和hot restart 置灰，无法点击

解决办法：

Clear the contentsof console