我已经实现了自定义水平日历通过列表视图和这个列表视图日期和天显示在每个索引到365天
但如何改变滚动动作时达到和改变每个月。标题(月&年)也需要改变与scrollcontroller或任何其他方式来更新标题,如下面给出的视频
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日期和天类似(标题需要相同)
1条答案
按热度按时间xu3bshqb1#
尝试使用可滚动定位列表包https://pub.dev/packages/scrollable_positioned_list
使用它的监听器,您必须能够在一个月的最后一项经过时更改标题