根据ListView项目的外观更改AppBar标题

Question

如何根据ListView项目的外观更改AppBar标题，我使用inview_notifier_list来检查项目的外观，但是当将inview_notifier_list放在SingleChildScrollView中时，它工作不正确

Answer 1

这是我的代码：

 SingleChildScrollView(
      child: Column(
        children: [
          Padding(
            padding: EdgeInsets.all(10),
            child: ImageSlideshow(
              width: double.infinity,
              height: 200,
              initialPage: 0,
              indicatorColor: Colors.blue,
              indicatorBackgroundColor: Colors.grey,
              children: [
                ClipRRect(
                  borderRadius: BorderRadius.circular(10),
                  child: Image.asset(
                    'assets/images/mon1.jpg',
                    fit: BoxFit.cover,
                  ),
                ),
                ClipRRect(
                  borderRadius: BorderRadius.circular(10),
                  child: Image.asset(
                    'assets/images/mon2.jpg',
                    fit: BoxFit.cover,
                  ),
                ),
                ClipRRect(
                  borderRadius: BorderRadius.circular(10),
                  child: Image.asset(
                    'assets/images/mon3.jpg',
                    fit: BoxFit.cover,
                  ),
                ),
              ],
              autoPlayInterval: 3000,
              isLoop: true,
            ),
          ),
          InViewNotifierList(
            physics: AlwaysScrollableScrollPhysics(),
            shrinkWrap: true,
            isInViewPortCondition:
                (double deltaTop, double deltaBottom, double vpHeight) {
              return deltaTop < 20 && deltaBottom > 20;
            },
            itemCount: 10,
            builder: ( context,  indexCat) {
              return InViewNotifierWidget(
                id: '$indexCat',
                builder: ( context,  isInView,  child) {
                  if(isInView){
                    WidgetsBinding.instance!.addPostFrameCallback((_) {
                      _showAppBarTitle.value = indexCat.toString();
                    });
                  }
                  print(isInView);
                  return Column(
                    children: [Container(
                      width: 100, height: 100, color: Colors.red,
                    ),
                      SizedBox(height: 50,),
                    ],
                  );
                },
              );
            },
          ),

        ],
      ),
    ),

Answer 2

仅当您让它使用自己的

InViewList

 时，

ScrollController

才有效。如果您想在列表顶部显示

ImageSlideshow

，您可以将其添加到列表顶部，如下所示：

InViewNotifierList(
    isInViewPortCondition: (double deltaTop, double deltaBottom, double vpHeight) {
      return deltaTop < 20 && deltaBottom > 20;
    },
    // count of your items + 1
    itemCount: 10 + 1,
    builder: (context, i) {
      // Return the ImageSlideshow if it's the first item
      if (i == 0) {
        return Padding(
          padding: const EdgeInsets.all(10),
          child: ImageSlideshow(
            width: double.infinity,
            height: 200,
            initialPage: 0,
            indicatorColor: Colors.blue,
            indicatorBackgroundColor: Colors.grey,
            autoPlayInterval: 3000,
            isLoop: true,
            children: [
              ClipRRect(
                borderRadius: BorderRadius.circular(10),
                child: Container(color: Colors.red),
              ),
              ClipRRect(
                borderRadius: BorderRadius.circular(10),
                child: Container(color: Colors.blue),
              ),
              ClipRRect(
                borderRadius: BorderRadius.circular(10),
                child: Container(color: Colors.orange),
              ),
            ],
          ),
        );
      }
      // Make up for increasing the itemCount by 1 by decrementing i
      i--;
      return InViewNotifierWidget(
        id: '$i',
        builder: (context, isInView, child) {
          if (isInView) {
            WidgetsBinding.instance.addPostFrameCallback((_) {
              yourMethodToUpdateTitleWithIndex(i);
            });
          }
          return Padding(
            padding: const EdgeInsets.only(bottom: 50.0),
            child: Container(
                width: 100,
                height: 100,
                color: Colors.red,
                child: Center(
                  child: Text("Item $i"),
                )),
          );
        },
      );
    },
  )

顺便说一句：代码已经过测试并且功能齐全。

如果您在实施解决方案方面需要更多帮助，请随时与我们联系:)