使用 Hive 框数据构建小部件

Posted 2023-04-14

【中文标题】使用 Hive 框数据构建小部件

【英文标题】：Building widgets with Hive box data

【发布时间】：2021-07-31 22:50:12

【问题描述】：

我正在从我创建的 MyClass 文件中预定义的列表中构建我的小部件。这可行，但我希望能够存储持久数据以添加布尔喜爱的字段。

我为我的类创建了 Hive 类型/字段，生成了类型适配器，并在应用程序首次运行时成功加载了 Hive 框，我可以将值打印到控制台，所以我知道数据都在那里，并且正确。

在我拥有的课程中，名称、图像 url 路径到资产图像和最喜欢的字段。

在我使用列表获取数据之前，我能够像这样获取图像 URL：

Expanded(child: Image.asset(widget.MyClass.imageURL)),

现在我想从 Hive 盒子里得到这个

Box<MyClass> box = Hive.box<MyClass>('myClassBox');
//This is where I am stuck
Expanded(child: Image.asset(box.???)),

我尝试了 box.values.where 和 box.get() 来获取 imageURL 字段。但是 get 需要一个密钥，我不必从中传递它

Widget build(BuildContext context)

然后我在尝试访问收藏字段时遇到了同样的问题，我使用的是收藏按钮包 (favorite_button 0.0.4)。然后我会根据被点击的按钮更新真/假值。

如果有人能指出我正确的方向，那就太好了。

谢谢。

编辑：

这里是小部件：

Widget build(BuildContext context) => GestureDetector(

    onTap: () => Navigator.of(context).push(MaterialPageRoute(
      builder: (context) => TaskPage(job: widget.job), //Need to get data from Hive now
    )),
    child: Container(
      padding: const EdgeInsets.all(16),
      height: 100,
      decoration: BoxDecoration(
         borderRadius: BorderRadius.circular(16),
      ),
      child: Row(
        children: [
          Expanded(flex: 3, child: buildText()),
          Expanded(child: Image.asset(widget.job.imageUrl)),//Need to get data from Hive now
          GestureDetector(
              child: Icon(
                widget.job.fav ? Icons.favorite : Icons.favorite_border, //Need to get data from Hive now
                
              ),
              onTap: ()  
                // add/remove from favorites list

              
          ),

          ],
      ),
    ),
  );

第二次编辑：这是执行给定建议后的相同代码

Widget build(BuildContext context) => GestureDetector(
    onTap: () => Navigator.of(context).push(MaterialPageRoute(
      builder: (context) => TaskPage(job: Hive.box<Job>('jobBox').get(context)), //This bit is still broken so I need to look at this
    )),

    child: Column(
        children:
        Hive.box<Job>('jobBox').values.toList().map(
                (elementList) => 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(
                      elementList.name,
                      style: TextStyle(fontWeight: FontWeight.w500, fontSize: 20),
                    ),
                    SizedBox(height: 10),

                    //Text('Num tasks in job'),
                  ],
                )),
                Expanded(child: Image.asset(elementList.imageURL)),
                GestureDetector(
                    child: Icon(
                      elementList.fav
                          ? Icons.favorite
                          : Icons.favorite_border,
                      color: elementList.fav ? Colors.red.shade200 : Colors.grey,
                    ),
                    onTap: () 
                        //To do
                    
                  // )
                ),
        ],
      ),
    ),
  )
      .toList(),
),
);

【参考方案1】：

假设您在框中只有 1 个数据，您可以像这样访问存储的数据。

Box<MyClass> box = Hive.box<MyClass>('myClassBox');
if(box.isNotEmpty) 
  final data = box.values.first;
  // use data
 else 
  // empty state

Hive 值可能有键，这取决于您如何使用它。如果您使用了box.put(key, value)，则可以使用box.get(key) 来处理键和值。

如果你使用box.add(value)，它会存储从0开始的自动分配索引的数据。所以你可以使用box.getAt(index)来获取一个有索引的数据。

【讨论】：

您好，感谢您的回答。我在框中有 20 多位数据，每个都有自己的图像 URL。所以我想像从列表中创建小部件时一样循环并获取它们。

您可以使用box.values.map((value) => MyWidget()).toList() 将框内容映射为小部件列表。或者您可以通过一个简单的循环遍历box.values 的每个数据。但我不确定这是否是你要问的。

在我尝试使用 Hive 之前，这是我的小部件所拥有的，请参阅原始帖子中的编辑。

第二次编辑，我根据您的建议添加了我的代码。它几乎按预期工作。它似乎不止一次地循环并创建小部件，除此之外一切看起来都很好。正确的图像和布尔值都在那里

我在第二次编辑中没有看到您的代码有任何问题。也许你的盒子里可能有重复的值？为了消除这种可能性，您可以尝试清除应用程序的缓存。或者您可以使用box.clear() 清除该框。