Flutter基础入门

1. 基础入门

---

1.1 什么是 Flutter

1.1.1 Flutter 的特点和优势

• 跨平台开发：一套代码同时支持 Android、iOS、Web、桌面和嵌入式设备。
• 高性能：使用 Skia 图形引擎直接渲染，避免桥接（Bridge）开销，性能接近原生。
• 快速开发：
  • Hot Reload：实时预览代码修改的效果，极大提高开发效率。
  • 丰富的 Widget：内置大量可复用的 UI 组件，减少开发时间。
• 一致性：无论在 Android 还是 iOS，UI 表现一致。
• 强大的社区支持：丰富的插件生态，几乎覆盖所有主流功能需求。

1.1.2 Flutter 的架构

• Dart 编程语言：
  • Flutter 的核心语言，支持面向对象和函数式编程。
  • 提供高效的垃圾回收机制和强大的异步编程能力。
• Widget：
  • Flutter 的一切都是 Widget，UI 是由 Widget 树构建的。
  • 分为 StatelessWidget 和 StatefulWidget。
• Skia 渲染引擎：
  • Flutter 使用 Skia 渲染引擎直接绘制 UI，而不是依赖平台的原生控件。
  • 提供高性能的 2D 图形渲染。
• 平台通道（Platform Channel）：
  • 用于与原生代码（如 Java、Kotlin、Swift、Objective-C）交互，扩展功能。

1.1.3 Flutter 和其他跨平台框架的对比

特性	Flutter	React Native	Kotlin Multiplatform
语言	Dart	JavaScript/TypeScript	Kotlin
渲染方式	自定义渲染（Skia 引擎）	使用原生控件	使用原生控件
性能	接近原生	依赖桥接，性能稍逊	接近原生
开发效率	高效（Hot Reload + 丰富的 Widget）	高效（Hot Reload）	中等（需编写平台特定代码）
生态系统	丰富的插件生态	丰富的插件生态	插件生态较少
适用场景	UI 密集型应用	UI 密集型应用	需要共享业务逻辑的多平台项目

---

1.2 环境搭建

1.2.1 安装 Flutter SDK

1. 下载 Flutter SDK：
   • 前往 Flutter 官网 下载适合你操作系统的 SDK。
2. 解压并配置环境变量：
   • 将 Flutter 的 bin 目录添加到系统的环境变量中。
   • 验证安装：运行 flutter doctor 检查环境配置。

1.2.2 配置开发环境

1. Android Studio：
   • 安装 Flutter 和 Dart 插件。
   • 配置 Android 模拟器（AVD）。
2. VS Code：
   • 安装 Flutter 和 Dart 插件。
   • 配置调试环境。
3. Xcode（仅 macOS）：
   • 安装最新版本的 Xcode。
   • 配置 iOS 模拟器。

1.2.3 配置模拟器

1. Android 模拟器：
   • 打开 Android Studio，进入 AVD Manager。
   • 创建一个虚拟设备，选择目标 API 级别。
   • 启动模拟器。
2. iOS 模拟器：
   • 打开 Xcode，进入 Xcode > Open Developer Tool > Simulator。
   • 选择设备类型（如 iPhone 14 Pro）。

1.2.4 测试运行第一个 Flutter 应用

1. 创建一个新项目：

   flutter create my_first_app
   cd my_first_app
   flutter run
   

2. 修改代码并使用 Hot Reload 查看实时效果。

---

1.3 Dart 基础

1.3.1 Dart 的语法基础

1. 变量与数据类型：
   • Dart 是强类型语言，支持类型推断。

   int age = 25;
   double height = 1.75;
   String name = "Flutter";
   bool isFlutterAwesome = true;
   var inferredType = "Dart"; // 自动推断为 String
   

2. 条件语句与循环：
   • 条件语句：

     if (age > 18) {print("成年人");
     } else {print("未成年人");
     }
     

   • 循环：

     for (int i = 0; i < 5; i++) {print("循环次数：$i");
     }
     

1.3.2 函数与匿名函数

1. 函数定义：

   int add(int a, int b) {return a + b;
   }
   

2. 匿名函数：

   var multiply = (int a, int b) => a * b;
   print(multiply(2, 3)); // 输出：6
   

1.3.3 异步编程

1. Future：

   Future<String> fetchData() async {await Future.delayed(Duration(seconds: 2));return "数据加载完成";
   }
   

2. Stream：

   Stream<int> numberStream() async* {for (int i = 0; i < 5; i++) {await Future.delayed(Duration(seconds: 1));yield i;}
   }
   

1.3.4 面向对象编程

1. 类与对象：

   class Person {String name;int age;Person(this.name, this.age);void introduce() {print("我是 $name，今年 $age 岁");}
   }void main() {var person = Person("张三", 25);person.introduce();
   }
   

2. 继承与多态：

   class Animal {void speak() {print("动物发出声音");}
   }class Dog extends Animal {@overridevoid speak() {print("汪汪汪");}
   }void main() {Animal animal = Dog();animal.speak(); // 输出：汪汪汪
   }
   

3. 抽象类与接口：

   abstract class Shape {double getArea();
   }class Circle implements Shape {double radius;Circle(this.radius);@overridedouble getArea() => 3.14 * radius * radius;
   }
   

1.3.5 常用集合

1. List：

   var numbers = [1, 2, 3];
   numbers.add(4);
   print(numbers); // 输出：[1, 2, 3, 4]
   

2. Set：

   var uniqueNumbers = {1, 2, 3};
   uniqueNumbers.add(3);
   print(uniqueNumbers); // 输出：{1, 2, 3}
   

3. Map：

   var person = {"name": "张三", "age": 25};
   print(person["name"]); // 输出：张三
   

---