From 33a328c852eb9674351eec8fd362a45747032cef Mon Sep 17 00:00:00 2001 From: Cxx0822 <1556464090@qq.com> Date: Fri, 5 Dec 2025 17:36:33 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E6=96=B0=E5=A2=9Eflutter=E6=96=87?= =?UTF-8?q?=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/.vitepress/config.mts | 3 +- docs/Flutter/DartGuide.md | 372 ++++++++++++++++++++++++++++++++++ docs/Flutter/FlutterGuide.md | 243 ++++++++++++++++++++++ docs/Flutter/Guide.md | 0 docs/Flutter/index.md | 3 +- docs/Web-Front/Vue3-Common.md | 1 + 6 files changed, 620 insertions(+), 2 deletions(-) create mode 100644 docs/Flutter/DartGuide.md create mode 100644 docs/Flutter/FlutterGuide.md delete mode 100644 docs/Flutter/Guide.md diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts index aed810d..fbbbcf9 100644 --- a/docs/.vitepress/config.mts +++ b/docs/.vitepress/config.mts @@ -81,7 +81,8 @@ export default defineConfig({ { text: 'Flutter', items: [ - { text: '基础教程', link: '/Flutter/Guide' }, + { text: 'Dart基础教程', link: '/Flutter/DartGuide' }, + { text: 'Flutter基础教程', link: '/Flutter/FlutterGuide' }, { text: '实战技巧', link: '/Flutter/Practice' } ] } diff --git a/docs/Flutter/DartGuide.md b/docs/Flutter/DartGuide.md new file mode 100644 index 0000000..8e98aea --- /dev/null +++ b/docs/Flutter/DartGuide.md @@ -0,0 +1,372 @@ +# 一、基础语法 +## 1.1 变量与常量 +```dart +// 显式声明类型 +String name = 'Dart'; +int age = 10; + +// 类型推断（使用 var） +var city = 'Beijing'; // 自动推断为 String +var count = 100; // 自动推断为 int + +// 延迟初始化 +String? email; // 可空类型 +late String description; // 延迟初始化 + +const PI = 3.14159; +const List nums = [1, 2, 3]; // 不可修改的列表 + +final currentTime = DateTime.now(); // 运行时才知道值 +final List numbers = [1, 2, 3]; +numbers.add(4); // 可以！列表内容可修改 + +dynamic value = 'Hello'; +value = 123; // 可以 +value = true; // 可以 + +// 非空类型（默认） +String name = 'Dart'; +// name = null; // 错误！ + +// 可空类型（使用 ?） +String? nickname; +nickname = null; // 正确 + +// 空值断言（!） +String? value = 'Hello'; +print(value!.length); // 确信不为null时使用 + +// 空值合并运算符（??） +String? name; +String displayName = name ?? 'Guest'; // name为null时使用'Guest' + +// 条件访问（?.） +String? text; +print(text?.length); // text为null时返回null，不报错 +``` + +  const常量：值在编译期就确定，对象及其内容都不可变。 +  final常量：值在运行时确定，但只能赋值一次，引用不可变，但对象内容可能可变。 + +## 1.2 数据类型 +```dart +// 单引号或双引号 +String str1 = 'Hello'; +String str2 = "World"; + +// 字符串插值 +String name = 'Dart'; +int version = 3; +print('$name $version'); +print('${name version}'); + +// int - 整数 +int count = 10; +int hex = 0xDEADBEEF; + +// double - 浮点数 +double price = 19.99; +double exponent = 1.42e5; // 科学计数法 + +// num - int 和 double 的父类 +num value1 = 10; +num value2 = 10.5; + +// 常用方法 +int a = 5; +double b = 3.14159; +print(b.toStringAsFixed(2)); // 3.14 +print(int.parse('42')); // 字符串转int +print(double.parse('3.14')); // 字符串转double + +bool isActive = true; +bool isCompleted = false; + +// 创建列表 +List numbers = [1, 2, 3, 4, 5]; +var fruits = ['apple', 'banana', 'orange']; + +// 访问元素 +print(numbers[0]); // 1 +print(numbers.length); // 5 + +// 添加元素 +numbers.add(6); +numbers.addAll([7, 8, 9]); + +// 删除元素 +numbers.remove(3); // 删除值为3的元素 +numbers.removeAt(0); // 删除索引0的元素 + +// 常用方法 +print(numbers.first); // 第一个元素 +print(numbers.last); // 最后一个元素 +print(numbers.isEmpty); // 是否为空 +numbers.forEach((num) => print(num)); // 遍历 + +// 不可变列表 +const fixedList = [1, 2, 3]; + +// 扩展运算符 +var list1 = [1, 2, 3]; +var list2 = [0, ...list1]; // [0, 1, 2, 3] + +// 创建 Map +Map ages = { + 'Alice': 25, + 'Bob': 30, + 'Charlie': 35 +}; + +// 访问元素 +print(ages['Alice']); // 25 + +// 添加/修改元素 +ages['David'] = 28; +ages['Alice'] = 26; + +// 删除元素 +ages.remove('Bob'); + +// 常用方法 +print(ages.keys); // 所有键 +print(ages.values); // 所有值 +print(ages.length); // 元素个数 +print(ages.isEmpty); // 是否为空 +print(ages.containsKey('Alice')); // 是否包含键 + +// 遍历 +ages.forEach((key, value) { + print('$key: $value'); +}); +``` + +# 二、函数 +```dart +// 简写（箭头函数，适用于单行表达式） +String greet2(String name) => 'Hello, $name!'; + +// 必传参数 +int add(int a, int b) { + return a + b; +} + +// 可选位置参数（用 [] 包裹，可提供默认值） +String introduce(String name, [int? age, String city = 'Beijing']) { + if (age != null) { + return '$name, $age years old, from $city'; + } + return '$name from $city'; +} + +// 调用示例 +print(introduce('Alice')); // Alice from Beijing +print(introduce('Bob', 25)); // Bob, 25 years old, from Beijing +print(introduce('Charlie', 30, 'Shanghai')); // Charlie, 30 years old, from Shanghai + +// 命名参数（用 {} 包裹） +void createUser({ + required String name, // required 表示必传 + int age = 18, // 有默认值 + String? email // 可选，可为null +}) { + print('Name: $name, Age: $age, Email: $email'); +} + +// 调用时使用参数名 +createUser(name: 'Alice'); +createUser(name: 'Bob', age: 25, email: 'bob@example.com'); + +// 命名参数的优点：顺序无关，更清晰 +void setStyle({String? color, double? size, bool? bold}) { + // ... +} +setStyle(bold: true, color: 'red'); // 顺序可以任意 +``` + +# 三、类 +```dart +class BankAccount { + String accountNumber; // 公有属性 + double _balance; // 私有属性（以_开头） + + BankAccount(this.accountNumber, this._balance); + + // 公有方法 + double getBalance() { + return _balance; + } + + // 私有方法 + void _updateBalance(double amount) { + _balance += amount; + } + + void deposit(double amount) { + if (amount > 0) { + _updateBalance(amount); + } + } + + // Getter + double get balance => _balance; + + // Setter + set balance(double value) { + if (value >= 0) { + _balance = value; + } + } +} + +// 使用 +var account = BankAccount('123456', 1000); +print(account.balance); // 使用getter：1000 +account.deposit(500); +print(account.balance); // 1500 +account.balance = 2000; // 使用setter +``` + +# 四、任务 +```dart +void eventLoopExample() { + print("主线程开始"); + + // 微任务 + scheduleMicrotask(() { + print("微任务1"); + }); + + // 异步任务 + Future.delayed(Duration(seconds: 0), () { + print("异步任务1"); + }); + + // 再次添加微任务 + scheduleMicrotask(() { + print("微任务2"); + }); + + print("主线程结束"); +} + +//输出结果： +主线程开始 +主线程结束 +微任务1 +微任务2 +异步任务1 +``` + +  在 Dart 的事件循环中，执行顺序如下： +1. 同步代码：首先执行所有同步代码。 +2. 微任务队列：然后依次执行微任务队列中的所有微任务。 +3. 事件队列：最后执行事件队列中的异步任务。 + +# 五、异步编程 +```dart +// 1. Future() 构造函数 +Future calculateSum(int a, int b) { + return Future(() { + return a + b; + }); +} + +// 2. Future.value() - 立即完成 +Future immediateFuture = Future.value("立即结果"); + +// 3. Future.error() - 立即失败 +Future errorFuture = Future.error("错误信息"); + +// 4. Future.delayed() - 延迟执行 +Future delayedFuture = Future.delayed( + Duration(seconds: 3), + () => "延迟结果" +); + +// 5. Future.sync() - 同步执行 +Future syncFuture = Future.sync(() => 42); + +// 从网络请求 +Future fetchUserData() async { + return await http.get(Uri.parse('https://api.example.com/user')); +} + +// 文件操作 +Future writeToFile(String content) async { + final file = File('data.txt'); + return await file.writeAsString(content); +} +``` + +  其他用法： +```dart +Future processData() async { + try { + print("开始获取数据..."); + + // 等待第一个 Future + final data1 = await fetchDataFromSource1(); + print("数据1: $data1"); + + // 等待第二个 Future + final data2 = await fetchDataFromSource2(); + print("数据2: $data2"); + + // 处理结果 + final result = await processCombinedData(data1, data2); + print("最终结果: $result"); + + } catch (e) { + print("处理过程中出错: $e"); + } finally { + print("清理资源"); + } +} + +// 1. Future.wait() - 等待所有完成 +Future fetchAllData() async { + final futures = [ + fetchUserData(), + fetchProductData(), + fetchOrderData(), + ]; + + try { + final results = await Future.wait(futures); + print("所有数据获取完成: $results"); + } catch (e) { + print("部分请求失败: $e"); + } +} + +// 2. Future.any() - 第一个完成 +Future getFastestResponse() { + return Future.any([ + fetchFromServer1(), + fetchFromServer2(), + fetchFromServer3(), + ]); +} + +// 3. Future.forEach() - 顺序执行 +Future processItems(List items) async { + await Future.forEach(items, (item) async { + await processItem(item); + }); +} + +// 4. 链式操作 +Future complexOperation() { + return authenticateUser() + .then((token) => fetchUserProfile(token)) + .then((profile) => updateProfile(profile)) + .then((updated) => saveToDatabase(updated)) + .then((savedId) => "操作完成，ID: $savedId") + .catchError((error) { + // 统一错误处理 + print("链式操作失败: $error"); + return "默认值"; + }); +} +``` \ No newline at end of file diff --git a/docs/Flutter/FlutterGuide.md b/docs/Flutter/FlutterGuide.md new file mode 100644 index 0000000..0f500d0 --- /dev/null +++ b/docs/Flutter/FlutterGuide.md @@ -0,0 +1,243 @@ +# 应用核心Widget +```dart +// Flutter 应用的入口，配置主题、路由、国际化等。 +MaterialApp( + home: HomePage(), // 必需：首页 + theme: ThemeData.light(), // 主题 + routes: {'/details': (c) => DetailsPage()}, // 路由 + debugShowCheckedModeBanner: false, // 隐藏调试条 +) + +// 页面骨架，包含顶部栏、内容区、悬浮按钮等标准组件。 +Scaffold( + appBar: AppBar(title: Text('标题')), // 顶部栏 + body: Center(child: Text('内容')), // 主体 + floatingActionButton: FloatingActionButton( + onPressed: () {}, // 悬浮按钮 + ), + drawer: Drawer(child: Text('侧边栏')), // 抽屉 + bottomNavigationBar: BottomNavigationBar( + items: [], // 底部导航 + ), +) +``` + +# 布局Widget +```dart +Container( + width: 100, + height: 50, + margin: EdgeInsets.all(10), // 外边距 + padding: EdgeInsets.all(20), // 内边距 + decoration: BoxDecoration( + color: Colors.blue, // 背景色 + borderRadius: BorderRadius.circular(10), // 圆角 + border: Border.all(color: Colors.black), // 边框 + ), + child: Text('内容'), +) + +Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, // 主轴对齐 + crossAxisAlignment: CrossAxisAlignment.center, // 交叉轴对齐 + children: [Text('左'),Text('中'),Text('右')], +) + +Column( + children: [ + Expanded(child: Container(color: Colors.red)), // 扩展 + Flexible(child: Container(color: Colors.blue)), // 灵活 + ], +) + +// 层叠布局，用于重叠显示 Widget，配合 Positioned 定位。 +Stack( + children: [ + Container(color: Colors.red, width: 200, height: 200), // 底层 + Positioned( // 绝对定位 + top: 20, + left: 20, + child: Text('重叠内容'), + ), + ], +) + +Row( + children: [ + Text('左'), + Spacer(), // 自动占据剩余空间 + Text('右'), + ], +) + +Row( + children: [ + Expanded( + flex: 2, // 权重 + child: Container(color: Colors.red), + ), + Expanded( + flex: 1, + child: Container(color: Colors.blue), + ), + ], +) +``` + +# 列表和网格 +```dart +ListView( + children: List.generate(20, (i) => ListTile( + title: Text('项目 $i'), // 列表项 + )), +) + +// 懒加载版本（推荐） +ListView.builder( + itemCount: 1000, + itemBuilder: (context, index) => ListTile( + title: Text('项目 $index'), + ), +) + +GridView.count( + crossAxisCount: 2, // 每行数量 + children: List.generate(20, (i) => Container( + color: Colors.blue, + child: Center(child: Text('$i')), + )), +) +``` + +# 展示 Widget +```dart +Text( + 'Hello Flutter', + style: TextStyle( + fontSize: 20, + color: Colors.blue, + fontWeight: FontWeight.bold, + ), + textAlign: TextAlign.center, +) + +Image.network( + 'https://example.com/image.jpg', + width: 100, + height: 100, + fit: BoxFit.cover, // 填充方式 + loadingBuilder: (c, child, progress) { + if (progress == null) return child; + return CircularProgressIndicator(); + }, +) + +Icon( + Icons.favorite, + color: Colors.red, + size: 30, +) +``` + +# 对话框Widget +```dart +// 提示对话框，showDialog 显示，需要 context。 +showDialog( + context: context, + builder: (context) => AlertDialog( + title: Text('提示'), + content: Text('确定删除吗？'), + actions: [ + TextButton( + onPressed: () => Navigator.pop(context), + child: Text('取消'), + ), + TextButton( + onPressed: () => Navigator.pop(context), + child: Text('确定'), + ), + ], + ), +) + +// 底部弹出表单 +showModalBottomSheet( + context: context, + builder: (context) => Container( + height: 200, + child: ListView( + children: [], + ), + ), +) + +// 底部轻提示，不打断用户操作 +ScaffoldMessenger.of(context).showSnackBar( + SnackBar( + content: Text('操作成功'), + action: SnackBarAction( + label: '撤销', + onPressed: () {}, + ), + duration: Duration(seconds: 2), + ), +) +``` + +# 导航和路由 +```dart +Navigator.push( // 跳转 + context, + MaterialPageRoute(builder: (c) => DetailsPage()), +); + +Navigator.pop(context); // 返回 +Navigator.pushNamed(context, '/details'); // 命名路由 + +// 页面切换器 +PageView( + children: [ + Page1(), + Page2(), + Page3(), + ], + controller: PageController(), + onPageChanged: (index) => print('切换到 $index'), +) +``` + +# 手势Widget +```dart +GestureDetector( + onTap: () => print('点击'), + onDoubleTap: () => print('双击'), + onLongPress: () => print('长按'), + onPanUpdate: (details) => print('拖拽: ${details.delta}'), + child: Container( + width: 100, + height: 100, + color: Colors.blue, + ), +) + +InkWell( + onTap: () => print('点击'), + splashColor: Colors.blue.withOpacity(0.3), // 水波纹颜色 + child: Container( + padding: EdgeInsets.all(20), + child: Text('可点击区域'), + ), +) +``` + +# 其他Widget +```dart +// 控制 Widget 显示/隐藏，比条件渲染性能更好。 +Visibility( + visible: isVisible, // 是否显示 + child: Text('内容'), + maintainSize: true, // 保持占位 + maintainAnimation: true, + maintainState: true, +) +``` diff --git a/docs/Flutter/Guide.md b/docs/Flutter/Guide.md deleted file mode 100644 index e69de29..0000000 diff --git a/docs/Flutter/index.md b/docs/Flutter/index.md index dc960da..6e2e19b 100644 --- a/docs/Flutter/index.md +++ b/docs/Flutter/index.md @@ -5,5 +5,6 @@ title: Flutter # 内容导航 -- [基础教程](/Flutter/Guide) +- [Dart基础教程](/Flutter/DartGuide) +- [Flutter基础教程](/Flutter/FlutterGuide) - [实战技巧](/Flutter/Practice) \ No newline at end of file diff --git a/docs/Web-Front/Vue3-Common.md b/docs/Web-Front/Vue3-Common.md index 9f19941..b15b62f 100644 --- a/docs/Web-Front/Vue3-Common.md +++ b/docs/Web-Front/Vue3-Common.md @@ -1,5 +1,6 @@ # 一、依赖管理   本项目会传递安装的依赖有： + | 包名称 | 版本 | 含义和用途说明 | |-------|------|---------------| | `@fortawesome/fontawesome-free` | ^6.7.2 | FontAwesome 图标库的免费版本 |