-大家好最近在做 Flutter 项目时尝试了 **RxFlare** 这个轻量级响应式状态管理库体验非常不错。今天分享一个**简单易懂的计数器 用户信息** 小 Demo适合新手快速上手。一、什么是 RxFlareRxFlare 是一款 **高性能、自动依赖追踪、字段级精准更新** 的 Flutter 状态管理库。它的最大特点是- 代码极简类似 GetX 的 .obs- 自动追踪依赖只更新必要部分- 性能优秀适合中大型项目二、添加依赖dependencies:rxflare: ^1.5.0 # 请使用最新版本三、完整可运行 Demo推荐复制import package:flutter/material.dart;import package:rxflare/rxflare.dart;void main() {runApp(const MyApp());}class MyApp extends StatelessWidget {const MyApp({super.key});overrideWidget build(BuildContext context) {return MaterialApp(title: RxFlare Demo,theme: ThemeData(primarySwatch: Colors.blue),home: const HomePage(),);}}class HomePage extends StatelessWidget {// 定义响应式变量final count 0.obs;final username 张三.obs;final age 25.obs;final isLiked false.obs;HomePage({super.key});overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text(RxFlare 状态管理 Demo),centerTitle: true,),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [// 自动追踪多个变量Rx(() Text(点击次数${count.value},style: const TextStyle(fontSize: 28, fontWeight: FontWeight.bold),)),const SizedBox(height: 20),Rx(() Text(用户名${username.value}年龄${age.value},style: const TextStyle(fontSize: 20),)),const SizedBox(height: 40),// 点赞按钮示例Rx(() IconButton(icon: Icon(isLiked.value ? Icons.favorite : Icons.favorite_border,color: isLiked.value ? Colors.red : Colors.grey,size: 50,),onPressed: () isLiked.value !isLiked.value,)),const SizedBox(height: 20),Rx(() Text(isLiked.value ? ❤️ 已喜欢 : ♡ 喜欢一下,style: const TextStyle(fontSize: 18),)),],),),floatingActionButton: Column(mainAxisAlignment: MainAxisAlignment.end,children: [FloatingActionButton(heroTag: add,onPressed: () count.value,child: const Icon(Icons.add),),const SizedBox(height: 16),FloatingActionButton(heroTag: edit,onPressed: () {username.value 李四;age.value 28;},child: const Icon(Icons.edit),),],),);}}#### 四、核心用法总结1. 声明响应式变量xxx.obs支持 int、String、bool、List、Map 等2. 响应式 UI用 Rx(() Widget) 包裹即可自动追踪3. 修改状态直接 xxx.value 新值 即可触发更新五、优点体验- 代码量少相比 Bloc 减少大量模板代码- 性能好只更新依赖的 Widget不会全页面重建- 上手快几分钟就能跑通
Flutter RxFlare 入门实战：一个简洁强大的响应式状态管理 Demo
-大家好最近在做 Flutter 项目时尝试了 **RxFlare** 这个轻量级响应式状态管理库体验非常不错。今天分享一个**简单易懂的计数器 用户信息** 小 Demo适合新手快速上手。一、什么是 RxFlareRxFlare 是一款 **高性能、自动依赖追踪、字段级精准更新** 的 Flutter 状态管理库。它的最大特点是- 代码极简类似 GetX 的 .obs- 自动追踪依赖只更新必要部分- 性能优秀适合中大型项目二、添加依赖dependencies:rxflare: ^1.5.0 # 请使用最新版本三、完整可运行 Demo推荐复制import package:flutter/material.dart;import package:rxflare/rxflare.dart;void main() {runApp(const MyApp());}class MyApp extends StatelessWidget {const MyApp({super.key});overrideWidget build(BuildContext context) {return MaterialApp(title: RxFlare Demo,theme: ThemeData(primarySwatch: Colors.blue),home: const HomePage(),);}}class HomePage extends StatelessWidget {// 定义响应式变量final count 0.obs;final username 张三.obs;final age 25.obs;final isLiked false.obs;HomePage({super.key});overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text(RxFlare 状态管理 Demo),centerTitle: true,),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [// 自动追踪多个变量Rx(() Text(点击次数${count.value},style: const TextStyle(fontSize: 28, fontWeight: FontWeight.bold),)),const SizedBox(height: 20),Rx(() Text(用户名${username.value}年龄${age.value},style: const TextStyle(fontSize: 20),)),const SizedBox(height: 40),// 点赞按钮示例Rx(() IconButton(icon: Icon(isLiked.value ? Icons.favorite : Icons.favorite_border,color: isLiked.value ? Colors.red : Colors.grey,size: 50,),onPressed: () isLiked.value !isLiked.value,)),const SizedBox(height: 20),Rx(() Text(isLiked.value ? ❤️ 已喜欢 : ♡ 喜欢一下,style: const TextStyle(fontSize: 18),)),],),),floatingActionButton: Column(mainAxisAlignment: MainAxisAlignment.end,children: [FloatingActionButton(heroTag: add,onPressed: () count.value,child: const Icon(Icons.add),),const SizedBox(height: 16),FloatingActionButton(heroTag: edit,onPressed: () {username.value 李四;age.value 28;},child: const Icon(Icons.edit),),],),);}}#### 四、核心用法总结1. 声明响应式变量xxx.obs支持 int、String、bool、List、Map 等2. 响应式 UI用 Rx(() Widget) 包裹即可自动追踪3. 修改状态直接 xxx.value 新值 即可触发更新五、优点体验- 代码量少相比 Bloc 减少大量模板代码- 性能好只更新依赖的 Widget不会全页面重建- 上手快几分钟就能跑通
