如何根据listView项目改变屏幕颜色

Question

我想做一个水平列表视图，当新项目出现在屏幕上时，背景颜色会改变喜欢 this 我不能用 listview 做到这一点，因为我无法根据当前项目索引更改容器颜色关于如何执行此操作的任何想法？

P S. 我制作了一个动画容器，它的子容器是一个页面视图，但我想要的是一个列表视图而不是页面视图

    class _MyHomePageState extends State<MyHomePage> {
  int _index = 0;
  List<Color> colors = [
  Colors.yallow,
  Colors.blue
  ];

  @override
  Widget build(BuildContext context) {
    final restData = Provider.of<ResturantsProvider>(context);
    final rest = restData.rest;

    return Scaffold(
      body: AnimatedContainer(
        duration: Duration(microseconds: 300),
        curve: Curves.linear,
        color: colors[_index],
        child: PageView.builder(
          onPageChanged: (i) {
            setState(() {
              _index = i;
            });
          },
          scrollDirection: Axis.horizontal,
          itemCount: rest.length,
          itemBuilder: (context, index) {
            return Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                SizedBox(
                  height: 50,
                ),
                LogoHomePage(
                  logoImg: rest[index].logoImg,
                ),
                ResturantListView(
                  restImg: rest[index].restImg,
                  restName: rest[index].restName,
                  restRate: rest[index].restRate,
                  restType: rest[index].restType,
                  time: rest[index].time,
                  color: rest[index].color,
                )
              ],
            );
          },
        ),
      ),
    );
  }
}

Answer 1

用 VisibilityDetector 包装您的列表视图子项（每个），

VisibilityDetector(
   key: Key("yourKey"),
   onVisibilityChanged: (VisibilityInfo info) {
       //get visibilityInfo here
       //pass the index of child to parent here based on that parent changes color
   },
   child: YourListItemChild();
)

Answer 2

将 inview_notifier_list 与容器中的列表视图一起使用，将 isInViewPortCondition 设置为您的要求，然后更改容器颜色

如何根据listView项目改变屏幕颜色

How to change screen color according to listView item

flutter

flutter-animation

flutter-listview