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效果图

补充

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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,743评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,296评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,285评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,485评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,581评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,821评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,960评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,719评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,186评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,516评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,650评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,329评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,936评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,757评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,991评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,370评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,527评论 2 349

推荐阅读更多精彩内容

  • 本文主要大致介绍Flutter 整体框架,简单粗略的使用,深度暂且还没有。用Dart,写了个计算器的demo和列表...
    空而小sao阅读 1,971评论 0 0
  • Flutter是一款移动应用程序SDK,一份代码可以同时生成iOS和Android两个高性能、高保真的应用程序,媲...
    Jaking阅读 605评论 0 0
  • 以下内容来自组内分享,如有侵权,请联系作者删除。目录: 什么是Flutter? Flutter环境配置 如何创建一...
    南风_001阅读 841评论 0 0
  • 最新消息 Flutter在12月5号发布了最新的稳定版本1.0,象征着Flutter新技术提上了征程,期待着他能靠...
    纳兰寒明阅读 1,706评论 0 1
  • 这两天看了下flutter,感觉这两年可能会爆发,所以尝试在mac和win10上面跑了下hello world.....
    TaoLandd阅读 762评论 0 0