首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >Dart 语法快速通关:写给 Flutter 开发者的基础教程

Dart 语法快速通关:写给 Flutter 开发者的基础教程

作者头像
爱吃大芒果
发布2025-12-24 14:14:22
发布2025-12-24 14:14:22
90
举报

作者:爱吃大芒果

个人主页 爱吃大芒果

本文所属专栏 Flutter

更多专栏

前言:作为 Flutter 的官方开发语言,Dart 的语法是 Flutter 开发的基石。本教程专为 Flutter 开发者量身打造,摒弃冗余内容,聚焦核心语法要点与实战高频场景,帮助你快速掌握 Dart 基础,无缝衔接 Flutter 开发。阅读前建议准备好 Dart 开发环境(推荐使用 Android Studio + Dart 插件),配合代码示例实操,效率更高。

一、Dart 基础认知

1.1 语言特性核心总结

Dart 是强类型、单线程、支持 AOT(提前编译)和 JIT(即时编译)的面向对象语言,核心特性贴合 Flutter 开发需求:

  • 强类型检查:编译期校验类型,减少运行时错误(支持类型推断,无需显式声明所有类型);
  • 单线程模型:通过事件循环(Event Loop)处理异步任务,与 Flutter UI 渲染机制深度契合;
  • 兼具面向对象与函数式特性:支持类、继承、泛型,同时支持高阶函数、lambda 表达式等;
  • 内存自动管理:基于垃圾回收机制,无需手动管理内存,降低开发成本。
1.2 第一个 Dart 程序(Hello World)

创建 main.dart 文件,编写基础程序,理解 Dart 程序的入口规则:

代码语言:javascript
复制
代码语言:javascript
复制
// 程序入口:必须是 main 函数,无返回值可省略 void
void main() {
  // 打印语句:Flutter 中调试打印常用 print,等价于 Flutter 的 debugPrint(后者可避免日志截断)
  print("Hello Dart! Hello Flutter!");
}
// 运行方式:1. 终端执行 dart main.dart;2. Android Studio 直接运行

注意:Dart 中语句必须以分号结尾,代码块使用大括号 {} 包裹,这与 Java 类似,Flutter 组件嵌套也遵循此语法规范。

二、核心语法:变量与类型

2.1 变量声明:var、dynamic、final、const

Dart 提供多种变量声明方式,核心区别在于“类型是否可变”和“值是否可变”,这直接影响 Flutter 中的状态管理逻辑:

代码语言:javascript
复制
void main() {
  // 1. var:类型推断,声明后类型固定(不可变)
  var name = "Flutter Dev"; // 推断为 String 类型
  name = 123; // 错误:类型不匹配,编译期报错
  
  // 2. dynamic:动态类型,类型和值均可变(慎用,会失去强类型校验)
  dynamic age = 25;
  age = "二十五"; // 合法,但增加运行时风险
  
  // 3. final:值不可变,类型可推断(运行时确定值)
  final height = 1.8; // 推断为 double,值不可修改
  // height = 1.85; // 错误:final 变量不可重新赋值
  
  // 4. const:编译时常量,值和类型均不可变(编译期确定值)
  const pi = 3.14159; // 编译期就确定值,性能优于 final
  const maxWidth = 375.0; // Flutter 中常用 const 声明固定尺寸、颜色等常量
  
  // 注意:Flutter 中,const 修饰的组件会被缓存,减少重建开销(如 const Text("Hello"))
}

最佳实践:优先使用 final/const(不可变变量),尤其是在 Flutter 中,不可变数据能提升组件渲染性能,减少状态混乱;仅在确实需要修改值时使用 var,避免使用 dynamic。

2.2 基础数据类型(高频使用)

Dart 基础类型与 Flutter 开发场景深度绑定,以下是高频使用类型及实战示例:

  • String:字符串,支持单引号、双引号、三引号(多行文本),Flutter 中文本组件(Text)的核心参数类型;
  • num(int + double):数值类型,int 为整数,double 为浮点数,常用于 Flutter 中的尺寸、间距、字体大小等;
  • bool:布尔类型,仅 true/false 两个值,用于控制 Flutter 组件的显示/隐藏(如 Visibility)、状态切换等;
  • List:列表(数组),Flutter 中 ListView 组件的数据源核心类型;
  • Map:键值对集合,常用于解析接口返回数据、存储组件配置信息等。
代码语言:javascript
复制
代码语言:javascript
复制
void main() {
  // 1. String
  String userName = '张三';
  String multiLineText = """这是多行文本
  适用于 Flutter 中长文本展示场景""";
  print(userName + ",你好"); // 字符串拼接
  print("姓名:$userName"); // 字符串插值(推荐,简洁高效)
  
  // 2. num
  int count = 10; // 商品数量
  double price = 99.9; // 商品价格
  print(count * price); // 数值计算,Flutter 中可用于计算总价、尺寸等
  
  // 3. bool
  bool isLogin = true;
  if (isLogin) {
    print("已登录,展示首页"); // Flutter 中可据此切换登录页/首页
  }
  
  // 4. List(Flutter 高频)
  List<String> goodsList = ["手机", "电脑", "平板"]; // 泛型指定元素类型
  goodsList.add("耳机"); // 添加元素
  print(goodsList[0]); // 访问元素,Flutter 中 ListView.builder 遍历此列表
  
  // 5. Map(解析接口数据常用)
  Map<String, dynamic> userInfo = {
    "id": 1,
    "name": "李四",
    "age": 28
  };
  print(userInfo["name"]); // 访问键值对
}

