Flutter DataTable排序触发StreamBuilder重复拉取Firestore数据如何解决

核心问题根源 #

你遇到的排序失效本质是两个问题共同导致的：

1. 你在build方法内直接创建Stream实例：stream: UserData_StreamPublisher().getUserDataStream()，每次setState触发组件重建都会生成新的Stream对象，StreamBuilder检测到stream参数变更后会销毁旧监听、重新监听新Stream，触发全量数据重拉，直接覆盖你已经排序好的usersData列表。
2. 现有代码逻辑只要snapshot收到新数据，就会直接执行usersData = snapshot.data as List<UserData>;，即使Stream不重建，后续Firestore推送数据更新时也会覆盖本地排序结果。

方案1：保留Stream实时更新能力的最优实现 #

如果需要保留Firestore数据实时同步的能力，按以下步骤修改：

步骤1：在State中缓存Stream实例 #

在State类中声明Stream变量，仅在initState中初始化一次，避免每次build重复创建：

class _UserData_PageState extends State<UserData_Page> {
  int? sortColumnIndex;
  bool isAscending = false;
  List<UserData> usersData = [];
  // 缓存Stream实例
  late Stream<List<UserData>> userDataStream;

  @override
  void initState() {
    super.initState();
    // 页面初始化时仅创建一次Stream
    userDataStream = UserData_StreamPublisher().getUserDataStream();
  }

步骤2：修改StreamBuilder逻辑，数据更新时自动重排 #

StreamBuilder(
  // 传入缓存的Stream实例，组件重建也不会变更
  stream: userDataStream,
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      final rawNewData = snapshot.data as List<UserData>;
      usersData = rawNewData;
      // 每次拿到新数据都按当前排序规则重排
      _sortCurrentData();
      return DataTable(
        sortAscending: isAscending,
        sortColumnIndex: sortColumnIndex,
        columns: getColumns(columns),
        rows: getRows(usersData),
      );
    } else {
      return const CircularProgressIndicator();
    }
  })

步骤3：抽离公共排序方法，onSort和数据更新时复用 #

// 公共排序逻辑，仅修改排序规则时调用一次
void _sortCurrentData() {
  if (sortColumnIndex == null) return;
  switch(sortColumnIndex!) {
    case 0:
      usersData.sort((user1, user2) => compareString(isAscending, user1.counselorName, user2.counselorName));
      break;
    case 1:
      usersData.sort((user1, user2) => compareString(isAscending, '${user1.dateAndTimeOfCall}', '${user2.dateAndTimeOfCall}'));
      break;
    case 2:
      usersData.sort((user1, user2) => compareString(isAscending, user1.enquiryName, user2.enquiryName));
      break;
    case 3:
      usersData.sort((user1, user2) => compareString(isAscending, '${user1.typeOfEnquiry}', '${user2.typeOfEnquiry}'));
      break;
  }
}

// 优化后的onSort方法
void onSort(int columnIndex, bool ascending) {
  setState(() {
    sortColumnIndex = columnIndex;
    isAscending = ascending;
  });
  // 触发重排
  _sortCurrentData();
}

方案2：无需实时更新时，FutureBuilder的正确写法 #

你之前的临时方案用列表长度判断存在缺陷（首次返回空列表会导致后续无法正常加载），正确写法是同样缓存Future实例：

class _UserData_PageState extends State<UserData_Page> {
  int? sortColumnIndex;
  bool isAscending = false;
  List<UserData> usersData = [];
  // 缓存Future实例
  late Future<List<UserData>> userDataFuture;

  @override
  void initState() {
    super.initState();
    // 仅初始化时调用一次拉取接口
    userDataFuture = UserData_StreamPublisher().getUserDataOnce();
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: userDataFuture,
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          usersData = snapshot.data as List<UserData>;
          _sortCurrentData();
          return DataTable(
            sortAscending: isAscending,
            sortColumnIndex: sortColumnIndex,
            columns: getColumns(columns),
            rows: getRows(usersData),
          );
        } else {
          return const CircularProgressIndicator();
        }
      },
    );
  }
}

内容的提问来源于stack exchange，提问作者vikasm