如何将FutureBuilder改为StreamBuilder以监听Hive数据库变化

要实现Hive数据库值变化时自动更新UI，需要两步操作：给Hive的用户信息Box添加监听生成Stream，再把原来的FutureBuilder替换为StreamBuilder。

1. 修改UserInformationController，添加Stream监听 #

在控制器中新增一个返回Stream的方法，利用Hive Box的watch方法监听userNickname字段的变化：

import 'package:hive_flutter/hive_flutter.dart';

class UserInformationController{
  static Future<void> setUserNickname(String nickname) async {
    var userInformationBox = await Hive.openBox('userInformationBox');
    await userInformationBox.put('userNickname', nickname);
  }

  static Future<String> getUserNickname() async {
    var userInformationBox = Hive.box('userInformationBox');
    return userInformationBox.get('userNickname') ?? "（‐＾▽＾‐）";
  }

  // 新增：返回监听nickname变化的Stream
  static Stream<String> getUserNicknameStream() {
    final box = Hive.box('userInformationBox');
    // 监听指定key的变化，转换为String类型并处理默认值
    return box.watch(key: 'userNickname').map((event) {
      return event.value ?? "（‐＾▽＾‐）";
    });
  }
}

2. 替换FutureBuilder为StreamBuilder #

把原来的FutureBuilder组件替换成StreamBuilder，使用新增的Stream作为数据源：

StreamBuilder<String>(
  initialData: "（‐＾▽＾‐）", // 设置初始值，避免加载时显示空白
  stream: UserInformationController.getUserNicknameStream(),
  builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
    return InkWell(
      onTap: () {
        openDialog();
      },
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Column(
            crossAxisAlignment: CrossAxisAlignment.start, // 调整文本左对齐更自然
            children: [
              Text(
                language == "Filipino" ? "Palitan ang iyong palayaw" : "Change your nickname",
                style: kSettingSubheaderText(),
              ),
              Text(
                snapshot.data ?? "（‐＾▽＾‐）",
                overflow: TextOverflow.ellipsis,
                textAlign: TextAlign.start,
              )
            ],
          ),
          const Icon(Icons.arrow_forward_rounded)
        ],
      ),
    );
  }
),

关键说明 #

• Hive的watch方法会在指定key的值发生修改时自动触发事件，通过map将事件转换为我们需要的String格式，同时处理值为null的情况。
• 设置initialData可以让Widget刚加载时就显示默认文本，不用等待Stream的第一个事件响应。
• 调整Column的crossAxisAlignment是为了让文本左对齐更符合常规布局，可根据你的UI需求自行调整。

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