三、函数与箭头函数:Flutter 组件构建核心

Dart 函数是 Flutter 开发的核心载体,尤其是箭头函数,广泛用于组件构建、事件回调等场景。

3.1 基础函数定义

Dart 函数支持显式声明返回值类型,参数可指定默认值,语法简洁:

代码语言:javascript
复制
// 基础函数:计算两个数的和,显式声明返回值类型 int
int add(int a, int b) {
  return a + b;
}

// 带默认参数的函数:Flutter 中组件参数常用默认值(如 Text 的 style 参数)
String getGreeting(String name, String prefix = "Hello") {
  return "$prefix, $name!";
}

// 无返回值函数:可省略返回值类型(默认 void)
void showMessage(String message) {
  print(message);
}

void main() {
  print(add(2, 3)); // 输出 5
  print(getGreeting("Flutter")); // 输出 Hello, Flutter!(使用默认 prefix)
  print(getGreeting("Flutter", "Hi")); // 输出 Hi, Flutter!(自定义 prefix)
  showMessage("函数测试完成");
}
3.2 箭头函数(=>):Flutter 高频使用

箭头函数是简化函数的语法糖,适用于函数体只有一行代码的场景,在 Flutter 中构建组件、处理点击事件时极为常用:

代码语言:javascript
复制
void main() {
  // 基础箭头函数:等价于普通函数的简化形式
  int subtract(int a, int b) => a - b;
  print(subtract(5, 2)); // 输出 3
  
  // Flutter 场景1:列表遍历(List 的 forEach 回调)
  List<String> fruits = ["苹果", "香蕉", "橙子"];
  fruits.forEach((fruit) => print("水果:$fruit"));
  
  // Flutter 场景2:组件事件回调(如 ElevatedButton 的 onPressed)
  // 模拟 ElevatedButton 的点击事件(实际在 Flutter 组件树中使用)
  void onButtonClick() => print("按钮被点击");
  onButtonClick(); // 模拟点击,输出 按钮被点击
  
  // Flutter 场景3:构建简单组件(如 ListView 的 itemBuilder)
  // 模拟构建列表项组件(实际代码)
  // ListView.builder(
  //   itemCount: fruits.length,
  //   itemBuilder: (context, index) => Text(fruits[index]), // 箭头函数构建 Text 组件
  // )
}

关键提示:箭头函数后面只能跟一行代码,不能加大括号 {};Flutter 中几乎所有组件的回调函数(如 onPressed、onTap)、列表遍历构建组件等场景,都会用到箭头函数,务必熟练掌握。

四、面向对象:Flutter 组件的本质

Dart 是纯面向对象语言,一切皆对象(包括基础类型)。Flutter 中的所有组件(如 Text、Container、ListView)本质上都是 Dart 类的实例,因此必须掌握类、对象、构造函数等核心概念。

4.1 类与对象的基础使用
代码语言:javascript
复制
// 定义类:Flutter 组件都是这样的类(如 StatelessWidget、StatefulWidget)
class Person {
  // 成员变量(属性)
  String name;
  int age;
  
  // 构造函数(简化写法:Dart 语法糖,等价于赋值语句)
  Person(this.name, this.age);
  
  // 成员方法
  void introduce() {
    print("我叫 $name,今年 $age 岁");
  }
}

void main() {
  // 创建对象:Flutter 中构建组件就是创建类的实例(如 Text("Hello"))
  Person person = Person("王五", 30);
  person.introduce(); // 调用方法,输出 我叫 王五,今年 30 岁
  
  // 修改对象属性
  person.age = 31;
  person.introduce(); // 输出 我叫 王五,今年 31 岁
}
4.2 构造函数进阶:命名构造函数

Dart 支持命名构造函数,可通过不同名称创建对象,Flutter 中常用于组件的不同初始化场景:

代码语言:javascript
复制
class User {
  String id;
  String name;
  String email;
  
  // 默认构造函数
  User(this.id, this.name, this.email);
  
  // 命名构造函数:从 Map 初始化(解析接口数据常用)
  User.fromMap(Map<String, dynamic> map) {
    id = map["id"];
    name = map["name"];
    email = map["email"];
  }
  
  void showUserInfo() {
    print("ID:$id,姓名:$name,邮箱:$email");
  }
}

