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/todo/ui/screens/todo_detail_screen.dart
+237
View File
@@ -0,0 +1,237 @@
import 'package:flutter/material.dart';
import 'package:lucide_icons/lucide_icons.dart';
import '../../../../core/theme/design_tokens.dart';
class TodoDetailScreen extends StatelessWidget {
const TodoDetailScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: AppColors.todoBg,
body: SafeArea(
child: Column(
children: [
_buildHeader(context),
Expanded(child: _buildContent()),
],
),
),
);
}
Widget _buildHeader(BuildContext context) {
return SizedBox(
height: 64,
child: Padding(
padding: const EdgeInsets.only(left: 16, right: 16, top: 12, bottom: 8),
child: Align(
alignment: Alignment.centerLeft,
child: GestureDetector(
onTap: () => Navigator.of(context).pop(),
child: Container(
width: 36,
height: 36,
decoration: BoxDecoration(
color: AppColors.messageBtnWrap,
borderRadius: BorderRadius.circular(18),
border: Border.all(color: AppColors.messageBtnBorder, width: 1),
),
child: const Icon(
LucideIcons.chevronLeft,
size: 16,
color: AppColors.slate700,
),
),
),
),
),
);
}
Widget _buildContent() {
return Padding(
padding: const EdgeInsets.only(left: 16, right: 16, top: 4, bottom: 20),
child: ListView(
children: [
_buildMainCard(),
const SizedBox(height: 12),
const Text(
'日历事件卡片',
style: TextStyle(
fontFamily: 'Inter',
fontSize: 12,
fontWeight: FontWeight.w500,
color: AppColors.slate500,
),
),
const SizedBox(height: 10),
_buildEventCard(
title: '完成活动海报设计',
time: '2026年2月9日 09:00 - 09:30',
borderColor: AppColors.todoEventBorder1,
),
const SizedBox(height: 10),
_buildEventCard(
title: '活动方案评审会议',
time: '2026年2月9日 16:00 - 17:00',
borderColor: AppColors.todoEventBorder2,
),
const SizedBox(height: 10),
_buildEventCard(
title: '提交最终活动方案',
time: '2026年2月10日 10:00 - 10:20',
borderColor: AppColors.todoEventBorder3,
),
],
),
);
}
Widget _buildMainCard() {
return Container(
width: double.infinity,
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: AppColors.todoCardBg,
borderRadius: BorderRadius.circular(14),
border: Border.all(color: AppColors.todoDetailCardBorder, width: 1),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'活动发布准备',
style: TextStyle(
fontFamily: 'Inter',
fontSize: 18,
fontWeight: FontWeight.w700,
color: AppColors.slate900,
),
),
const SizedBox(height: 4),
const Text(
'截止今天 18:00 · 已拆分为多个日历事件',
style: TextStyle(
fontFamily: 'Inter',
fontSize: 12,
fontWeight: FontWeight.w500,
color: AppColors.slate500,
),
),
const SizedBox(height: 8),
Container(height: 1, color: const Color(0xFFE5E7EB)),
const SizedBox(height: 8),
_buildInfoRow(
label: '所属象限',
value: '重要紧急',
valueColor: AppColors.g1Text,
),
const SizedBox(height: 8),
_buildInfoRow(
label: '关联日历事件',
value: '3个',
valueColor: AppColors.g3Text,
),
],
),
);
}
Widget _buildInfoRow({
required String label,
required String value,
required Color valueColor,
}) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
label,
style: const TextStyle(
fontFamily: 'Inter',
fontSize: 12,
fontWeight: FontWeight.w600,
color: AppColors.slate400,
),
),
Text(
value,
style: TextStyle(
fontFamily: 'Inter',
fontSize: 12,
fontWeight: FontWeight.w700,
color: valueColor,
),
),
],
);
}
Widget _buildEventCard({
required String title,
required String time,
required Color borderColor,
}) {
return Container(
width: double.infinity,
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: AppColors.todoCardBg,
borderRadius: BorderRadius.circular(14),
border: Border.all(color: borderColor, width: 1),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
title,
style: const TextStyle(
fontFamily: 'Inter',
fontSize: 13,
fontWeight: FontWeight.w600,
color: AppColors.slate700,
),
),
Row(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 8,
height: 8,
decoration: BoxDecoration(
color: AppColors.slate300,
shape: BoxShape.circle,
),
),
const SizedBox(width: 8),
Container(
width: 8,
height: 8,
decoration: BoxDecoration(
color: AppColors.slate300,
shape: BoxShape.circle,
),
),
],
),
],
),
const SizedBox(height: 8),
Text(
time,
style: const TextStyle(
fontFamily: 'Inter',
fontSize: 12,
fontWeight: FontWeight.w500,
color: AppColors.slate500,
),
),
],
),
);
}
}
apps/lib/features/todo/ui/screens/todo_quadrants_screen.dart
+254
View File
@@ -0,0 +1,254 @@
import 'package:flutter/material.dart';
import 'package:lucide_icons/lucide_icons.dart';
import '../../../../core/theme/design_tokens.dart';
class TodoQuadrantsScreen extends StatelessWidget {
const TodoQuadrantsScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: AppColors.todoBg,
body: SafeArea(
child: Column(
children: [
_buildHeader(),
Expanded(child: _buildContent()),
_buildBottomDock(),
],
),
),
);
}
Widget _buildHeader() {
return SizedBox(
height: 72,
child: Padding(
padding: const EdgeInsets.only(left: 16, right: 16, top: 14, bottom: 8),
child: Align(
alignment: Alignment.centerLeft,
child: const Text(
'待办事项',
style: TextStyle(
fontFamily: 'Inter',
fontSize: 22,
fontWeight: FontWeight.w700,
color: AppColors.slate900,
),
),
),
),
);
}
Widget _buildContent() {
return Padding(
padding: const EdgeInsets.only(left: 16, right: 16, top: 4, bottom: 96),
child: ListView(
children: [
_buildQuadrant(
title: '重要紧急',
count: 2,
textColor: AppColors.g1Text,
dividerColor: AppColors.g1Divider,
borderColor: AppColors.g1Border,
items: ['18:00 前提交活动方案', '回复客户邀约确认'],
),
const SizedBox(height: 12),
_buildQuadrant(
title: '紧急不重要',
count: 2,
textColor: AppColors.g2Text,
dividerColor: AppColors.g2Divider,
borderColor: AppColors.g2Border,
items: ['确认会场停车信息', '代订明早高铁票'],
),
const SizedBox(height: 12),
_buildQuadrant(
title: '重要不紧急',
count: 3,
textColor: AppColors.g3Text,
dividerColor: AppColors.g3Divider,
borderColor: AppColors.g3Border,
items: ['本周复盘与下周规划', '整理个人知识库结构', '优化三月目标里程碑'],
),
],
),
);
}
Widget _buildQuadrant({
required String title,
required int count,
required Color textColor,
required Color dividerColor,
required Color borderColor,
required List<String> items,
}) {
return Container(
width: double.infinity,
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: AppColors.todoCardBg,
borderRadius: BorderRadius.circular(14),
border: Border.all(color: borderColor, width: 1),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
title,
style: TextStyle(
fontFamily: 'Inter',
fontSize: 15,
fontWeight: FontWeight.w700,
color: textColor,
),
),
Text(
'$count项',
style: TextStyle(
fontFamily: 'Inter',
fontSize: 12,
fontWeight: FontWeight.w700,
color: textColor,
),
),
],
),
const SizedBox(height: 8),
Container(height: 1, color: dividerColor),
const SizedBox(height: 8),
...items.map((item) => _buildTodoItem(item)),
],
),
);
}
Widget _buildTodoItem(String title) {
return SizedBox(
height: 42,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
title,
style: const TextStyle(
fontFamily: 'Inter',
fontSize: 13,
fontWeight: FontWeight.w600,
color: AppColors.slate700,
),
),
Row(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 8,
height: 8,
decoration: BoxDecoration(
color: AppColors.slate300,
shape: BoxShape.circle,
),
),
const SizedBox(width: 8),
Container(
width: 8,
height: 8,
decoration: BoxDecoration(
color: AppColors.slate300,
shape: BoxShape.circle,
),
),
],
),
],
),
);
}
Widget _buildBottomDock() {
return SizedBox(
height: 61,
child: Padding(
padding: const EdgeInsets.only(
left: 20,
right: 20,
top: 12,
bottom: 18,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: 102,
height: 52,
padding: const EdgeInsets.symmetric(horizontal: 5),
decoration: BoxDecoration(
color: AppColors.todoToggleBg,
borderRadius: BorderRadius.circular(24),
border: Border.all(color: AppColors.todoToggleBorder, width: 1),
),
child: Row(
children: [
Container(
width: 44,
height: 44,
decoration: BoxDecoration(
color: AppColors.todoToggleActiveBg,
borderRadius: BorderRadius.circular(18),
border: Border.all(
color: AppColors.todoToggleActiveBorder,
width: 1,
),
),
child: const Icon(
LucideIcons.listTodo,
size: 20,
color: AppColors.blue600,
),
),
const SizedBox(width: 4),
Container(
width: 44,
height: 44,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(18),
),
child: const Icon(
LucideIcons.calendar,
size: 20,
color: AppColors.slate500,
),
),
],
),
),
Container(
width: 44,
height: 44,
decoration: BoxDecoration(
color: AppColors.todoHomeBtnBg,
borderRadius: BorderRadius.circular(18),
border: Border.all(
color: AppColors.todoHomeBtnBorder,
width: 1,
),
),
child: const Icon(
LucideIcons.home,
size: 20,
color: Color(0xFF1E3A8A),
),
),
],
),
),
);
}
}