# web2601_ui

**Repository Path**: zhenqi-a/web2601_ui

## Basic Information

- **Project Name**: web2601_ui
- **Description**: flutter  web 前端框架
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-19
- **Last Updated**: 2026-08-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



# web2601_ui

Flutter 通用型界面框架 - 实现主题颜色、字体大小、样式动态变化

## 项目简介

web2601_ui 是一个基于 Flutter 的通用型界面框架，在 [flutter_i10n](https://github.com/hanklee9820/flutter_i10n) 基础上扩展实现 Web 应用。本项目主要解决 Flutter Web 应用中页面刷新后状态丢失的问题，同时提供完整的主题切换、国际化支持和响应式布局方案。

## 功能特点

- **主题切换**: 支持动态切换应用主题颜色、字体大小和样式配置
- **状态保持**: 页面刷新后保持当前界面状态，不丢失用户操作
- **国际化支持**: 提供中英文国际化支持，易于扩展其他语言
- **响应式布局**: 适配小屏、中屏、大屏等多种设备尺寸
- **模块化设计**: 核心功能与业务逻辑分离，便于维护和扩展

## 环境要求

- Flutter SDK: 3.0.0 或更高版本
- Dart SDK: 2.17.0 或更高版本
- 支持的平台: Android、iOS、Web、macOS、Windows、Linux

## 快速开始

### 1. 克隆项目

```bash
git clone https://gitee.com/zhenqi-a/web2601_ui.git
cd web2601_ui
```

### 2. 安装依赖

```bash
flutter pub get
```

### 3. 运行项目

```bash
# 运行 Web 版本
flutter run -d chrome

# 运行 Android 版本
flutter run -d android

# 运行 Windows 版本
flutter run -d windows
```

## 主要功能说明

### 主题切换

应用支持动态切换主题配置，包括：
- 主题颜色方案
- 字体大小调整
- UI 样式变化

用户可在设置页面进行主题偏好设置，配置会自动保存并在应用重启后恢复。

### 国际化支持

本项目集成了完整的国际化解决方案，支持：
- 中文 (zh)
- 英文 (en)

国际化文件位于 `lib/l10n/` 目录下，可根据需要添加更多语言支持。

### 响应式布局

内置响应式布局适配方案，针对不同屏幕尺寸优化显示效果：
- 小屏设备 (< 600px)
- 中屏设备 (600px - 1200px)
- 大屏设备 (> 1200px)

## 项目结构

```
web2601_ui/
├── lib/
│   ├── a_test/              # 测试代码目录（可删除）
│   ├── core/                # 核心功能模块
│   │   ├── network/         # HTTP 请求封装
│   │   ├── provider/        # 状态管理（主题、语言）
│   │   ├── routes/          # 路由配置
│   │   └── theme/           # 主题相关功能
│   ├── features/            # 业务功能模块
│   │   ├── models/          # 数据模型
│   │   ├── pages/           # 页面组件
│   │   │   ├── auth/        # 用户认证相关页面
│   │   │   ├── home/        # 首页模块
│   │   │   └── system/      # 系统设置页面
│   │   └── widgets/         # 自定义通用组件
│   ├── generated/           # 自动生成的文件
│   │   └── intl/            # 国际化生成文件
│   ├── util/                # 工具类
│   ├── l10n/                # 国际化资源文件
│   └── main.dart            # 应用入口
├── assets/
│   ├── fonts/               # 字体文件
│   └── images/              # 图片资源
├── web/                     # Web 相关配置
└── pubspec.yaml             # 依赖配置
```

### 目录说明

- **core/**: 包含应用的核心功能，如网络请求封装、状态管理、路由配置和主题管理
- **features/**: 业务功能模块，按功能模块组织代码，保持高内聚低耦合
- **util/**: 通用工具类，包括设备信息获取、本地存储、Toast 提示等功能
- **generated/**: 由代码生成工具自动产生的文件，主要用于国际化

## 核心模块介绍

### 路由管理 (`lib/core/routes/`)

采用 Flutter Router 进行路由管理，支持：
- 命名路由
- 参数传递
- 路由守卫

### 状态管理 (`lib/core/provider/`)

使用 Provider 进行状态管理，主要管理：
- `ThemeModel`: 主题状态管理
- `LocaleModel`: 语言区域管理

### 主题系统 (`lib/core/theme/`)

提供完整的主题配置功能，支持：
- 主题颜色定义
- 字体样式配置
- 主题持久化存储

### 工具类 (`lib/util/`)

- `config.dart`: 应用配置
- `device_utils.dart`: 设备信息获取
- `storage_manager.dart`: 本地存储管理
- `toast.dart`: Toast 提示组件

## 运行效果展示

| 登录界面1 | 登录界面2 |
|-----------|-----------|
| ![登录1](assets/images/101.png) | ![登录2](assets/images/102.png) |

| 小屏显示 | 小屏显示 |
|----------|----------|
| ![小屏1](assets/images/201.png) | ![小屏2](assets/images/202.png) |

| 中屏显示 | 大屏显示 |
|----------|----------|
| ![中屏](assets/images/203.png) | ![大屏1](assets/images/204.png) |

| 大屏显示 |
|----------|
| ![大屏2](assets/images/205.png) |

## 后续规划

- 完善网络请求模块
- 增加更多主题模板
- 优化移动端交互体验
- 添加单元测试和集成测试

## 贡献指南

1. Fork 本仓库
2. 创建功能分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 创建 Pull Request

## 许可证

本项目采用 MIT 许可证开源。

## 联系方式

- 项目地址: https://gitee.com/zhenqi-a/web2601_ui
- 问题反馈: https://gitee.com/zhenqi-a/web2601_ui/issues