企业官网建设流程全解析

-

大家好，最近在做 Flutter 项目时，尝试了 **RxFlare** 这个轻量级响应式状态管理库，体验非常不错。今天分享一个**简单易懂的计数器 + 用户信息** 小 Demo，适合新手快速上手。

一、什么是 RxFlare？

RxFlare 是一款 **高性能、自动依赖追踪、字段级精准更新** 的 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});

@override
Widget 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});

@override
Widget 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，不会全页面重建
- 上手快：几分钟就能跑通