Question

当新项目出现在屏幕上时，我想进行水平列表视图和背景颜色更改像this 我无法使用listview执行此操作，因为无法根据当前项目索引更改容器颜色有关如何执行此操作的任何想法？

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

    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将您的listview子级（每个）包裹起来，

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更改屏幕颜色

2 个答案: