更新:2023-05-25
为什么Flutter中大量final修饰的属性, const 修饰的构造方法(常量对象)
- 因为Flutter的渲染逻辑,是增量渲染。 Widget 结构是树状结构
- 想改变屏幕内容就直接改变widget对象
- 常量对象的创造效率更高
flutter SDK放的位置,如果说只有一个人用就放在家目录,多人用可以考虑放在根目录下。 根目录下需要注意文件夹的权限。
环境搭建 (针对于Mac)
环境的配置:
来到你对应Shell的配置文件进行配置。 如果你使用默认的bash那么配置 ~/.bash_profile 如果你使用zsh (Mac新系统默认是zsh)那么配置 ~/.zshrc
Flutter 镜像配置(镜像地址)
export PUB_HOSTED_URL=https//pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
Flutter 配置 (SDK位置)
export FLUTTER=~/flutter # SDK 的位置
export PATH=$FLUTTER/bin:$PATH
检测flutter环境是否配置好
flutter doctor
(base) ➜ ~ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.10.0, on macOS 13.4 22F66 darwin-arm64, locale zh-Hans-CN)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.2)
[✓] IntelliJ IDEA Ultimate Edition (version 2023.1.1)
[✓] VS Code (version 1.78.2)
[✓] Connected device (2 available)
[✓] Network resources
• No issues found!
(base) ➜ ~
如果有问题一个一个修理哈。
创建flutter工程以及flutter的优势
第一步: 选择新建Flutter工程
第二步: 选择工程模板
四个模式的区别:
-
application :纯flutter 项目
-
Plugin: 多平台的原生代码
-
Package: flutter 的第三方库
-
Module: 混合项目打包成对应的二进制包 集成到原生项目
-
Skeleton:骨架,路由、资源、多语言、状态管理,文件夹等好的实践方法
-
FFI Plugin: 是专门为绑定本地源代码而设计出来的,虽然在 Plugin中也可以,在不需要对应平台的代码时候 可以使用这个(主要是C、C++ )
命令模式创建
flutter create myProject
可选参数
–template= type指定不同的项目类型,
–template=app/module/package/plugin/skeleton
–platforms=ios/android/windows/linux/macos/web。指定项目支持哪些平台
-a:指定android开发使用的语言,默认是kotlin
-i:指定ios使用的语言,默认是swift
创建一个plugin
flutter create --org com.leb --template=plugin --platforms=android,ios -a kotlin -i swift hello
安卓Studio创建
优势
之前的跨平台RN 是基于原生UI包装来跨平台,flutter是把 skia 渲染引擎安装到手机上 进行dart代码,不依赖原生UI。有一套自己的UI 体系, iOS 安卓 高度统一。
热重载
全平台(除了小程序)(有一个第三方支持小程序MPFlutter)
hello_flutter
import 'package:flutter/material.dart';
类似于 iOS 里面的 UIKit
widget
万物皆widget
import 'package:flutter/material.dart';
void main() {
runApp(
const Center(
child: Text(
"hello",
// 这个东西必须有(文字的渲染方式)
textDirection: TextDirection.ltr,
),
);
);
}
分为有状态的和无状态的
自定义widget
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Text("data");
// TODO: implement build
// throw UnimplementedError();
}
}
文字样式
Color 专门有一个对象 列举了一些常用的颜色。它是Colors
MaterialAPP
import 'package:flutter/material.dart'; 貌似所有的东西都跟 这个 material.dart相关
官方封装的一个常用框架:
return const MaterialApp(
home: Scaffold(
),
);
初探ListView
使用 ListView.builder 加载数据列表
class MyWidget extends StatelessWidget {
const MyWidget({super.key});
Widget _loadList(BuildContext context, int index) {
return Column(
children: [
Image.network(
datas[index].imageUrl,
height: 128,
),
Text(datas[index].name)
],
);
}
@override
Widget build(BuildContext context) {
return Center(
child: ListView.builder(
itemBuilder: _loadList,
itemCount: datas.length,
)
);
}
}