当列表视图的项目在颤动的视口中可见时，如何更改项目颜色并执行一些操作？

Posted 2023-02-21

【中文标题】当列表视图的项目在颤动的视口中可见时，如何更改项目颜色并执行一些操作？

【英文标题】：How to change the item color and do some action when the item of the listview is visible in the viewport in flutter?

【发布时间】：2020-12-08 10:04:23

【问题描述】：

我使用 for 循环生成了一个项目列表，然后将这些项目添加到 tabbarview 的列表视图中。 在 listView 中，有一些项目（容器），当该特定项目在屏幕上完全显示时，我想要这些东西：

屏幕还应显示列表中特定项目的描述。 屏幕上未完全显示的其余项目（容器）应具有不同的颜色和大小，但它们在屏幕上部分可见。 当滚动到列表视图中的另一个时，当该特定项目的显示率超过 60% 时，该特定项目应自动在屏幕上显示 100%，并使其余项目具有不同的大小和颜色。

代码我正在制作项目（container）并像这样添加那些container。

  //this is tabviewer maker
  tabViewerMaker(BuildContext context) 
    List<ListView> tabBarView = List();
    for (var i = 0; i < tabsText.length; i++) 
      tabBarView.add(
        ListView(
            scrollDirection: Axis.horizontal,
            children: containerAdder(i, context)),
      );
    
    return tabBarView;
  

//this is for adding container to the listview
  containerAdder(initialI, BuildContext context) 
    List<Widget> listViewContainer = List();

    for (var j = 0; j < mainListAllPlantDetailsList1.length; j++) 
      if (tabsText[initialI] == mainListAllPlantDetailsList1[j].ca) 
        listViewContainer.add(Container(
            child: Column(
          children: [
            GestureDetector(
              onTap: () 
                Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (context) => ParticularPlant2(
                            indexNumber: j,
                          )),
                );
              ,
              child: Container(
                  height: 350,
                  width: 250,
                  child: Stack(
                    children: [
                      Positioned(
                        bottom: 10,
                        child: Container(
                          padding: EdgeInsets.fromLTRB(25, 50, 20, 20),
                          height: 160,
                          width: 220,
                          decoration: BoxDecoration(
                            color: Colors.lightGreen,
                            borderRadius: BorderRadiusDirectional.only(
                              bottomEnd: Radius.circular(80),
                              topEnd: Radius.circular(80),
                              topStart: Radius.circular(80),
                            ),
                          ),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(
                                mainListAllPlantDetailsList1[j].ca,
                                style: TextStyle(
                                    color: Color(0xFFC8E392), fontSize: 15),
                              ),
                              Text(
                                mainListAllPlantDetailsList1[j].pN,
                                style: TextStyle(
                                    color: Color(0xFFEAF4D5), fontSize: 25),
                              ),
                              Text(
                                  "\$" +
                                      mainListAllPlantDetailsList1[j]
                                          .pr
                                          .toString(),
                                  style: TextStyle(
                                      color: Colors.white,
                                      fontSize: 30,
                                      fontWeight: FontWeight.w600)),
                            ],
                          ),
                        ),
                      ),
                      Positioned(
                        top: 20,
                        left: 25,
                        child: Container(
                            height: 210,
                            child: Image(
                                image: AssetImage(
                                    mainListAllPlantDetailsList1[j].pI))),
                      )
                    ],
                  )),
            ),            
          ],
        )));
       else 
        continue;
      
    
    return listViewContainer;
  

我对 Flutter 完全陌生。请帮我解决这个问题。

【参考方案1】：

我也需要这个并最终使用了这个解决方案： https://github.com/flutter/flutter/issues/19941#issuecomment-538742609