void main() {
  // 1. 通过默认构造函数创建
  User user1 = User("1001", "赵六", "zhaoliu@example.com");
  user1.showUserInfo();
  
  // 2. 通过命名构造函数创建(解析接口返回的 Map 数据)
  Map<String, dynamic> userMap = {
    "id": "1002",
    "name": "孙七",
    "email": "sunqi@example.com"
  };
  User user2 = User.fromMap(userMap);
  user2.showUserInfo(); // 输出 ID:1002,姓名:孙七,邮箱:sunqi@example.com
}

Flutter 关联:Flutter 中的 StatefulWidget 就使用了命名构造函数(如 StatefulWidget()),而从接口数据构建模型对象时,命名构造函数(fromMap)是标准写法。

五、异步编程:Flutter 网络请求核心

Flutter 开发中,网络请求、文件读写等操作都需要异步处理,Dart 提供 Futureasync/await 语法,简化异步编程流程(替代传统回调地狱)。

5.1 Future:异步操作的载体

Future 表示一个“未来可能完成的操作”,有两种状态:未完成(pending)和已完成(成功/失败)。Flutter 中网络请求(如 http.get)的返回值就是 Future。

代码语言:javascript
复制
// 模拟异步操作:模拟网络请求获取数据(延迟 2 秒)
Future<String> fetchData() {
  // Future.delayed:延迟执行,模拟网络耗时
  return Future.delayed(Duration(seconds: 2), () {
    return "模拟接口返回的数据:Flutter 教程";
  });
}

void main() {
  print("开始请求数据...");
  // 处理 Future:使用 then 接收成功结果,catchError 捕获错误
  fetchData()
      .then((data) {
        print("数据获取成功:$data");
      })
      .catchError((error) {
        print("数据获取失败:$error");
      })
      .whenComplete(() {
        print("请求完成(无论成功/失败)");
      });
  print("请求已发起,等待结果..."); // 此语句会先执行,证明异步特性
}

输出顺序: 开始请求数据... 请求已发起,等待结果... (延迟 2 秒后) 数据获取成功:模拟接口返回的数据:Flutter 教程 请求完成(无论成功/失败)

5.2 async/await:同步语法写异步

async/await 是 Future 的语法糖,能让异步代码看起来像同步代码,更易读,是 Flutter 异步编程的首选方式:

代码语言:javascript
复制
代码语言:javascript
复制
Future<String> fetchData() {
  return Future.delayed(Duration(seconds: 2), () {
    return "模拟接口返回的数据:Flutter 教程";
  });
}

// 注意:使用 await 的函数必须添加 async 关键字,返回值默认是 Future
void getData() async {
  print("开始请求数据...");
  try {
    // await:等待 Future 完成,获取结果
    String data = await fetchData();
    print("数据获取成功:$data");
  } catch (error) {
    print("数据获取失败:$error");
  } finally {
    print("请求完成(无论成功/失败)");
  }
}

void main() {
  getData();
  print("请求已发起,等待结果...");
}

Flutter 实战场景:网络请求(如使用 dio 库)、本地存储(如 shared_preferences)等异步操作,均使用 async/await 语法。例如:

代码语言:javascript
复制
// 模拟 Flutter 中使用 dio 发起网络请求
// Future<Response> fetchApiData() async {
//   return await Dio().get("https://api.example.com/data");
// }

六、总结与 Flutter 衔接要点

本教程覆盖了 Dart 语法的核心要点,这些内容是 Flutter 开发的基础,两者的衔接关键在于:

  • Flutter 组件 = Dart 类的实例(如 Text、Container 都是类);
  • Flutter 组件构建 = 函数/箭头函数(如 build 方法返回组件,itemBuilder 用箭头函数构建列表项);
  • Flutter 状态管理/网络请求 = Dart 异步编程(Future + async/await);
  • Flutter 数据展示 = Dart 基础类型(List 作为 ListView 数据源,Map 解析接口数据)。

后续学习建议:掌握以上基础后,可重点学习 Dart 的泛型、扩展方法,以及 Flutter 中基于 Dart 的状态管理(如 Provider、Bloc)、网络请求封装等实战内容。多写 Flutter 小demo(如列表展示、网络数据请求),强化 Dart 语法的应用记忆。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2025-12-10,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、Dart 基础认知
    • 1.1 语言特性核心总结
    • 1.2 第一个 Dart 程序(Hello World)
  • 二、核心语法:变量与类型
    • 2.1 变量声明:var、dynamic、final、const
    • 2.2 基础数据类型(高频使用)
  • 三、函数与箭头函数:Flutter 组件构建核心
    • 3.1 基础函数定义
    • 3.2 箭头函数(=>):Flutter 高频使用
  • 四、面向对象:Flutter 组件的本质
    • 4.1 类与对象的基础使用
    • 4.2 构造函数进阶:命名构造函数
  • 五、异步编程:Flutter 网络请求核心
    • 5.1 Future:异步操作的载体
    • 5.2 async/await:同步语法写异步
  • 六、总结与 Flutter 衔接要点
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档