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