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 和其他跨平台框架的对比

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 {
     @override
     void speak() {
       print("汪汪汪");
     }
   }
   
   void main() {
     Animal animal = Dog();
     animal.speak(); // 输出：汪汪汪
   }
   

3. 抽象类与接口：

   abstract class Shape {
     double getArea();
   }
   
   class Circle implements Shape {
     double radius;
   
     Circle(this.radius);
   
     @override
     double 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"]); // 输出：张三