山东大学创新实训Blog3：前端优化设计

2501_90670820

318人浏览 · 2026-05-01 22:08:41

2501_90670820 · 2026-05-01 22:08:41 发布

从入口结构到整体视觉风格

在这个项目中，前端采用 Flutter 进行开发，整体定位是一个面向菜单识别、菜品翻译、菜品知识查询和点餐辅助的移动端应用。页面设计上，我希望它不是传统工具型 App 那种冷冰冰的界面，而是更接近“美团 / 外卖类应用”的温暖、轻量、生活化风格。

因此，在视觉设计上，项目选择了黄色和橙色作为主色调，通过浅黄色背景、圆角按钮、卡片式布局和柔和的页面层次，营造出一种“点餐、识别、推荐、收藏”都比较自然的使用体验。

一、整体前端入口设计

当前项目的入口文件是 main.dart，它主要负责三件事：

第一，启动 Flutter 应用。

第二，检查用户是否已经登录。

第三，根据登录状态决定进入登录页还是首页。

核心入口代码如下：

void main() {
  runApp(const MyApp());
}

这行代码是 Flutter 应用的起点。runApp() 会把 MyApp 作为整个应用的根组件加载出来。

MyApp 被设计成一个 StatefulWidget，而不是普通的 StatelessWidget，原因是应用启动时需要动态判断用户登录状态。登录状态会变化，因此需要使用状态组件来管理。

二、登录状态控制设计

在 _MyAppState 中，使用了三个状态变量：

bool _isLoggedIn = false;
bool _isLoading = true;
User? _currentUser;

它们分别表示：

_isLoggedIn：当前用户是否已经登录
_isLoading：是否正在检查登录状态
_currentUser：当前登录用户的信息

应用启动后，会在 initState() 中调用 _checkLoginStatus()：

@override
void initState() {
  super.initState();
  _checkLoginStatus();
}

这个设计的作用是：应用一启动，就先从本地存储或认证服务中检查用户之前是否已经登录。

如果用户已经登录，并且本地能够读取到用户信息，那么就直接进入首页；如果登录状态异常或者用户信息丢失，则会执行退出逻辑，避免进入一个“没有用户信息的首页”。

这个逻辑对于真实项目很重要，因为用户认证状态经常会遇到 token 过期、本地缓存失效、用户信息读取失败等情况。

三、启动加载页设计

在登录状态检查完成之前，页面会先显示一个加载状态：

if (_isLoading) {
  return const MaterialApp(
    home: Scaffold(body: Center(child: CircularProgressIndicator())),
  );
}

这个页面虽然简单，但作用很关键。

如果没有这个加载页，应用可能会在极短时间内先显示登录页，然后又跳转到首页，造成页面闪烁。加入 _isLoading 判断后，用户看到的是一个稳定的加载动画，等登录状态判断完成后，再进入对应页面。

这种设计让 App 的启动体验更自然。

四、整体视觉主题设计

应用使用了 ThemeData 对整体风格进行统一配置：

theme: ThemeData(
  useMaterial3: true,
  scaffoldBackgroundColor: const Color(0xFFFFFBF2),
  colorScheme: ColorScheme.fromSeed(
    seedColor: const Color(0xFFFFC300),
    primary: const Color(0xFFFFC300),
    secondary: const Color(0xFFFF9800),
    background: const Color(0xFFFFFBF2),
  ),
)

这里采用了 Material 3 风格，并且使用黄色作为主色调。

整体配色可以概括为：

主色：#FFC300，美团黄，作为按钮、强调区域、选中状态使用
辅助色：#FF9800，橙色，用于图标、高亮提示、重点功能入口
背景色：#FFFBF2，浅暖色背景，让页面看起来更柔和
文字主色：#222222，保证阅读清晰

这套配色的优点是：既能体现“美食 / 点餐”场景，又不会显得过于刺眼。相比纯白背景，浅黄色背景让页面更有生活感。

五、AppBar 设计

项目中对 AppBar 做了统一配置：

appBarTheme: const AppBarTheme(
  backgroundColor: Color(0xFFFFFBF2),
  foregroundColor: Color(0xFF222222),
  elevation: 0,
  centerTitle: false,
),

