Flutter rxflare 性能测试（最终推荐版）：1000 列表极致优化・官方最佳写法

前言

这是 rxflare 官方最推荐、性能最强、写法最简洁 的长列表刷新方案。

使用 .obsListMap / .obsList + updateAt + 下标运算符重载 items[index]，实现1000 条列表只刷新一项，页面零重建。

这是目前 Flutter 轻量级状态管理的性能天花板写法！

一、核心亮点（官方最佳）

使用 .obsListMap / .obsList 响应式列表（官方推荐）
支持 updateAt 精准更新
支持下标运算符重载 ：items[index] = newValue
1000 条列表 → 仅单项刷新
页面永远不重建
性能极致、代码极简

二、完整可运行代码（最终推荐版）

dart

less 复制代码

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

// ==================== 5. 性能测试页（最终推荐版）===================
class PerformanceTestDemo extends StatefulWidget {
  const PerformanceTestDemo({super.key});

  @override
  State<PerformanceTestDemo> createState() => _PerformanceTestDemoState();
}

class _PerformanceTestDemoState extends State<PerformanceTestDemo> {
  // 🔥 官方推荐写法：.obsListMap（响应式Map列表）
  final items = List.generate(1000, (i) => {
    "id": i,
    "title": "Item $i",
    "score": 50 + (i % 50)
  }).obsListMap;

  // 也可以用泛型写法：
  // final items = List.generate(1000, (i) => {
  //   "id": i,
  //   "title": "Item $i",
  //   "score": 50 + (i % 50)
  // }).obsList<Map<String, dynamic>>();

  // 页面重建次数统计
  final rebuildCount = 0.obs;
  // 更新操作次数统计
  final updateCount = 0.obs;

  // 随机更新一项（官方推荐两种写法）
  void updateRandomItem() {
    final randomIndex = DateTime.now().millisecond % 1000;
    final current = items[randomIndex];

    // ==================== 官方推荐写法 ====================
    items.updateAt(randomIndex, {
      ...current,
      "score": (current["score"] as num) + 10
    });

    // ==================== 运算符重载写法（更简洁）====================
    // items[randomIndex] = {
    //   ...current,
    //   "score": (current["score"] as num) + 10
    // };

    print('🔥 更新了第 $randomIndex 项');
    updateCount.value++;
  }

  @override
  Widget build(BuildContext context) {
    // 页面 build 次数统计
    rebuildCount.value++;

    return Scaffold(
      appBar: AppBar(
        title: const Text("rxflare 性能测试（最终推荐版）"),
      ),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(16),
            child: Column(
              children: [
                Text(
                  "列表项数量: 1000",
                  style: Theme.of(context).textTheme.titleLarge,
                ),
                const SizedBox(height: 8),
                Rx(() => Text(
                  "页面 build 次数: ${rebuildCount.value}",
                  style: const TextStyle(
                    color: Colors.blue,
                    fontWeight: FontWeight.bold,
                    fontSize: 16,
                  ),
                )),
                Rx(() => Text(
                  "更新次数: ${updateCount.value}",
                  style: const TextStyle(
                    color: Colors.orange,
                    fontWeight: FontWeight.bold,
                    fontSize: 16,
                  ),
                )),
                const SizedBox(height: 20),
                ElevatedButton.icon(
                  onPressed: updateRandomItem,
                  icon: const Icon(Icons.update),
                  label: const Text("随机更新一项"),
                ),
              ],
            ),
          ),
          const Divider(),
          // 1000 条长列表
          Expanded(
            child: ListView.builder(
              itemCount: items.length,
              itemBuilder: (context, index) {
                // 每一项独立 Rx → 精准局部刷新
                return Rx(() {
                  final item = items[index];
                  return ListTile(
                    title: Text(item["title"] ?? ''),
                    subtitle: Text("分数: ${item["score"]}"),
                  );
                });
              },
            ),
          ),
        ],
      ),
    );
  }
}

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

三、核心 API 官方讲解

1. 响应式列表定义（推荐）

dart

dart 复制代码

final items = List.generate(1000, (i) => {
  "id": i,
  "title": "Item $i",
  "score": 50 + (i % 50)
}).obsListMap;

或

dart

dart 复制代码

.obsList<Map<String, dynamic>>()

2. 取值（直接下标，最自然）

dart

ini 复制代码

final current = items[randomIndex];

3. 更新（两种官方写法）

dart

scss 复制代码

// 方法1：updateAt（语义清晰）
items.updateAt(index, newValue);

// 方法2：下标重载（极简）
items[index] = newValue;

4. 单项刷新

每个 Item 用 Rx(() => ...) 包裹，实现真正的颗粒度刷新。

四、运行效果

点击按钮 → 随机更新一项
页面 build 次数永远 = 1
列表 1000 项 → 只刷新对应 index 项
控制台无冗余日志
超流畅、无卡顿、性能拉满

五、为什么这是最终最佳版？

✅ 官方推荐 API
✅ 下标写法最自然
✅ 性能无损耗
✅ 无任何模板代码
✅ 长列表性能 Flutter 天花板