在列表视图中如何滚动项目及其各自的索引显示小部件仅需要在某些像素中设置动画

Question

我已经通过 listview 实现了自定义水平日历，并且这个 listview 日期和日期在每个索引中显示为 365 天

但是当滚动动作达到并且每个月都在变化时如何改变。 标题（月份和年份）也需要使用滚动控制器或任何其他方式来更新标题，如下面的视频所示

import 'package:flutter/material.dart';

class Calendartimeline extends StatefulWidget {
  @override
  _CalendartimelineState createState() => _CalendartimelineState();
}

class _CalendartimelineState extends State<Calendartimeline> {
  late final ValueNotifier<DateTime> selectedDate;
  late final ValueNotifier<DateTime> datechanged; // TO tracking date

  int currentDateSelectedIndex = 0; //For Horizontal Date
  ScrollController scrollController =
      ScrollController(); //To Track Scroll of ListView

  List<String> listOfMonths = [
    "Jan",
    "Feb",
    "Mar",
    "Apr",
    "May",
    "Jun",
    "Jul",
    "Aug",
    "Sep",
    "Oct",
    "Nov",
    "Dec"
  ];

  List<String> listOfDays = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
  @override
  void initState() {
    selectedDate = ValueNotifier(DateTime.now());
    datechanged = ValueNotifier(DateTime.now()
        
        );
    scrollController.addListener(() {
      
    });

    super.initState();
  }

  

  @override
  Widget build(BuildContext context) {
    return
       

        ValueListenableBuilder<DateTime>(
            valueListenable: selectedDate,
            builder: (context, datetime, _) {
              return
                  

                  Column(
                children: [
                  
                  SizedBox(height: 10),
                  

                  Container(
                      margin: EdgeInsets.only(left: 10),
                      height: 150,
                      child: Container(
                          child: ListView.separated(
                        shrinkWrap: true,
                        separatorBuilder: (BuildContext context, int index) {
                          return SizedBox(width: 25);
                        },
                        itemCount: 365,
                        controller: scrollController,
                        scrollDirection: Axis.horizontal,
                        itemBuilder: (BuildContext context, int index) {
                          return
                              
                              Column(
                            children: [
                              
                              Container(
                                  height: 25,
                                  margin: EdgeInsets.only(left: 10),
                                  alignment: Alignment.centerLeft,
                                  child: Text(
                                    listOfMonths[DateTime.now()
                                                    .add(Duration(days: index))
                                                    .month -
                                                1]
                                            .toString() +
                                        ',' +
                                        DateTime.now()
                                            .add(Duration(days: index))
                                            .year
                                            .toString(),
                                   
                                    style: TextStyle(
                                        fontSize: 18,
                                        fontWeight: FontWeight.w800,
                                        color: Colors.indigo[700]),
                                  )),
                            
                              InkWell(
                                onTap: () {
                                  setState(() {
                                    currentDateSelectedIndex = index;
                                    datetime = DateTime.now()
                                        .add(Duration(days: index));
                                    selectedDate.value = DateTime.now()
                                        .add(Duration(days: index));
                                  });
                                  print(index);
                                },
                                child: Container(
                                  height: 80,
                                  width: 60,
                                  alignment: Alignment.center,
                                 
                                  child: Column(
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    children: [
                                      
                                      SizedBox(
                                        height: 5,
                                      ),
                                      Text(
                                        DateTime.now()
                                            .add(Duration(days: index))
                                            .day
                                            .toString(),
                                        style: TextStyle(
                                            fontSize: 22,
                                            fontWeight: FontWeight.w700,
                                            color:
                                                
                                                Colors.grey),
                                      ),
                                      SizedBox(
                                        height: 5,
                                      ),
                                      Text(
                                        listOfDays[DateTime.now()
                                                    .add(Duration(days: index))
                                                    .weekday -
                                                1]
                                            .toString(),
                                        style: TextStyle(
                                            fontSize: 16,
                                            color:
                                                
                                                Colors.grey),
                                      ),
                                    ],
                                  ),
                                ),
                              ),
                            ],
                          );
                        },
                      )
                          
                          ))
                ],
               
              );
            });
  }
} 

预期像上面的 gif 日期和日期（标题需要相同）

Answer 1

尝试使用 ScrollablePositionedList package https://pub.dev/packages/scrollable_positioned_list

有了它的监听器，你必须能够在一个月的最后一项经过时更改标题