fix: 修复日历事件详情页布局问题并添加底部输入框
- 修复 Row 中 Flexible 在无界宽度约束下的布局崩溃问题 - 用 Expanded 包裹内层 Row 提供有界宽度约束 - 添加底部输入框组件（+按钮、输入框、麦克风图标） - 实现事件详情页动态数据展示 - 添加编辑和删除事件功能 - 添加事件不存在时的错误页面
This commit is contained in:
qzl
@@ -6,6 +6,9 @@ import '../../../../core/theme/design_tokens.dart';
|
||||
import '../calendar_state_manager.dart';
|
||||
import '../calendar_time_utils.dart';
|
||||
import '../widgets/bottom_dock.dart';
|
||||
import '../widgets/create_event_sheet.dart';
|
||||
import '../../data/services/mock_calendar_service.dart';
|
||||
import '../../data/models/schedule_item_model.dart';
|
||||
|
||||
class CalendarDayWeekScreen extends StatefulWidget {
|
||||
final DateTime? initialDate;
|
||||
@@ -24,11 +27,14 @@ class CalendarDayWeekScreen extends StatefulWidget {
|
||||
class _CalendarDayWeekScreenState extends State<CalendarDayWeekScreen> {
|
||||
static const double _dayItemWidth = 44;
|
||||
static const double _dayItemGap = 12;
|
||||
static const double _hourHeight = 34;
|
||||
static const double _eventLeftOffset = 52;
|
||||
|
||||
late final CalendarStateManager _calendarManager;
|
||||
late DateTime _selectedDate;
|
||||
late List<DateTime> _monthDates;
|
||||
final ScrollController _dayStripController = ScrollController();
|
||||
Key _eventsKey = UniqueKey();
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
@@ -78,7 +84,10 @@ class _CalendarDayWeekScreenState extends State<CalendarDayWeekScreen> {
|
||||
children: [
|
||||
_buildWeekStrip(),
|
||||
const SizedBox(height: 8),
|
||||
_buildTimelineBoard(),
|
||||
KeyedSubtree(
|
||||
key: _eventsKey,
|
||||
child: _buildTimelineBoard(),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
@@ -129,6 +138,31 @@ class _CalendarDayWeekScreenState extends State<CalendarDayWeekScreen> {
|
||||
),
|
||||
),
|
||||
),
|
||||
const Spacer(),
|
||||
GestureDetector(
|
||||
onTap: () => CreateEventSheet.show(
|
||||
context,
|
||||
initialDate: _selectedDate,
|
||||
onSaved: () {
|
||||
setState(() {
|
||||
_eventsKey = UniqueKey();
|
||||
});
|
||||
},
|
||||
),
|
||||
child: Container(
|
||||
width: 36,
|
||||
height: 36,
|
||||
decoration: BoxDecoration(
|
||||
color: AppColors.blue600,
|
||||
borderRadius: BorderRadius.circular(18),
|
||||
),
|
||||
child: const Icon(
|
||||
LucideIcons.plus,
|
||||
size: 20,
|
||||
color: Colors.white,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
@@ -233,17 +267,157 @@ class _CalendarDayWeekScreenState extends State<CalendarDayWeekScreen> {
|
||||
Widget _buildTimelineBoard() {
|
||||
final now = DateTime.now();
|
||||
final showCurrent = shouldShowCurrentMarker(_selectedDate, now);
|
||||
final rows = <Widget>[];
|
||||
final events = CalendarService().getEventsForDay(_selectedDate);
|
||||
|
||||
for (var hour = 7; hour <= 22; hour++) {
|
||||
rows.add(_buildTimelineRow(formatHour(hour)));
|
||||
if (showCurrent && now.hour == hour) {
|
||||
rows.add(_buildTimelineRow(formatHm(now), isCurrentTime: true));
|
||||
final eventColumns = _calculateEventColumns(events);
|
||||
|
||||
return SizedBox(
|
||||
child: Stack(
|
||||
clipBehavior: Clip.none,
|
||||
children: [
|
||||
Column(
|
||||
children: [
|
||||
for (var hour = 0; hour <= 23; hour++) ...[
|
||||
_buildTimelineRow(formatHour(hour)),
|
||||
if (showCurrent && now.hour == hour)
|
||||
_buildTimelineRow(formatHm(now), isCurrentTime: true),
|
||||
],
|
||||
_buildTimelineRow(formatHour(24), isDisabled: true),
|
||||
],
|
||||
),
|
||||
..._buildPositionedEvents(events, eventColumns),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
List<int> _calculateEventColumns(List<ScheduleItemModel> events) {
|
||||
if (events.isEmpty) return [];
|
||||
|
||||
final columns = List<int>.filled(events.length, -1);
|
||||
final columnHeights = <int, int>{};
|
||||
|
||||
for (var i = 0; i < events.length; i++) {
|
||||
final event = events[i];
|
||||
final eventStart = event.startAt.hour * 60 + event.startAt.minute;
|
||||
final eventEnd = event.endAt != null
|
||||
? event.endAt!.hour * 60 + event.endAt!.minute
|
||||
: eventStart + 60;
|
||||
|
||||
var column = 0;
|
||||
while (true) {
|
||||
final columnEnd = columnHeights[column] ?? 0;
|
||||
if (columnEnd <= eventStart) {
|
||||
columns[i] = column;
|
||||
columnHeights[column] = eventEnd;
|
||||
break;
|
||||
}
|
||||
column++;
|
||||
}
|
||||
}
|
||||
|
||||
rows.add(_buildTimelineRow(formatHour(24), isDisabled: true));
|
||||
return Column(children: rows);
|
||||
return columns;
|
||||
}
|
||||
|
||||
List<Widget> _buildPositionedEvents(
|
||||
List<ScheduleItemModel> events,
|
||||
List<int> columns,
|
||||
) {
|
||||
if (events.isEmpty) return [];
|
||||
|
||||
final maxColumn = columns.reduce((a, b) => a > b ? a : b) + 1;
|
||||
final eventWidgets = <Widget>[];
|
||||
|
||||
for (var i = 0; i < events.length; i++) {
|
||||
final event = events[i];
|
||||
final column = columns[i];
|
||||
|
||||
final startMinutes = event.startAt.hour * 60 + event.startAt.minute;
|
||||
final endMinutes = event.endAt != null
|
||||
? event.endAt!.hour * 60 + event.endAt!.minute
|
||||
: startMinutes + 60;
|
||||
final durationMinutes = endMinutes - startMinutes;
|
||||
|
||||
final top = (startMinutes / 60) * _hourHeight;
|
||||
final height = (durationMinutes / 60) * _hourHeight;
|
||||
|
||||
final eventWidth = maxColumn > 1
|
||||
? (MediaQuery.of(context).size.width - _eventLeftOffset - 16) /
|
||||
maxColumn
|
||||
: MediaQuery.of(context).size.width - _eventLeftOffset - 16;
|
||||
final left = _eventLeftOffset + column * eventWidth;
|
||||
|
||||
eventWidgets.add(
|
||||
Positioned(
|
||||
top: top,
|
||||
left: left,
|
||||
right: maxColumn > 1 ? null : 16,
|
||||
width: maxColumn > 1 ? eventWidth - 4 : null,
|
||||
height: height.clamp(24.0, double.infinity),
|
||||
child: Material(
|
||||
color: Colors.transparent,
|
||||
child: InkWell(
|
||||
onTap: () {
|
||||
final path = '/calendar/events/${event.id}';
|
||||
debugPrint('Navigating to: $path');
|
||||
context.push(path);
|
||||
},
|
||||
child: Container(
|
||||
margin: const EdgeInsets.only(right: 4),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
|
||||
decoration: BoxDecoration(
|
||||
color: _parseColor(
|
||||
event.metadata?.color,
|
||||
).withValues(alpha: 0.2),
|
||||
borderRadius: BorderRadius.circular(4),
|
||||
border: Border.all(
|
||||
color: _parseColor(event.metadata?.color),
|
||||
width: 1,
|
||||
),
|
||||
),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Container(
|
||||
width: 6,
|
||||
height: 6,
|
||||
decoration: BoxDecoration(
|
||||
color: _parseColor(event.metadata?.color),
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 4),
|
||||
Expanded(
|
||||
child: Text(
|
||||
event.title,
|
||||
style: TextStyle(
|
||||
fontSize: 11,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: _parseColor(event.metadata?.color),
|
||||
),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
return eventWidgets;
|
||||
}
|
||||
|
||||
Color _parseColor(String? hex) {
|
||||
if (hex == null || hex.isEmpty) return AppColors.blue600;
|
||||
try {
|
||||
return Color(int.parse(hex.replaceFirst('#', '0xFF')));
|
||||
} catch (_) {
|
||||
return AppColors.blue600;
|
||||
}
|
||||
}
|
||||
|
||||
Widget _buildTimelineRow(
|
||||
|
||||
Reference in New Issue
Block a user