Flutter如何从Hive box读取数据渲染Widget并操作布尔收藏字段

现有代码核心问题 #

• 页面跳转时错误地将context传入Hive.box.get()方法，该方法需要的是你存入数据时指定的键，而非上下文对象
• 你已经通过Hive.box<Job>('jobBox').values.toList()遍历出了所有Job对象，直接使用当前遍历到的对象即可，不需要额外调用get方法取数据

修正方案 #

1. 修复页面跳转传参

你在遍历Box的values时，每个循环拿到的遍历对象就是单条Job数据，跳转时直接传这个对象即可。

2. 实现收藏状态更新与持久化

Hive的自定义类型对象修改字段后，调用自身的save()方法即可自动同步到Box中完成持久化，修改后调用setState就能刷新UI。

修正后完整代码 #

Widget build(BuildContext context) => Column(
  children: Hive.box<Job>('jobBox').values.toList().map(
    (job) => GestureDetector(
      onTap: () => Navigator.of(context).push(MaterialPageRoute(
        // 直接传当前遍历到的job对象即可
        builder: (context) => TaskPage(job: job),
      )),
      child: Container(
        padding: const EdgeInsets.all(16),
        height: 100,
        decoration: BoxDecoration(
          color: white,
          borderRadius: BorderRadius.circular(16),
        ),
        child: Row(
          children: [
            Expanded(
              flex: 3,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    job.name,
                    style: TextStyle(fontWeight: FontWeight.w500, fontSize: 20),
                  ),
                  SizedBox(height: 10),
                  // Text('Num tasks in job'),
                ],
              )
            ),
            Expanded(child: Image.asset(job.imageURL)),
            GestureDetector(
              child: Icon(
                job.fav ? Icons.favorite : Icons.favorite_border,
                color: job.fav ? Colors.red.shade200 : Colors.grey,
              ),
              onTap: () {
                // 修改收藏状态
                job.fav = !job.fav;
                // 持久化存储到Hive
                job.save();
                // 刷新UI
                setState(() {});
              }
            ),
          ],
        ),
      ),
    )
  ).toList(),
);

可选优化 #

如果你的Box数据可能会动态变化，建议用ValueListenableBuilder包裹，监听Box的变化自动刷新UI，不需要手动调用setState：

ValueListenableBuilder(
  valueListenable: Hive.box<Job>('jobBox').listenable(),
  builder: (context, Box<Job> box, _) {
    return Column(
      children: box.values.map((job) => /* 上述单个Job组件代码 */).toList(),
    );
  }
)

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