计算ListView.builder中显示项目之间的时间

Question

我想跟踪用户并了解他的兴趣，并实现这一目标，我想知道他在每个帖子上花费了多少时间，根据此信息，我将这些数据发送到人工智能模型进行分析并根据用户兴趣重新生成帖子。

这是我的代码

Expanded(
          child: BlocBuilder<EveryNewCubit, EveryNewState>(
            builder: (context, state) {
              if (state is EveryNewSuccess) {
                return ListView.builder(
                    itemCount: state.news.length,
                    itemBuilder: (context, index) {
                      return VisibilityDetector(
                        key: Key(index.toString()),
                        onVisibilityChanged: (info) {
                          print('${state.news[index].title}');   // i want to print time here for each item
                        },
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Container(
                            decoration: BoxDecoration(
                              color: Colors.white,
                              borderRadius: BorderRadius.circular(10),
                              boxShadow: [
                                BoxShadow(
                                  color: Colors.grey.withOpacity(0.5),
                                  spreadRadius: 5,
                                  blurRadius: 7,
                                  offset: const Offset(
                                      0, 3), // changes position of shadow
                                ),
                              ],
                            ),
                            child: ExploreNewsItem(),
                          ),
                        ),
                      );
                    });
              } else if (state is EveryNewFailure) {
                print(state.failure.toString());
                return CustomErrorWidget(errMessage: state.failure);
              } else {
                return const CustomLoadingIndicator();
              }
            },
          ),
        )

如果您知道在此应用程序中使用更好的解决方案或技术，我将不胜感激 谢谢。

我实际上使用了visibility_ detector，但我无法计算每个帖子的时间。

Answer 1

终于找到解决方案了：

首先我用 VisibilityDetector 包装 ExploreNewItem 的内容，而不是将其包装在 ListView 中

其次，我在项目本身中声明计时器，这让我可以计算每个项目的时间，而不是所有项目的一个计时器。

像这样：

class ExploreNewsItem extends StatefulWidget {
  const ExploreNewsItem({
    super.key,
    required this.imageUrl,
    required this.category,
    required this.title,
    required this.source,
    required this.date,
    required this.content,
  });

  final String imageUrl;
  final String category;
  final String title;
  final String source;
  final String date;
  final String content;

  @override
  State<ExploreNewsItem> createState() => _ExploreNewsItemState();
}

class _ExploreNewsItemState extends State<ExploreNewsItem> {
  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  final stopwatch = Stopwatch();
  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () => Navigator.push(
          context,
          MaterialPageRoute(
              builder: (context) => ItemDetailScreen(
                    imageUrl: widget.imageUrl,
                    source: widget.source,
                    title: widget.title,
                    date: widget.date,
                    category: widget.category,
                    content: (widget.content),
                  ))),
      child: VisibilityDetector(
        key: Key(widget.title.toString()),
        onVisibilityChanged: (info) {
          if (info.visibleFraction == 1 && !stopwatch.isRunning) {
            stopwatch.start();
            log(widget.title, name: 'start');
            print(widget.title);
          }
          if (info.visibleFraction < 0.5 && stopwatch.isRunning) {
            log(widget.title, name: 'reset');
            log("${stopwatch.elapsed}", name: "spent time");
            stopwatch.stop();
          }
        },
        child: Container(),),),},},

而不是这个：

ListView.builder(
                    itemCount: state.news.length,
                    itemBuilder: (context, index) {
                      return VisibilityDetector(
                        key: Key(index.toString()),
                        onVisibilityChanged: (info) {
                          print('${state.news[index].title}');   // i want to print time here for each item
                        },
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Container(
                            decoration: BoxDecoration(
                              color: Colors.white,
                              borderRadius: BorderRadius.circular(10),
                              boxShadow: [
                                BoxShadow(
                                  color: Colors.grey.withOpacity(0.5),
                                  spreadRadius: 5,
                                  blurRadius: 7,
                                  offset: const Offset(
                                      0, 3), // changes position of shadow
                                ),
                              ],
                            ),
                            child: ExploreNewsItem(),
                          ),
                        ),
                      );