这里的设计思路是：不使用传统 AppBar 的明显阴影，而是让顶部栏自然融入页面背景。

elevation: 0 表示去掉阴影，页面会更扁平、更现代。

centerTitle: false 表示标题不居中，而是靠左显示。这种布局更接近现代 App 的设计方式，也更适合首页欢迎语、功能说明类页面。

六、按钮风格设计

按钮统一使用黄色背景和深色文字：

elevatedButtonTheme: ElevatedButtonThemeData(
  style: ElevatedButton.styleFrom(
    backgroundColor: const Color(0xFFFFC300),
    foregroundColor: const Color(0xFF222222),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(16),
    ),
  ),
),

这里的重点是圆角设计。

borderRadius: BorderRadius.circular(16) 可以让按钮看起来更柔和，不会像默认直角按钮那样生硬。

在点餐类应用中，圆角按钮、卡片、图标按钮都会让页面更加亲切，也更符合外卖、美食推荐类产品的视觉习惯。

七、页面路由设计

当前项目主要配置了三个基础路由：

routes: {
  '/login': (context) => LoginPage(...),
  '/register': (context) => RegisterPage(...),
  '/home': (context) => HomePage(...),
}

这三个路由分别对应：

/login：登录页面
/register：注册页面
/home：首页

路由设计的作用是统一管理页面跳转。

例如用户退出登录时，会执行：

Navigator.of(context).pushReplacementNamed('/login');

这表示当前页面会被登录页替换掉，而不是简单地压入一个新页面。这样用户退出后，就不能通过返回键重新回到首页，符合登录系统的安全逻辑。

八、首页入口设计

应用启动后，会根据 _isLoggedIn 判断进入哪个页面：

home: _isLoggedIn
    ? HomePage(
        currentUser: _currentUser,
        onLogout: () async {
          await AuthService.logout();
          setState(() {
            _isLoggedIn = false;
            _currentUser = null;
          });
          Navigator.of(context).pushReplacementNamed('/login');
        },
      )
    : const LoginPage(),

这段代码体现了整个应用的核心页面流转逻辑：

用户已登录 → 进入 HomePage
用户未登录 → 进入 LoginPage
用户退出登录 → 清除状态并跳转回 LoginPage

这种结构比较清晰，也方便后期继续扩展，比如加入启动页、引导页、用户权限判断等功能。

九、登录和注册后的状态更新

登录页和注册页都通过回调函数把用户信息传回 MyApp：

onLoginSuccess: (user) {
  setState(() {
    _isLoggedIn = true;
    _currentUser = user;
  });
}

注册成功后也是类似逻辑：

onRegisterSuccess: (user) {
  setState(() {
    _isLoggedIn = true;
    _currentUser = user;
  });
}

这样设计的好处是：登录页和注册页只负责完成自己的业务逻辑，而应用整体的登录状态由根组件统一维护。

换句话说，页面之间不是互相乱跳，而是通过状态控制整体页面展示。

这比在每个页面里都单独判断登录状态更清晰。

十、前端结构拆分思路

随着项目功能增加，原本的 main.dart 会越来越大。如果把首页、收藏页、设置页、识别结果页、菜品详情页全部写在一个文件里，后期维护会非常困难。

因此，当前更推荐的结构是：

lib/
├── main.dart
├── models/
│   └── user.dart
├── services/
│   └── auth_service.dart
├── pages/
│   ├── login_page.dart
│   ├── register_page.dart
│   ├── home_page.dart
│   ├── my_favorites_page.dart
│   ├── cart_page.dart
│   ├── history_page.dart
│   └── recognition_results_page.dart
└── screens/
    ├── knowledge_screen.dart
    └── dish_knowledge_page.dart

拆分后的好处非常明显：

main.dart：只负责应用启动、主题配置、登录状态和路由
home_page.dart：只负责首页 UI 和首页功能入口
login_page.dart：只负责登录逻辑
register_page.dart：只负责注册逻辑
my_favorites_page.dart：只负责收藏页面
cart_page.dart：只负责购物车页面

这种结构更符合真实 Flutter 项目的开发习惯。