在列表視圖中如何滾動項目及其各自的索引顯示小部件僅需要在某些像素中設置動畫

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

有了它的監聽器，你必須能夠在一個月的最后一項經過時更改標題