diff --git a/lib/main.dart b/lib/main.dart index 198284e..cc5b91d 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -1,5 +1,10 @@ +// 导入 Flutter 的 Material UI 包，用于构建用户界面 import 'package:flutter/material.dart'; + +// 导入 provider 包，用于状态管理 import 'package:provider/provider.dart'; + +// 导入各个示例页面的文件 import 'pages/basic_provider_page.dart'; import 'pages/multi_provider_page.dart'; import 'pages/change_notifier_page.dart'; @@ -9,43 +14,66 @@ import 'pages/future_provider_page.dart'; import 'pages/stream_provider_page.dart'; import 'pages/proxy_provider_page.dart'; +// Flutter 应用程序的入口点 void main() { + // 运行 MyApp 小部件作为应用程序的根 runApp(const MyApp()); } +// MyApp 是一个无状态小部件，是应用程序的根小部件 class MyApp extends StatelessWidget { + // MyApp 的构造函数 const MyApp({super.key}); + // build 方法描述了如何构建小部件的用户界面 @override Widget build(BuildContext context) { + // MaterialApp 是一个 Flutter 提供的便捷小部件，封装了应用程序通常需要的一些功能 return MaterialApp( + // 应用程序的标题，通常在任务切换器中显示 title: 'Provider Examples', + // 应用程序的主题 theme: ThemeData( + // 设置主题的主色调为蓝色 primarySwatch: Colors.blue, ), + // 应用程序启动时显示的首页 home: const HomePage(), ); } } +// HomePage 是一个无状态小部件，用于显示 Provider 示例的列表 class HomePage extends StatelessWidget { + // HomePage 的构造函数 const HomePage({super.key}); + // build 方法描述了如何构建小部件的用户界面 @override Widget build(BuildContext context) { + // Scaffold 是 Material Design 布局结构的基本实现 return Scaffold( + // 应用程序栏 appBar: AppBar( + // 应用程序栏的标题 title: const Text('Provider Examples'), ), + // 页面的主体内容，使用 ListView 来显示可滚动的列表 body: ListView( + // 列表中的子项 children: [ + // 列表项：基本 Provider 示例 ListTile( + // 列表项的标题 title: const Text('Basic Provider'), + // 点击列表项时的回调函数 onTap: () => Navigator.push( context, + // 创建一个 MaterialPageRoute 来导航到 BasicProviderPage MaterialPageRoute(builder: (_) => const BasicProviderPage()), ), ), + // 列表项：MultiProvider 示例 ListTile( title: const Text('MultiProvider'), onTap: () => Navigator.push( @@ -53,6 +81,7 @@ class HomePage extends StatelessWidget { MaterialPageRoute(builder: (_) => const MultiProviderPage()), ), ), + // 列表项：ChangeNotifierProvider 示例 ListTile( title: const Text('ChangeNotifierProvider'), onTap: () => Navigator.push( @@ -60,6 +89,7 @@ class HomePage extends StatelessWidget { MaterialPageRoute(builder: (_) => const ChangeNotifierPage()), ), ), + // 列表项：Consumer 示例 ListTile( title: const Text('Consumer'), onTap: () => Navigator.push( @@ -67,6 +97,7 @@ class HomePage extends StatelessWidget { MaterialPageRoute(builder: (_) => const ConsumerPage()), ), ), + // 列表项：Selector 示例 ListTile( title: const Text('Selector'), onTap: () => Navigator.push( @@ -74,6 +105,7 @@ class HomePage extends StatelessWidget { MaterialPageRoute(builder: (_) => const SelectorPage()), ), ), + // 列表项：FutureProvider 示例 ListTile( title: const Text('FutureProvider'), onTap: () => Navigator.push( @@ -81,6 +113,7 @@ class HomePage extends StatelessWidget { MaterialPageRoute(builder: (_) => const FutureProviderPage()), ), ), + // 列表项：StreamProvider 示例 ListTile( title: const Text('StreamProvider'), onTap: () => Navigator.push( @@ -88,6 +121,7 @@ class HomePage extends StatelessWidget { MaterialPageRoute(builder: (_) => const StreamProviderPage()), ), ), + // 列表项：ProxyProvider 示例 ListTile( title: const Text('ProxyProvider'), onTap: () => Navigator.push( diff --git a/lib/pages/basic_provider_page.dart b/lib/pages/basic_provider_page.dart index 79daf99..a09afe2 100644 --- a/lib/pages/basic_provider_page.dart +++ b/lib/pages/basic_provider_page.dart @@ -16,7 +16,9 @@ class UserInfo extends ChangeNotifier { _email = email; String get name => _name; + int get age => _age; + String get email => _email; void updateName(String newName) { @@ -47,6 +49,7 @@ class AppConfig extends ChangeNotifier { _language = language; String get theme => _theme; + String get language => _language; void toggleTheme() { @@ -88,9 +91,7 @@ class BasicProviderPage extends StatelessWidget { ), ], child: Scaffold( - appBar: AppBar( - title: const Text('Basic Provider') - ), + appBar: AppBar(title: const Text('Basic Provider')), body: const SingleChildScrollView( child: Padding( padding: EdgeInsets.all(16.0), @@ -129,8 +130,7 @@ class UpdateSection extends StatelessWidget { child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - const Text('Update Examples:', - style: TextStyle(fontWeight: FontWeight.bold)), + const Text('Update Examples:', style: TextStyle(fontWeight: FontWeight.bold)), const SizedBox(height: 10), // 用户信息更新按钮 @@ -140,10 +140,7 @@ class UpdateSection extends StatelessWidget { children: [ ElevatedButton( onPressed: () { - context.read().updateName( - context.read().name == 'John Doe' - ? 'Jane Doe' - : 'John Doe'); + context.read().updateName(context.read().name == 'John Doe' ? 'Jane Doe' : 'John Doe'); }, child: const Text('Toggle Name'), ), @@ -154,10 +151,9 @@ class UpdateSection extends StatelessWidget { ElevatedButton( onPressed: () { final currentEmail = context.read().email; - context.read().updateEmail( - currentEmail == 'john@example.com' - ? 'jane@example.com' - : 'john@example.com'); + context + .read() + .updateEmail(currentEmail == 'john@example.com' ? 'jane@example.com' : 'john@example.com'); }, child: const Text('Toggle Email'), ), @@ -226,8 +222,7 @@ class WatchExample extends StatelessWidget { child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - const Text('Watch Example:', - style: TextStyle(fontWeight: FontWeight.bold)), + const Text('Watch Example:', style: TextStyle(fontWeight: FontWeight.bold)), Text('Message: $message'), Text('User: ${userInfo.name}, Age: ${userInfo.age}'), ], @@ -251,8 +246,7 @@ class ReadExample extends StatelessWidget { child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - Text('Read Example: ${userInfo.name}', - style: TextStyle(fontWeight: FontWeight.bold)), + Text('Read Example: ${userInfo.name}', style: TextStyle(fontWeight: FontWeight.bold)), ElevatedButton( onPressed: () { final userInfo = context.read(); @@ -284,8 +278,7 @@ class SelectExample extends StatelessWidget { child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - const Text('Select Example:', - style: TextStyle(fontWeight: FontWeight.bold)), + const Text('Select Example:', style: TextStyle(fontWeight: FontWeight.bold)), Text('Language: $language'), Text('Theme: $theme'), ], @@ -298,6 +291,7 @@ class SelectExample extends StatelessWidget { // 使用 Consumer 方式访问数据 class ConsumerExample extends StatelessWidget { const ConsumerExample({super.key}); + @override Widget build(BuildContext context) { return Card( @@ -306,8 +300,7 @@ class ConsumerExample extends StatelessWidget { child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - const Text('Consumer Example:', - style: TextStyle(fontWeight: FontWeight.bold)), + const Text('Consumer Example:', style: TextStyle(fontWeight: FontWeight.bold)), Consumer( builder: (context, userInfo, child) { if (userInfo == null) { @@ -330,7 +323,6 @@ class ConsumerExample extends StatelessWidget { } } - // 使用 Provider.of 方式访问数据 class OfExample extends StatelessWidget { const OfExample({super.key}); @@ -348,8 +340,7 @@ class OfExample extends StatelessWidget { child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - const Text('Provider.of Example:', - style: TextStyle(fontWeight: FontWeight.bold)), + const Text('Provider.of Example:', style: TextStyle(fontWeight: FontWeight.bold)), Text('Theme: ${appConfig.theme}'), Text('User: ${userInfo.name}'), ],