我创建了一个表格日历，当我尝试向左或向右滑动时，屏幕会冻结一会儿，然后再次移动。我不知道如何让它更顺畅。请帮助我。
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: SizedBox(
child: TableCalendar(
sixWeekMonthsEnforced: true,
locale: 'vi',
headerVisible: false,
firstDay: DateTime.utc(1940, 12, 12),
lastDay: DateTime.utc(2040, 12, 12),
focusedDay: today,
onPageChanged: (focusedDay) {
selectedMonthNotifier.value = focusedDay;
print('hi');
},
eventLoader: (day) {
return [_holidays[day], _lunarHolidays[day]] ?? [];
},
onDaySelected: _onDaySelected,
startingDayOfWeek: StartingDayOfWeek.monday,
shouldFillViewport: true,
weekNumbersVisible: true,
daysOfWeekStyle: DaysOfWeekStyle(),
calendarBuilders: CalendarBuilders(
markerBuilder: (context, date, events) {
bool isToday = isSameDay(date, DateTime.now());
final lunarDay = getLunarDay(date);
List<String> holidayEvents = [];
if (_holidays[date] != null) {
for (var event in _holidays[date]!) {
if (event is String) {
holidayEvents.add(event);
}
}
}
List<String> lunarEvents = [];
Lunar lunarDate = LunarSolarConverter.solarToLunar(
Solar(
solarYear: date.year,
solarMonth: date.month,
solarDay: date.day,
),
);
DateTime lunarDateTime = DateTime.utc(
lunarDate.lunarYear ?? 0,
lunarDate.lunarMonth ?? 1,
lunarDate.lunarDay ?? 1,
);
if (_lunarHolidays[lunarDateTime] != null) {
for (var event
in _lunarHolidays[lunarDateTime]!) {
if (event is String) {
lunarEvents.add(event);
}
}
}
// print(lunarDateTime.day);
int index = -1;
return Column(
children: [
Container(
padding: EdgeInsets.only(left: 6, right: 6),
decoration: BoxDecoration(
color: isToday
? const Color.fromARGB(
255, 188, 13, 0)
: null,
borderRadius: BorderRadius.circular(100)),
child: Text(
isToday
? DateFormat.d().format(date)
: '', // Hiển thị ngày dương
style: TextStyle(color: Colors.white),
),
),
Text(
lunarDay, // Hiển thị ngày âm
style: TextStyle(
fontSize: 12, color: Colors.grey),
),
Container(
margin: const EdgeInsets.only(
top: 0, left: 2, right: 2),
height: 45,
child: ListView(
children: [
(lunarDateTime.day == 14 ||
lunarDateTime.day == 15)
? Column(
children: [
Icon(
Icons
.brightness_1, // Icon trăng tròn
color: Color.fromARGB(
255, 249, 249, 0),
),
],
)
: SizedBox(),
...holidayEvents.map((event) {
index++;
return Container(
margin: EdgeInsets.symmetric(
vertical: 2.0),
decoration: BoxDecoration(
color: solarHolidaysColors[index],
borderRadius:
BorderRadius.circular(2.0),
),
padding: EdgeInsets.only(left: 1),
child: Column(
children: [
Text(
'$event',
style: TextStyle(
color: Colors.white,
fontSize: 10),
overflow: TextOverflow.ellipsis,
),
],
),
);
}),
...lunarEvents.map((event) {
index++;
return Container(
margin: EdgeInsets.symmetric(
vertical: 2.0),
decoration: BoxDecoration(
color: lunarHolidaysColors[index],
borderRadius:
BorderRadius.circular(2.0),
),
padding: EdgeInsets.only(left: 1),
child: Column(
children: [
Text(
'$event',
style: TextStyle(
color: Colors.white,
fontSize: 10),
overflow: TextOverflow.ellipsis,
),
],
),
);
}),
],
),
),
],
);
},
),
calendarStyle: CalendarStyle(
cellAlignment: Alignment.topCenter,
markersAlignment: Alignment.topCenter,
rowDecoration: BoxDecoration(),
cellMargin: EdgeInsets.zero,
selectedDecoration: BoxDecoration(
color: Color.fromARGB(
255, 255, 255, 255), // Màu nền khi chọn
border: Border.all(
color: Color.fromARGB(255, 190, 71, 71),
width: 2), // Viền hình chữ nhật
borderRadius: null, // Độ cong của góc
),
selectedTextStyle: TextStyle(color: Colors.black),
outsideDaysVisible: true,
outsideDecoration: BoxDecoration(
border: Border.all(
width: 0.5,
color: const Color.fromARGB(
255, 225, 225, 225))),
outsideTextStyle: TextStyle(
color: const Color.fromARGB(255, 0, 0, 0),
),
defaultDecoration: BoxDecoration(
shape: BoxShape.rectangle,
border: Border.all(
width: 0.5,
color: const Color.fromARGB(
255, 225, 225, 225))),
weekendDecoration: BoxDecoration(
border: Border.all(
width: 0.5,
color: Color.fromARGB(255, 225, 225, 225))),
todayDecoration: BoxDecoration(
shape: BoxShape.rectangle,
border: Border.all(
color: Color.fromARGB(255, 190, 71, 71),
width: 2),
color: Colors.white,
),
todayTextStyle: TextStyle(
color: const Color.fromARGB(255, 0, 0, 0),
),
),
daysOfWeekHeight: 25,
selectedDayPredicate: (day) => isSameDay(day, today),
),
),
),
],
);
}
我认为问题是：
onPageChanged: (focusedDay) {
selectedMonthNotifier.value = focusedDay;
},
但是即使没有绘制，当我隐藏它时，页面过渡也不平滑。 我需要一次显示 3 个日历页吗？如果是这样，我该怎么办？
如果您在更改日历页面时调用 setState({})，通常会发生这种情况。您的 valueNotifier 可能会在代码中的某处触发 setState，请检查。
如果您必须在页面更改时调用 setState，也许您应该在转换完成后以不同的方式执行此操作，如下所示可能会起作用：
onPageChanged: (DateTime focusedDay) async {
Future.delayed(const Duration(milliseconds: 200), () {
selectedMonthNotifier.value = focusedDay;
});
},