Flutter rxflare 计算属性 computed：自动依赖追踪 + 缓存（超实用）

前言

在响应式开发中，由其他变量计算出来的值非常常见（如总价、是否满足条件、筛选结果等）。

rxflare 内置强大的 computed 计算属性，支持：

自动依赖追踪
自动缓存（不重复计算）
变量变化 → 自动更新
无任何模板、零侵入

今天用一段购物车案例，带你轻松掌握 rxflare computed 核心用法！

一、核心亮点

计算属性自动监听依赖变量
依赖不变 → 直接使用缓存，性能极高
写法极简：computed(() => 表达式)
适合：总价、筛选、状态判断、表单验证等场景
依旧无 Stateful、无 setState

二、完整可运行代码（Computed 计算属性）

dart

less 复制代码

import 'package:flutter/material.dart';
import 'package:rxflare/rxflare.dart';

// ==================== 3. Computed 计算属性 ====================
class ComputedDemo extends StatelessWidget {
  ComputedDemo({super.key});

  // 基础响应式变量
  final price = 99.obs; // 单价
  final quantity = 1.obs; // 数量

  // 🔥 计算属性：总价 = 单价 × 数量
  late final total = computed(() => price.value * quantity.value);

  // 🔥 计算属性：总价 > 500 判定是否昂贵
  late final isExpensive = computed(() => total.value > 500);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("rxflare computed 计算属性"),
      ),
      body: Center(
        child: Rx(
          () => Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Text("🛒 商品购买", style: TextStyle(fontSize: 28)),
              const SizedBox(height: 30),

              Text("单价: ${price.value} 元", style: const TextStyle(fontSize: 24)),
              Text("数量: ${quantity.value}", style: const TextStyle(fontSize: 24)),

              const SizedBox(height: 20),

              // 数量增减按钮
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  ElevatedButton(
                    onPressed: () {
                      if (quantity.value > 1) quantity.value--;
                    },
                    child: const Text("➖"),
                  ),
                  const SizedBox(width: 20),
                  ElevatedButton(
                    onPressed: () => quantity.value++,
                    child: const Text("➕"),
                  ),
                ],
              ),

              const Divider(height: 40, thickness: 1),

              // 🔥 计算属性直接使用 .value
              Text(
                "总价: ${total.value} 元",
                style: const TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
              ),

              const SizedBox(height: 20),

              // 🔥 计算属性可以嵌套依赖（自动追踪）
              Text(
                isExpensive.value ? "💰 属于高消费！" : "🛍️ 性价比不错",
                style: TextStyle(
                  fontSize: 24,
                  color: isExpensive.value ? Colors.red : Colors.green,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

void main() {
  runApp(const MaterialApp(
    home: ComputedDemo(),
  ));
}

三、核心 API 超清晰讲解

1. 定义普通响应式变量

dart

ini 复制代码

final price = 99.obs;
final quantity = 1.obs;

2. 创建计算属性 computed

dart

dart 复制代码

// 总价
late final total = computed(() => price.value * quantity.value);

// 判断是否昂贵（可嵌套依赖其他 computed）
late final isExpensive = computed(() => total.value > 500);

自动追踪 ：会自动监听 price 和 quantity
自动缓存：依赖不变时，不会重复计算
可嵌套：计算属性可以依赖另一个计算属性

3. 使用计算属性

dart

复制代码

total.value
isExpensive.value

和 .obs 变量用法完全一致，直接 .value 即可。

4. 自动刷新

数量变化 → total 自动更新
total 变化 → isExpensive 自动更新
所有 UI 自动刷新，无需任何操作

四、运行效果

点击 ➕ / ➖ 调整数量
总价 实时自动计算
超过 500 元自动显示 "高消费"（红色）
低于 500 元显示 "性价比不错"（绿色）
全程依赖自动追踪、自动缓存、无冗余计算

五、computed 最适合的场景

购物车 总价计算
表单 验证逻辑
列表 筛选 / 排序 / 统计
权限判断、状态判断
任何需要 根据其他变量推导的值