时间戳

首页 > 解决方案 > Flutter - ListView 动画 - 增加最明显/最集中的项目的大小？

flutter - Flutter - ListView 动画 - 增加最明显/最集中的项目的大小？

问题描述

是的，基本上标题说明了一切。我想看看哪个项目最集中，然后增加它的大小。这是我编写的代码，但它在性能方面存在一些巨大问题：

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:tastie/models/HomeFeed.dart';
import 'package:tastie/models/Restaurant.dart';
import 'package:visibility_detector/visibility_detector.dart';
import 'restaurant_preview.dart';

class Home extends StatelessWidget {
  Home(this.feed);
  final HomeFeed feed;
  @override
  Widget build(BuildContext context) {
    double visible = 0;
    return ListView(
      scrollDirection: Axis.horizontal,
      children: [
        for (Restaurant resto in feed.recents)
          (_restoprev(context, resto, visible)),
      ],
    );
  }
  Widget _restoprev(BuildContext context, Restaurant resto, double visible) {
    GlobalKey _key = GlobalKey();
    RestaurantPreview restopreview = RestaurantPreview(context, resto, key: _key);
    return Center(
      child: Card(
        clipBehavior: Clip.antiAlias,
        child: VisibilityDetector(
          key: Key(resto.id + Random().nextInt(10000).toString()),
          onVisibilityChanged: (VisibilityInfo info) {
            if (info.visibleFraction > visible) {
              final RestaurantPreviewState previewState = _key.currentState;
              previewState.update(true);
            } else {
              final RestaurantPreviewState previewState = _key.currentState;
              previewState.update(true);
            }
          },
          child: restopreview,
        ),
      ),
    );
  }
}

但是这段代码不起作用，因为它与平滑相反，它落后并且影响了多个小部件。所以我的问题是如何检测哪个视图最受关注以及如何扩展它？还有另一种方法可以改变餐厅的状态，因为我读到 GlobalKey 仅用于调试。也许使用 ObjectKey？

标签： flutterdartflutter-animationflutter-listview

解决方案

这个问题的答案会很长，幸运的是有一个视频描述了如何使用 ListView 控制器进行播放。视频很长，但我建议您全部观看，但是您感兴趣的部分在 9 分钟后开始。这里的链接：https ://www.youtube.com/watch?v=Cn6VCTaHB-k&t=326s

推荐阅读