Flutter简介
跨平台:RN 底层沿用的是原生iOS和安卓区别
Flutter:谷歌开发的,有自己的渲染引擎,保持Android和iOS保持一致性
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环境下不能放在中文目录下,否则会编译报错或者用终端运行
热更新按钮,不用每次都运行工程
快捷键 Command + /
3.清除缓存
#清除Flutter缓存 rm Flutter缓存目录
rm /opt/Flutter/bin/cache/lockfile
4.格式化代码
Command + option + L 格式化代码
5.代码块伸缩快捷键
Command + 减号 代码块伸缩
6.补充
- final 不可变 var 可变
- stl 无状态代码块快捷键
- MaterialApp封装好一些列UI控件,类似iOS原生控件
7.源码
语言
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,牛逼
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。