OSAA/flutter-learn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改幾個小 issue

Browse Source
This commit is contained in:
admin
2026-03-21 21:23:56 +08:00
parent 9068d85c92
commit af27b77ad7
11 changed files with 674 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/calendar/calendar_manager.dart
+299 -69
View File
@@ -1,9 +1,12 @@
// calendar_manager.dart
import 'package:flutter/material.dart';
import 'package:table_calendar/table_calendar.dart'; // 建議引入此套件
import 'package:table_calendar/table_calendar.dart';
import 'package:intl/intl.dart';
import './calendar_model.dart';
import './calendar_api.dart';
import './calendar_detail.dart';
import './calendar_form.dart';
class CalendarManager extends StatefulWidget {
final String userId;
@@ -16,33 +19,47 @@ class CalendarManager extends StatefulWidget {
class _CalendarManagerState extends State<CalendarManager> {
final CalendarApiService _apiService = CalendarApiService();
// 狀態控制
// ==== 日曆模式狀態 ====
CalendarFormat _calendarFormat = CalendarFormat.month;
DateTime _focusedDay = DateTime.now();
DateTime? _selectedDay;
Map<DateTime, List<CalendarEvent>> _eventsMap = {}; // 供日曆標點使用
// 資料儲存：將事件按日期分類，方便日曆標點
Map<DateTime, List<CalendarEvent>> _eventsMap = {};
// ==== 列表模式狀態 ====
late DateTime _listStartDate;
late DateTime _listEndDate;
List<CalendarEvent> _listEvents = []; // 供列表模式獨立顯示使用
// 控制目前是日曆還是列表
String _viewMode = '日曆模式';
bool _isLoading = false;
@override
void initState() {
super.initState();
_selectedDay = _focusedDay;
// 初始化列表模式的預設區間為「本月 1 日」到「本月底」
_listStartDate = DateTime(DateTime.now().year, DateTime.now().month, 1);
_listEndDate = DateTime(DateTime.now().year, DateTime.now().month + 1, 0);
// 預設載入日曆資料
_fetchMonthEvents(_focusedDay);
}
// 核心：抓取整個月的資料並進行分類
// ============== API 抓取邏輯 ==============
// 1. 日曆模式：抓取整個月並轉換為 Map 標點
Future<void> _fetchMonthEvents(DateTime month) async {
setState(() => _isLoading = true);
try {
final events = await _apiService.fetchEvents(widget.userId, month);
final sDate = DateTime(month.year, month.month, 1);
final eDate = DateTime(month.year, month.month + 1, 0); // 當月最後一天
final events = await _apiService.fetchEvents(widget.userId, sDate, eDate);
// 將 List 轉換為 Map<DateTime, List<Event>>
Map<DateTime, List<CalendarEvent>> newMap = {};
for (var event in events) {
if (event.startTime != null) {
// 只取日期部分作為 Key
final dateKey = DateTime(event.startTime!.year, event.startTime!.month, event.startTime!.day);
if (newMap[dateKey] == null) newMap[dateKey] = [];
newMap[dateKey]!.add(event);
@@ -59,7 +76,65 @@ class _CalendarManagerState extends State<CalendarManager> {
}
}
// 獲取選定日期的行程
// 2. 列表模式：抓取特定日期區間，單純存成 List
Future<void> _fetchListEvents() async {
setState(() => _isLoading = true);
try {
final events = await _apiService.fetchEvents(widget.userId, _listStartDate, _listEndDate);
// 依開始時間排序
events.sort((a, b) => (a.startTime ?? DateTime.now()).compareTo(b.startTime ?? DateTime.now()));
setState(() {
_listEvents = events;
_isLoading = false;
});
} catch (e) {
setState(() => _isLoading = false);
ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text("列表載入失敗: $e")));
}
}
// 簡單式：獨立選擇開始或結束日期
Future<void> _selectDate(bool isStart) async {
final DateTime initialDate = isStart ? _listStartDate : _listEndDate;
final DateTime? picked = await showDatePicker(
context: context,
initialDate: initialDate,
firstDate: DateTime(2020),
lastDate: DateTime(2030),
builder: (context, child) {
return Theme(
data: Theme.of(context).copyWith(
colorScheme: const ColorScheme.light(primary: Colors.blueAccent),
),
child: child!,
);
},
);
if (picked != null) {
setState(() {
if (isStart) {
_listStartDate = picked;
// 防呆：如果開始日期大於結束日期，讓結束日期自動等於開始日期
if (_listStartDate.isAfter(_listEndDate)) {
_listEndDate = _listStartDate;
}
} else {
_listEndDate = picked;
// 防呆：如果結束日期小於開始日期，讓開始日期自動等於結束日期
if (_listEndDate.isBefore(_listStartDate)) {
_listStartDate = _listEndDate;
}
}
});
_fetchListEvents(); // 選定後立刻觸發 API 重新查詢
}
}
// 獲取日曆選定日期的行程
List<CalendarEvent> _getEventsForDay(DateTime day) {
final dateKey = DateTime(day.year, day.month, day.day);
return _eventsMap[dateKey] ?? [];
@@ -68,102 +143,257 @@ class _CalendarManagerState extends State<CalendarManager> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xFFF8F9FA),
appBar: AppBar(
title: const Text('企業行事曆'),
title: const Text('行事曆', style: TextStyle(fontWeight: FontWeight.bold)),
backgroundColor: Colors.white,
foregroundColor: Colors.black87,
elevation: 0.5,
actions: [
IconButton(icon: const Icon(Icons.today), onPressed: () => setState(() => _focusedDay = DateTime.now())),
// 視圖切換下拉選單
Padding(
padding: const EdgeInsets.only(right: 8.0),
child: DropdownButtonHideUnderline(
child: DropdownButton<String>(
value: _viewMode,
icon: const Icon(Icons.arrow_drop_down, color: Colors.blueAccent),
items: ['日曆模式', '列表模式'].map((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value, style: const TextStyle(fontWeight: FontWeight.bold)),
);
}).toList(),
onChanged: (newValue) {
if (newValue != null && newValue != _viewMode) {
setState(() => _viewMode = newValue);
// 切換模式時，呼叫對應的 API
if (newValue == '列表模式') {
_fetchListEvents();
} else {
_fetchMonthEvents(_focusedDay);
}
}
},
),
),
),
IconButton(
icon: const Icon(Icons.today, color: Colors.blueAccent),
onPressed: () {
setState(() {
_focusedDay = DateTime.now();
_selectedDay = DateTime.now();
// 如果是列表模式，也順便重置回當月區間
_listStartDate = DateTime(DateTime.now().year, DateTime.now().month, 1);
_listEndDate = DateTime(DateTime.now().year, DateTime.now().month + 1, 0);
});
_viewMode == '日曆模式'
? _fetchMonthEvents(_focusedDay)
: _fetchListEvents();
}
),
],
),
body: Column(
children: [
// 1. 日曆組件
TableCalendar<CalendarEvent>(
body: _viewMode == '日曆模式' ? _buildCalendarLayout() : _buildListLayout(),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.blueAccent,
child: const Icon(Icons.add, color: Colors.white),
onPressed: () async {
// 跳轉至新增表單，並將目前選擇的日期傳入作為預設值
final result = await Navigator.push(
context,
MaterialPageRoute(
builder: (_) => CalendarForm(
userId: widget.userId,
initialDate: _selectedDay, // 貼心設計：自動帶入你在日曆上點擊的日期
),
),
);
// 如果表單回傳 true (代表新增成功)，就重新 Call API 抓取最新資料！
if (result == true) {
if (_viewMode == '日曆模式') {
_fetchMonthEvents(_focusedDay);
} else {
_fetchListEvents();
}
}
},
),
);
}
// ============== 視圖 1：日曆模式 ==============
Widget _buildCalendarLayout() {
return Column(
children: [
Container(
color: Colors.white,
child: TableCalendar<CalendarEvent>(
firstDay: DateTime.utc(2020, 1, 1),
lastDay: DateTime.utc(2030, 12, 31),
focusedDay: _focusedDay,
calendarFormat: _calendarFormat,
selectedDayPredicate: (day) => isSameDay(_selectedDay, day),
eventLoader: _getEventsForDay, // 在有行程的日期顯示小點點
// 樣式設定
eventLoader: _getEventsForDay,
calendarStyle: CalendarStyle(
todayDecoration: BoxDecoration(color: Colors.blue.withOpacity(0.5), shape: BoxShape.circle),
selectedDecoration: const BoxDecoration(color: Colors.blue, shape: BoxShape.circle),
todayDecoration: BoxDecoration(color: Colors.blue.withOpacity(0.3), shape: BoxShape.circle),
selectedDecoration: const BoxDecoration(color: Colors.blueAccent, shape: BoxShape.circle),
markerDecoration: const BoxDecoration(color: Colors.orange, shape: BoxShape.circle),
),
// 互動事件
onDaySelected: (selectedDay, focusedDay) {
setState(() {
_selectedDay = selectedDay;
_focusedDay = focusedDay;
});
},
onFormatChanged: (format) {
setState(() => _calendarFormat = format);
},
onFormatChanged: (format) => setState(() => _calendarFormat = format),
onPageChanged: (focusedDay) {
_focusedDay = focusedDay;
_fetchMonthEvents(focusedDay); // 切換月份時自動重新抓取 API
_fetchMonthEvents(focusedDay);
},
),
const Divider(height: 1),
// 2. 下方行程列表
Expanded(
child: _isLoading
? const Center(child: CircularProgressIndicator())
: _buildEventList(),
),
],
),
floatingActionButton: FloatingActionButton(
child: const Icon(Icons.add),
onPressed: () { /* 實重新增行程邏輯 */ },
),
),
const SizedBox(height: 8),
Expanded(
child: _isLoading
? const Center(child: CircularProgressIndicator())
: _buildEventListForDay(),
),
],
);
}
Widget _buildEventList() {
Widget _buildEventListForDay() {
final dayEvents = _getEventsForDay(_selectedDay!);
if (dayEvents.isEmpty) {
return Center(
child: Text(
"${DateFormat('MM/dd').format(_selectedDay!)} 沒有行程",
style: const TextStyle(color: Colors.grey),
),
child: Text("${DateFormat('MM/dd').format(_selectedDay!)} 沒有行程", style: const TextStyle(color: Colors.grey, fontSize: 16)),
);
}
return ListView.builder(
padding: const EdgeInsets.all(12),
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
itemCount: dayEvents.length,
itemBuilder: (context, index) {
final event = dayEvents[index];
return Card(
elevation: 2,
margin: const EdgeInsets.only(bottom: 10),
child: ListTile(
leading: Container(
width: 4,
height: 40,
decoration: BoxDecoration(
color: event.levelColor,
borderRadius: BorderRadius.circular(2),
itemBuilder: (context, index) => _buildEventCard(dayEvents[index]),
);
}
// ============== 視圖 2：列表模式 (簡單式日期篩選器) ==============
Widget _buildListLayout() {
return Column(
children: [
// 頂部日期區間選擇器 (簡單式左右分割)
Container(
color: Colors.white,
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
child: Row(
children: [
Expanded(child: _buildDateSelectButton('開始日期', _listStartDate, true)),
const Padding(
padding: EdgeInsets.symmetric(horizontal: 12.0),
child: Text('至', style: TextStyle(color: Colors.grey, fontWeight: FontWeight.bold)),
),
),
title: Text(event.title, style: const TextStyle(fontWeight: FontWeight.bold)),
subtitle: Text(event.timeRangeText),
trailing: const Icon(Icons.chevron_right),
onTap: () => Navigator.push(
context,
MaterialPageRoute(builder: (_) => CalendarDetail(event: event))
),
Expanded(child: _buildDateSelectButton('結束日期', _listEndDate, false)),
],
),
);
},
),
// 列表結果
Expanded(
child: _isLoading
? const Center(child: CircularProgressIndicator())
: _listEvents.isEmpty
? const Center(child: Text("該區間尚無任何行程", style: TextStyle(color: Colors.grey, fontSize: 16)))
: ListView.builder(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
itemCount: _listEvents.length,
itemBuilder: (context, index) {
return _buildEventCard(_listEvents[index], showDate: true);
},
),
),
],
);
}
// 獨立的日期選擇按鈕 UI
Widget _buildDateSelectButton(String label, DateTime date, bool isStart) {
return InkWell(
onTap: () => _selectDate(isStart),
borderRadius: BorderRadius.circular(8),
child: Container(
padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 8),
decoration: BoxDecoration(
color: Colors.blue.withOpacity(0.05),
border: Border.all(color: Colors.blueAccent.withOpacity(0.3)),
borderRadius: BorderRadius.circular(8),
),
child: Column(
children: [
Text(label, style: const TextStyle(fontSize: 12, color: Colors.grey)),
const SizedBox(height: 4),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(Icons.calendar_today, size: 14, color: Colors.blueAccent),
const SizedBox(width: 6),
Text(
DateFormat('yyyy/MM/dd').format(date),
style: const TextStyle(fontWeight: FontWeight.bold, color: Colors.blueAccent, fontSize: 14)
),
],
),
],
),
),
);
}
// ============== 共用元件：行程 Card ==============
Widget _buildEventCard(CalendarEvent event, {bool showDate = false}) {
return Card(
elevation: 0,
margin: const EdgeInsets.only(bottom: 12),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
side: BorderSide(color: Colors.grey.shade200),
),
child: ListTile(
contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
leading: Container(
width: 5,
height: 40,
decoration: BoxDecoration(
color: event.levelColor,
borderRadius: BorderRadius.circular(4),
),
),
title: Text(event.title, style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 16)),
subtitle: Padding(
padding: const EdgeInsets.only(top: 6.0),
child: Row(
children: [
Icon(Icons.access_time, size: 14, color: Colors.grey.shade600),
const SizedBox(width: 4),
Text(
showDate && event.startTime != null
? "${DateFormat('MM/dd').format(event.startTime!)} ${event.timeRangeText}"
: event.timeRangeText,
style: TextStyle(color: Colors.grey.shade700),
),
],
),
),
trailing: const Icon(Icons.chevron_right, color: Colors.grey),
onTap: () => Navigator.push(
context,
MaterialPageRoute(builder: (_) => CalendarDetail(event: event))
),
),
);
}
}