TEMP

ui/flutter_v2/lib/modules/task/screens/gradient_button.dart

@@ -0,0 +1,60 @@
+import 'package:flutter/material.dart';
+
+class GradientButton extends StatelessWidget {
+  final String text;
+  final VoidCallback onPressed;
+  final IconData? icon; // 添加可选图标参数
+
+  const GradientButton({
+    super.key,
+    required this.text,
+    required this.onPressed,
+    this.icon,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: 120,
+      height: 40,
+      child: ElevatedButton(
+        onPressed: onPressed,
+        style: ElevatedButton.styleFrom(
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(143),
+          ),
+          padding: EdgeInsets.zero,
+          backgroundColor: Colors.transparent,
+        ),
+        child: Ink(
+          decoration: const BoxDecoration(
+            gradient: LinearGradient(
+              colors: [Color(0xFF3ACBBE), Color(0xFF2CDB90)],
+              begin: Alignment.centerLeft,
+              end: Alignment.centerRight,
+            ),
+            borderRadius: BorderRadius.all(Radius.circular(143)),
+          ),
+          child: Container(
+            alignment: Alignment.center,
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                if (icon != null) Icon(icon, size: 16.0, color: Colors.white),
+                if (icon != null) const SizedBox(width: 4.0), // 图标和文本之间的间距
+                Text(
+                  text,
+                  style: const TextStyle(
+                    fontSize: 16.0,
+                    fontWeight: FontWeight.bold,
+                    color: Color(0xFFFFFFFE),
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

ui/flutter_v2/lib/modules/task/screens/task.dart

@@ -0,0 +1,78 @@
+import 'package:flutter/material.dart';
+import 'gradient_button.dart';
+import 'task_tabs.dart';
+
+class TaskScreen extends StatefulWidget {
+  const TaskScreen({super.key});
+
+  @override
+  State<TaskScreen> createState() => _TaskScreenState();
+}
+
+class _TaskScreenState extends State<TaskScreen> {
+  int _selectedTabIndex = 0;
+  final List<String> _tabs = ['下载中', '已完成', '任务失败'];
+  // 示例数据，实际应用中应该从数据源获取
+  final List<int> _counts = [1, 12, 313];
+
+  void _handleTabSelected(int index) {
+    setState(() {
+      _selectedTabIndex = index;
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.all(16.0),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Padding(
+            padding: const EdgeInsets.only(left: 16.0, top: 16.0),
+            child: Row(
+              children: [
+                GradientButton(
+                  text: '创建任务',
+                  icon: Icons.add, // 添加加号图标
+                  onPressed: () {
+                    // 处理创建任务按钮点击事件
+                  },
+                ),
+                const SizedBox(width: 20), // 添加间距
+                TaskTabs(
+                  tabs: _tabs,
+                  selectedIndex: _selectedTabIndex,
+                  onTabSelected: _handleTabSelected,
+                  counts: _counts, // 添加计数数据
+                ),
+              ],
+            ),
+          ),
+          const SizedBox(height: 20),
+          Expanded(child: _buildTaskList(_selectedTabIndex)),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildTaskList(int tabIndex) {
+    // 根据选中的标签页显示不同的任务列表
+    switch (tabIndex) {
+      case 0:
+        return const Center(
+          child: Text('下载中的任务列表', style: TextStyle(color: Colors.white)),
+        );
+      case 1:
+        return const Center(
+          child: Text('已完成的任务列表', style: TextStyle(color: Colors.white)),
+        );
+      case 2:
+        return const Center(
+          child: Text('失败的任务列表', style: TextStyle(color: Colors.white)),
+        );
+      default:
+        return Container();
+    }
+  }
+}

ui/flutter_v2/lib/modules/task/screens/task_list.dart

@@ -0,0 +1,29 @@
+import 'package:flutter/material.dart';
+
+class TaskList extends StatelessWidget {
+  const TaskList({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return ListView.builder(
+      padding: const EdgeInsets.all(16),
+      itemCount: 5, // Replace with dynamic task count
+      itemBuilder: (context, index) {
+        return Card(
+          margin: const EdgeInsets.only(bottom: 16),
+          child: ListTile(
+            leading: const Icon(Icons.file_download),
+            title: Text('Task ${index + 1}'),
+            subtitle: const Text('Downloading...'),
+            trailing: IconButton(
+              icon: const Icon(Icons.delete),
+              onPressed: () {
+                // Handle delete action
+              },
+            ),
+          ),
+        );
+      },
+    );
+  }
+}

ui/flutter_v2/lib/modules/task/screens/task_tabs.dart

@@ -0,0 +1,71 @@
+import 'package:flutter/material.dart';
+
+class TaskTabs extends StatelessWidget {
+  final List<String> tabs;
+  final int selectedIndex;
+  final ValueChanged<int> onTabSelected;
+  final List<int>? counts;
+
+  const TaskTabs({
+    super.key,
+    required this.tabs,
+    required this.selectedIndex,
+    required this.onTabSelected,
+    this.counts,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: 366,
+      height: 40,
+      decoration: BoxDecoration(
+        color: const Color.fromRGBO(76, 111, 130, 0.76),
+        borderRadius: BorderRadius.circular(40),
+      ),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+        children: List.generate(tabs.length, (index) {
+          final isSelected = index == selectedIndex;
+          final selectedFontColor =
+              isSelected ? const Color(0xFFFFFFFE) : const Color(0xFFCCCCCC);
+          return GestureDetector(
+            onTap: () => onTabSelected(index),
+            child: Container(
+              width: 114,
+              height: 32,
+              decoration: BoxDecoration(
+                color:
+                    isSelected ? const Color(0xFF63889C) : Colors.transparent,
+                borderRadius: BorderRadius.circular(40),
+              ),
+              child: Row(
+                mainAxisSize: MainAxisSize.min, // 行只占用需要的空间
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  Text(
+                    tabs[index],
+                    style: TextStyle(
+                      fontSize: 16.0,
+                      fontWeight: FontWeight.bold,
+                      color: selectedFontColor,
+                    ),
+                    maxLines: 1, // 确保文本不换行
+                  ),
+                  const SizedBox(width: 4), // 文字和计数器之间的固定间距
+                  Container(
+                    margin: const EdgeInsets.only(bottom: 10), // 使计数器上移
+                    child: Text(
+                      '${counts![index]}',
+                      style: TextStyle(color: selectedFontColor, fontSize: 12),
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          );
+        }),
+      ),
+    );
+  }
+}