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_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),
),
),
],
),
),
);
}
}