当前位置：首页 > news >正文

【AI生成文章】flutter ChangeNotifierProvider 实用场景举例

news 2025/8/5 5:50:50

内容由Ai 大模型生成，不能完全保障真实

ChangeNotifierProvider 是 Flutter 中一个非常实用的工具，用于在应用程序中管理和传递状态。以下是一些实用的场景举例：

1. 用户信息管理

在应用程序中，用户信息（如用户名、头像、偏好设置等）通常需要在多个页面中访问和展示。使用 ChangeNotifierProvider，你可以创建一个 UserInfoModel 类，继承自 ChangeNotifier，用于管理用户信息。然后，你在应用程序的顶层使用 ChangeNotifierProvider 包裹，这样任何需要访问用户信息的组件都可以通过 Consumer 或 Selector 来获取和监听用户信息的变化。

class UserInfoModel extends ChangeNotifier {String _username;String _avatarUrl;String get username => _username;String get avatarUrl => _avatarUrl;void updateUserInfo(String username, String avatarUrl) {_username = username;_avatarUrl = avatarUrl;notifyListeners();}
}
void main() {runApp(ChangeNotifierProvider(create: (context) => UserInfoModel(),child: MaterialApp(home: MyHomePage(),),),);
}
class MyUserProfile extends StatelessWidget {@overrideWidget build(BuildContext context) {final userInfo = Provider.of<UserInfoModel>(context);return Column(children: [Text(userInfo.username),Image.network(userInfo.avatarUrl),],);}
}

2. 购物车状态管理

在电子商务应用程序中，购物车的状态（如添加商品、删除商品、修改商品数量等）需要在多个页面中保持同步。使用 ChangeNotifierProvider，你可以创建一个 CartModel 类来管理购物车状态。然后，你在应用程序的顶层使用 ChangeNotifierProvider 包裹，这样任何需要访问购物车状态的组件都可以通过 Consumer 或 Selector 来获取和监听购物车状态的变化。

class CartModel extends ChangeNotifier {final List _cartItems = [];List get cartItems => _cartItems;void addToCart(String itemId) {_cartItems.add(itemId);notifyListeners();}void removeFromCart(String itemId) {_cartItems.remove(itemId);notifyListeners();}
}
void main() {runApp(ChangeNotifierProvider(create: (context) => CartModel(),child: MaterialApp(home: MyShoppingPage(),),),);
}
class MyShoppingCart extends StatelessWidget {@overrideWidget build(BuildContext context) {final cart = Provider.of<CartModel>(context);return ListView.builder(itemCount: cart.cartItems.length,itemBuilder: (context, index) {return ListTile(title: Text(cart.cartItems[index]),);},);}
}

3. 应用主题切换

在应用程序中，允许用户切换主题（如亮色主题和暗色主题）是一个常见的功能。使用 ChangeNotifierProvider，你可以创建一个 ThemeModel 类来管理当前主题。然后，你在应用程序的顶层使用 ChangeNotifierProvider 包裹，这样任何需要根据主题变化的组件都可以通过 Consumer 或 Selector 来获取和监听主题的变化。

class ThemeModel extends ChangeNotifier {ThemeData _themeData;ThemeData get themeData => _themeData;void setTheme(ThemeData theme) {_themeData = theme;notifyListeners();}
}
void main() {runApp(ChangeNotifierProvider(create: (context) => ThemeModel(),child: MaterialApp(theme: ThemeData.light(),darkTheme: ThemeData.dark(),themeMode: ThemeMode.system,home: MyThemePage(),),),);
}
class MyThemeSwitcher extends StatelessWidget {@overrideWidget build(BuildContext context) {final theme = Provider.of<ThemeModel>(context);return Switch(value: theme.themeData == ThemeData.dark(),onChanged: (value) {if (value) {theme.setTheme(ThemeData.dark());} else {theme.setTheme(ThemeData.light());}},);}
}