使用Dart / Flutter,如何在ListViewBuilder中添加收藏夹?

时间:2020-06-14 14:47:52

标签: flutter dart firebase-realtime-database

我正试图允许用户将ListViewBuilder正在构建的项目标记为收藏。使用我当前的代码,当用户收藏一个情节时,所有情节都被标记为收藏。我希望用户能够将每个剧集分别添加为收藏夹,并在重新启动后保留该收藏夹。我已将数据保存到Firebase数据库,但似乎应在应用程序本身中处理。

做到这一点的最佳方法是什么?谢谢!

这是我当前的代码:

class Epi {
  final String endTime;
  final String name;
  final String networkName;
  final String showName;
  final String startTime;

  Epi({this.endTime, this.name, this.networkName, this.showName, this.startTime});

  factory Epi.fromJson(Map<dynamic, dynamic> parsedJson) {
    DateTime endTimeCon = DateTime.parse(parsedJson['endTime']);
    String newEndTime = formatDate(endTimeCon, [yyyy, '/', mm, '/', dd, ' ', hh, ':', nn, ':', ss, ' ', am]);

    DateTime startTimeCon = DateTime.parse(parsedJson['startTime']);
    String newStartTime = formatDate(startTimeCon, [yyyy, '/', mm, '/', dd, ' ', hh, ':', nn, ':', ss, ' ', am]);

    return Epi(
      endTime: newEndTime,
      name: parsedJson['name'],
      networkName: parsedJson['networkName'],
      showName: parsedJson['showName'],
      startTime: newStartTime,
    );
  }
}
  bool _isFavorited = true;
  void _toggleFavorite() {
    setState(() {
      if (_isFavorited) {
        _isFavorited = false;
      } else {
        _isFavorited = true;
      }
    });
  }
body: Column(
          children: <Widget>[
            SizedBox(height: 5.0),
            Expanded(
              child: ListView.builder(
                  itemCount: elist.length,
                  itemBuilder: (context, index) {
                    return InkWell(
                      onTap: () {
                        selectEpisode(index);
                      },
                      child: Card(
                        child: Column(
                          children: <Widget>[
                          ListTile(
                            title: Text(elist[index].name),
                            subtitle: Text(elist[index].startTime),
                            leading: IconButton(
                              icon: (_isFavorited ? Icon(Icons.favorite_border) : Icon(Icons.favorite)),
                              color: Colors.red[500],
                              onPressed: _toggleFavorite,
                            ),
                            trailing: Icon(Icons.arrow_forward_ios)
                          )
                          ],
                        ),
                      ),
                    );
                  }),
            ),
          ],
        )

2 个答案:

答案 0 :(得分:2)

在我的Congress Fahrplan应用程序(Github)中,我正在做您想要实现的目标。

favorite_provider中,将值存储在对象本身中,并将其添加到我的list of favorited objects中。每当将对象添加到此列表时,该列表就会通过我的file_storage类以JSON的形式写入磁盘。

重新启动应用程序后,将从REST API中获取对象。然后,我将其ID与本地JSON中的对象进行匹配,并设置是否将其收藏夹以恢复收藏夹状态。

答案 1 :(得分:0)

根据应用程序设计,制作喜欢的项目列表基本上有所不同,您也可以为此开发自己的逻辑。现在,尽管@ benjaminschilling33发布的内容是正确的,但您也可以通过简单的方法来实现。 我要做的是,在构造函数上添加一个名为isFavorite的布尔值,如下所示:

 class Epi {
  final String endTime;
  final String name;
  final String networkName;
  final String showName;
  final String startTime;
  bool isFavorite;
}
//initialize the isFavorite to false cause no item in your list is is favorite at the beginning
Epi({this.endTime, this.name, this.networkName, this.showName, this.startTime, this.isFavorite=false});

//lets create a list _episode which contains all the movie for demonstration purpose
List<Epi> _episode = [Epi(initialized data)]; 
//create a getter for the list
List<Epi> get episode{
  return _episode.where((Epi episode) => episod.isFavorite).toList(); //this will return a list where the isFavorite is true
}

//You can then set your icon (in the list-tile) based on your isFavorite result
ListTile(
...
icon: Icons(elist[index].isFavorite?Icon(Icons.favorite):Icon(Icons.favorite_border);
)
//Then adjust the logic on your onPress
onPressed: (){
   setState((){
    elist[index].isFavorite=!elist[index].isFavorite //this will vary from true to false and vice versa when pressed
});
}

这是添加用户喜欢的项目列表的最简单方法,而不是为“收藏夹”部分构建另一个列表。我在这里写的是可以实现的基于脱机的测试,而关键要去的是where属性:

    List<Epi> episode=[some data]
    epsode.where((Epi episode)=>episode.isFavorite).toList();

即使在将应用程序部署到云数据库后,也可以使用此方法,方法是根据用户的ID在数据库中创建该属性。