qzl/social-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(todo): add quadrants and detail screens

Browse Source
This commit is contained in:
qzl
2026-02-25 11:10:32 +08:00
parent b5cce74f49
commit 567b3d6712
6 changed files with 1276 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/lib/features/calendar/ui/screens/calendar_dayweek_screen.dart
+296
View File
@@ -0,0 +1,296 @@
import 'package:flutter/material.dart';
import 'package:lucide_icons/lucide_icons.dart';
import '../../../../core/theme/design_tokens.dart';
import '../widgets/bottom_dock.dart';
class CalendarDayWeekScreen extends StatefulWidget {
const CalendarDayWeekScreen({super.key});
@override
State<CalendarDayWeekScreen> createState() => _CalendarDayWeekScreenState();
}
class _CalendarDayWeekScreenState extends State<CalendarDayWeekScreen> {
DateTime _selectedDate = DateTime(2026, 2, 9);
late DateTime _weekStart;
@override
void initState() {
super.initState();
_weekStart = _getWeekStart(_selectedDate);
}
DateTime _getWeekStart(DateTime date) {
return date.subtract(Duration(days: date.weekday % 7));
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xFFF8FAFC),
body: SafeArea(
child: Column(
children: [
_buildHeader(),
Expanded(
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.only(
left: 16,
right: 16,
top: 2,
bottom: 104,
),
child: Column(
children: [
_buildWeekStrip(),
const SizedBox(height: 8),
_buildTimelineBoard(),
],
),
),
),
),
_buildBottomDock(),
],
),
),
);
}
Widget _buildHeader() {
return SizedBox(
height: 68,
child: Padding(
padding: const EdgeInsets.only(left: 20, right: 20, top: 12, bottom: 8),
child: Row(
children: [
GestureDetector(
onTap: () => Navigator.of(context).pop(),
child: Container(
height: 36,
padding: const EdgeInsets.symmetric(horizontal: 10),
decoration: BoxDecoration(
color: const Color(0xFFF8FAFF),
borderRadius: BorderRadius.circular(18),
border: Border.all(color: const Color(0xFFDEE7F6)),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(
LucideIcons.chevronLeft,
size: 16,
color: AppColors.slate700,
),
const SizedBox(width: 6),
Text(
'${_selectedDate.year}年${_selectedDate.month}月',
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
color: AppColors.slate700,
),
),
],
),
),
),
],
),
),
);
}
Widget _buildWeekStrip() {
return SizedBox(
height: 86,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: List.generate(7, (index) {
final date = _weekStart.add(Duration(days: index));
final isSelected =
date.day == _selectedDate.day &&
date.month == _selectedDate.month &&
date.year == _selectedDate.year;
final isWeekend = index == 0 || index == 6;
return GestureDetector(
onTap: () {
setState(() {
_selectedDate = date;
});
},
child: _buildDayItem(date, isSelected, isWeekend),
);
}),
),
);
}
Widget _buildDayItem(DateTime date, bool isSelected, bool isWeekend) {
final dayNames = ['日', '一', '二', '三', '四', '五', '六'];
return Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(
dayNames[date.weekday % 7],
style: TextStyle(
fontSize: 11,
color: isWeekend ? AppColors.slate400 : AppColors.slate600,
),
),
const SizedBox(height: 2),
Text(
'${date.day}',
style: TextStyle(
fontSize: isSelected ? 17 : (isWeekend ? 17 : 17),
fontWeight: isSelected ? FontWeight.w700 : FontWeight.w600,
color: isSelected
? AppColors.blue600
: (isWeekend ? AppColors.slate400 : AppColors.slate900),
),
),
],
);
}
Widget _buildTimelineBoard() {
return Column(
children: [
_buildTimelineRow('07:00', false),
_buildTimelineRow('08:00', false),
_buildTimelineRow(
'09:00',
true,
eventText: '购票提醒',
eventColor: AppColors.slate500,
),
_buildTimelineRow('10:00', false),
_buildTimelineRow('11:00', false),
_buildTimelineRow('12:00', false),
_buildTimelineRow('13:00', false),
_buildTimelineRow('14:00', false),
_buildTimelineRow('15:00', false),
_buildTimelineRow('15:28', false, isCurrentTime: true),
_buildTimelineRow(
'16:00',
true,
eventText: '购票提醒',
eventColor: const Color(0xFF6B21A8),
eventBg: const Color(0xFFE9D5FF),
eventBorder: const Color(0xFFD8B4FE),
),
_buildTimelineRow('17:00', false),
_buildTimelineRow('18:00', false),
_buildTimelineRow('19:00', false),
_buildTimelineRow('20:00', false),
_buildTimelineRow('21:00', false),
_buildTimelineRow('22:00', false),
_buildTimelineRow('00:00', false, isDisabled: true),
],
);
}
Widget _buildTimelineRow(
String time,
bool hasEvent, {
String? eventText,
Color? eventColor,
Color? eventBg,
Color? eventBorder,
bool isCurrentTime = false,
bool isDisabled = false,
}) {
return SizedBox(
height: 34,
child: Row(
children: [
SizedBox(
width: 44,
child: isCurrentTime
? Container(
width: 44,
height: 18,
decoration: BoxDecoration(
color: const Color(0xFFEF4444),
borderRadius: BorderRadius.circular(9),
),
child: Center(
child: Text(
time,
style: const TextStyle(
fontSize: 10,
fontWeight: FontWeight.w700,
color: Colors.white,
),
),
),
)
: Text(
time,
textAlign: TextAlign.right,
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.w600,
color: isDisabled
? AppColors.slate300
: const Color(0xFF9CA3AF),
),
),
),
const SizedBox(width: 8),
Expanded(
child: isCurrentTime
? Container(
height: 2,
decoration: BoxDecoration(
color: const Color(0xFFEF4444),
borderRadius: BorderRadius.circular(99),
),
)
: hasEvent
? Container(
height: 22,
padding: const EdgeInsets.symmetric(horizontal: 8),
decoration: BoxDecoration(
color: eventBg ?? const Color(0xFFE5E7EB),
borderRadius: BorderRadius.circular(8),
border: Border.all(
color: eventBorder ?? const Color(0xFFD1D5DB),
),
),
child: Align(
alignment: Alignment.centerLeft,
child: Text(
eventText ?? '',
style: TextStyle(
fontSize: 11,
fontWeight: FontWeight.w600,
color: eventColor ?? const Color(0xFF6B7280),
),
),
),
)
: Container(
height: 1,
color: isDisabled
? const Color(0xFFECEFF4)
: const Color(0xFFE5E7EB),
),
),
],
),
);
}
Widget _buildBottomDock() {
return BottomDock(
activeTab: DockTab.calendar,
onTodoTap: () {},
onCalendarTap: () {},
onHomeTap: () => Navigator.of(context).pop(),
);
}
}
apps/lib/features/calendar/ui/screens/calendar_month_screen.dart
+357
View File
@@ -0,0 +1,357 @@
import 'package:flutter/material.dart';
import 'package:lucide_icons/lucide_icons.dart';
import '../../../../core/theme/design_tokens.dart';
import '../widgets/bottom_dock.dart';
class CalendarMonthScreen extends StatefulWidget {
const CalendarMonthScreen({super.key});
@override
State<CalendarMonthScreen> createState() => _CalendarMonthScreenState();
}
class _CalendarMonthScreenState extends State<CalendarMonthScreen> {
DateTime _currentMonth = DateTime(2026, 2, 1);
DateTime? _selectedDate;
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xFFF8FAFC),
body: SafeArea(
child: Column(
children: [
_buildHeader(),
Expanded(
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.only(bottom: 84),
child: _buildMonthContent(),
),
),
),
_buildBottomDock(),
],
),
),
);
}
Widget _buildHeader() {
return SizedBox(
height: 76,
child: Padding(
padding: const EdgeInsets.only(left: 16, right: 16, top: 14, bottom: 6),
child: Column(
children: [
SizedBox(
height: 56,
child: Row(
children: [
GestureDetector(
onTap: () => _showMonthPicker(),
child: Row(
children: [
Text(
'${_currentMonth.month}月',
style: const TextStyle(
fontSize: 22,
fontWeight: FontWeight.w700,
color: AppColors.slate900,
),
),
const SizedBox(width: 6),
const Icon(
LucideIcons.chevronDown,
size: 16,
color: AppColors.slate900,
),
],
),
),
],
),
),
],
),
),
);
}
Widget _buildMonthContent() {
return Column(
children: [
_buildWeekdayHeader(),
Container(height: 1, color: const Color(0xFFE5E7EB)),
..._buildWeeks(),
],
);
}
Widget _buildWeekdayHeader() {
const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
return SizedBox(
height: 40,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: weekdays
.map(
(day) => SizedBox(
width: 36,
child: Center(
child: Text(
day,
style: const TextStyle(
fontSize: 11,
fontWeight: FontWeight.w600,
color: Color(0xFF9CA3AF),
),
),
),
),
)
.toList(),
),
),
);
}
List<Widget> _buildWeeks() {
final firstDayOfMonth = DateTime(
_currentMonth.year,
_currentMonth.month,
1,
);
final lastDayOfMonth = DateTime(
_currentMonth.year,
_currentMonth.month + 1,
0,
);
final startWeekday = firstDayOfMonth.weekday % 7;
final daysInMonth = lastDayOfMonth.day;
final totalCells = ((daysInMonth + startWeekday) / 7).ceil() * 7;
final weeks = <Widget>[];
for (var weekStart = 0; weekStart < totalCells; weekStart += 7) {
weeks.add(_buildWeekRow(weekStart, startWeekday, daysInMonth));
if (weekStart + 7 < totalCells) {
weeks.add(Container(height: 1, color: const Color(0xFFE5E7EB)));
}
}
return weeks;
}
Widget _buildWeekRow(int weekStart, int startWeekday, int daysInMonth) {
return Padding(
padding: const EdgeInsets.only(left: 16, right: 16, top: 14, bottom: 0),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: List.generate(7, (index) {
final dayIndex = weekStart + index - startWeekday + 1;
if (dayIndex < 1 || dayIndex > daysInMonth) {
return SizedBox(width: 36, height: 36);
}
final date = DateTime(
_currentMonth.year,
_currentMonth.month,
dayIndex,
);
final isSelected =
_selectedDate != null &&
_selectedDate!.day == dayIndex &&
_selectedDate!.month == _currentMonth.month;
return GestureDetector(
onTap: () {
setState(() {
_selectedDate = date;
});
},
child: Container(
width: 36,
height: 36,
decoration: BoxDecoration(
color: isSelected
? const Color(0xFFDBEAFE)
: Colors.transparent,
borderRadius: BorderRadius.circular(18),
),
child: Center(
child: Text(
'$dayIndex',
style: TextStyle(
fontSize: 15,
fontWeight: isSelected
? FontWeight.w600
: FontWeight.normal,
color: isSelected
? AppColors.blue600
: AppColors.slate900,
),
),
),
),
);
}),
),
const SizedBox(height: 10),
_buildWeekEvents(weekStart, startWeekday, daysInMonth),
],
),
);
}
Widget _buildWeekEvents(int weekStart, int startWeekday, int daysInMonth) {
return SizedBox(
height: 70,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: List.generate(7, (index) {
final dayIndex = weekStart + index - startWeekday + 1;
if (dayIndex == 10) {
return _buildEventDot();
}
return const SizedBox(width: 38, height: 1);
}),
),
);
}
Widget _buildEventDot() {
return SizedBox(
width: 76,
height: 100,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 20,
padding: const EdgeInsets.symmetric(horizontal: 6),
decoration: BoxDecoration(
color: const Color(0xFFE5E7EB),
borderRadius: BorderRadius.circular(6),
),
child: const Center(
child: Text(
'购票提醒',
style: TextStyle(
fontSize: 9,
fontWeight: FontWeight.w500,
color: Color(0xFF6B7280),
),
),
),
),
const SizedBox(height: 4),
Container(
height: 20,
padding: const EdgeInsets.symmetric(horizontal: 6),
decoration: BoxDecoration(
color: const Color(0xFFE9D5FF),
borderRadius: BorderRadius.circular(6),
),
child: const Center(
child: Text(
'购票提醒',
style: TextStyle(
fontSize: 9,
fontWeight: FontWeight.w500,
color: Color(0xFF6B21A8),
),
),
),
),
],
),
);
}
void _showMonthPicker() {
showModalBottomSheet(
context: context,
builder: (context) => Container(
height: 300,
color: Colors.white,
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
TextButton(
onPressed: () => Navigator.pop(context),
child: const Text('取消'),
),
TextButton(
onPressed: () => Navigator.pop(context),
child: const Text('确定'),
),
],
),
Expanded(
child: Row(
children: [
Expanded(
child: CupertinoPicker(
itemExtent: 40,
scrollController: FixedExtentScrollController(
initialItem: _currentMonth.year - 2020,
),
onSelectedItemChanged: (index) {
setState(() {
_currentMonth = DateTime(
2020 + index,
_currentMonth.month,
1,
);
});
},
children: List.generate(20, (index) {
return Center(child: Text('${2020 + index}年'));
}),
),
),
Expanded(
child: CupertinoPicker(
itemExtent: 40,
scrollController: FixedExtentScrollController(
initialItem: _currentMonth.month - 1,
),
onSelectedItemChanged: (index) {
setState(() {
_currentMonth = DateTime(
_currentMonth.year,
index + 1,
1,
);
});
},
children: List.generate(12, (index) {
return Center(child: Text('${index + 1}月'));
}),
),
),
],
),
),
],
),
),
);
}
Widget _buildBottomDock() {
return BottomDock(
activeTab: DockTab.calendar,
onTodoTap: () {},
onCalendarTap: () {},
onHomeTap: () => Navigator.of(context).pop(),
);
}
}