diff --git a/frontend/asset_assistant/lib/main.dart b/frontend/asset_assistant/lib/main.dart index 07c02b8..6c2920d 100644 --- a/frontend/asset_assistant/lib/main.dart +++ b/frontend/asset_assistant/lib/main.dart @@ -1,3 +1,4 @@ +import 'package:asset_assistant/pages/exchange_add_page.dart'; import 'package:asset_assistant/pages/exchange_page.dart'; import 'package:asset_assistant/pages/home_page.dart'; import 'package:asset_assistant/pages/login_page.dart'; @@ -27,6 +28,7 @@ class MyApp extends StatelessWidget { '/login': (context) => const LoginPage(), '/home': (context) => HomePage(), '/exchange': (context) => ExchangePage(), + '/exchange/add': (context) => AddExchangePage(), // 推荐首选 }, theme: ThemeData( // 金融暗夜风格主题配置 diff --git a/frontend/asset_assistant/lib/pages/exchange_add_page.dart b/frontend/asset_assistant/lib/pages/exchange_add_page.dart new file mode 100644 index 0000000..d278289 --- /dev/null +++ b/frontend/asset_assistant/lib/pages/exchange_add_page.dart @@ -0,0 +1,133 @@ +import 'package:flutter/material.dart'; + +class AddExchangePage extends StatelessWidget { + // 功能列表数据 + final List> features = [ + {'icon': Icons.bar_chart, 'title': '数据分析'}, + {'icon': Icons.balance, 'title': '交易'}, + {'icon': Icons.account_balance, 'title': '交易所'}, + {'icon': Icons.branding_watermark, 'title': '品种'}, + ]; + + AddExchangePage({super.key}); + + @override + Widget build(BuildContext context) { + final theme = Theme.of(context); + + return Scaffold( + appBar: AppBar( + title: const Text('交易所'), + centerTitle: true, + elevation: 4, + shadowColor: Colors.black12, + backgroundColor: theme.colorScheme.surfaceContainerHighest, + // 1. 左上角返回按钮及功能实现 + leading: IconButton( + icon: const Icon(Icons.arrow_back), + onPressed: () { + Navigator.of(context).pop(); // 返回上一页 + }, + ), + // 2. 右上角添加按钮(展示功能) + actions: [ + IconButton( + icon: const Icon(Icons.add), + onPressed: () { + // 暂为展示功能,可后续添加具体逻辑 + }, + ), + ], + ), + // 使用SafeArea确保内容在安全区域内 + body: SafeArea( + // 移除不必要的Expanded,避免约束冲突 + child: Container( + color: theme.colorScheme.surface, + // 让容器占满整个可用空间 + width: double.infinity, + height: double.infinity, + child: ListView.builder( + // 修改为ListView.builder + padding: const EdgeInsets.symmetric(vertical: 8), + itemCount: features.length, + // 优化Web端滚动物理效果,同时支持触摸和鼠标滚动 + physics: const ScrollPhysics(parent: BouncingScrollPhysics()), + itemBuilder: (context, index) { + // 构建列表项 + Widget item = _buildFeatureItem( + context: context, + icon: features[index]['icon'], + title: features[index]['title'], + ); + + // 在每个列表项下方添加分割线,包括最后一个 + return Column( + mainAxisSize: MainAxisSize.min, + children: [ + item, + Divider( + height: 1, + thickness: 1, + indent: 72, + endIndent: 16, + color: theme.dividerColor, + ), + ], + ); + }, + ), + ), + ), + ); + } + + Widget _buildFeatureItem({ + required BuildContext context, + required IconData icon, + required String title, + }) { + final theme = Theme.of(context); + + return Material( + color: Colors.transparent, + child: InkWell( + onTap: () { + // 点击事件可以在这里添加 + }, + borderRadius: BorderRadius.circular(8), + splashColor: theme.colorScheme.primary.withAlpha(26), // 0.1透明度的alpha值 + highlightColor: theme.colorScheme.primary.withAlpha( + 13, + ), // 0.05透明度的alpha值 + child: Container( + height: 64, + padding: const EdgeInsets.symmetric(horizontal: 16), + child: Row( + children: [ + Container( + width: 40, + height: 40, + decoration: BoxDecoration( + color: theme.colorScheme.surfaceContainerHighest, + borderRadius: BorderRadius.circular(8), + ), + child: Icon(icon, size: 24, color: theme.colorScheme.secondary), + ), + const SizedBox(width: 16), + Text( + title, + style: theme.textTheme.titleMedium?.copyWith( + fontWeight: FontWeight.w500, + color: theme.colorScheme.onSurface, + ), + ), + const Spacer(), + Icon(Icons.arrow_forward_ios, size: 18, color: theme.hintColor), + ], + ), + ), + ), + ); + } +}