📱 Flutter简介

Flutter是Google开发的一个框架,可以用一套代码同时开发Android和iOS应用。它使用Dart编程语言,但使用AI辅助开发时,我们不需要深入学习这门语言。

为什么选择Flutter：

  • 跨平台：一次开发,同时支持Android和iOS
  • 热重载：修改代码后立即看到效果
  • 丰富的组件：内置大量美观的UI组件
  • 性能好：接近原生应用的性能
  • 活跃的社区：遇到问题容易找到解决方案
📁 项目结构

了解Flutter项目的基本结构，这样我们才知道AI生成的代码应该放在哪里：

lib/ # 存放所有代码的地方 ├── pages/ # 所有页面都放这里，比如登录页、首页 ├── widgets/ # 可重复使用的小组件，比如自定义按钮 ├── models/ # 数据结构定义，比如用户信息的格式 └── services/ # 功能实现，比如网络请求 assets/ # 图片、字体等资源文件 pubspec.yaml # 项目配置文件，类似菜谱

💡 简单理解：

  • pages/: 就像一本书的每一页，每个页面是独立的文件
  • widgets/: 像乐高积木，可以重复使用的界面部件
  • models/: 定义数据的样子，比如用户信息包含哪些内容
  • services/: 实现具体功能，比如和服务器通信
  • assets/: 存放图片等资源，就像图书馆
  • pubspec.yaml: 项目的说明书，记录项目需要用到的工具
💡 基本概念
1
界面元素（Widget）

在Flutter中，所有看得见的东西都叫Widget（组件）。就像搭积木一样，把不同的Widget组合在一起就能做出完整的界面。

常见的界面元素：

  • 基础元素：文字、图片、按钮
  • 输入元素：输入框、开关、选择器
  • 容器元素：放其他元素的盒子，可以设置背景色、边框等
  • 列表元素：可以上下滚动的内容列表
2
布局方式

在Flutter中，布局就像摆放积木，主要有这几种方式：

常见布局方式：

  • 上下排列：像书本一样从上到下排列内容
  • 左右排列：像报纸一样从左到右排列内容
  • 层叠布局：像贴画一样，一层摞一层
  • 网格布局：像相册一样，整齐排列成行和列
3
页面组成

一个基本的页面通常包含这些部分：

主要组成部分：

  • 顶部栏：显示标题、返回按钮等
  • 内容区：页面的主要内容
  • 底部栏：放置导航按钮，比如"首页"、"我的"等
4
导航和跳转

应用中的页面跳转，就像翻书一样，需要了解：

页面跳转相关：

  • 普通跳转：打开新页面，比如从首页跳到详情页
  • 返回：关闭当前页面，回到上一个页面
  • 传递数据：在页面间传递信息，比如把用户选择的内容带到下一页
  • 底部导航：在主要功能页面间切换，比如首页、我的等
5
数据处理

应用需要处理各种数据，比如用户信息、列表内容等。在使用AI开发时，主要需要了解：

数据相关概念：

  • 本地存储：需要保存在手机上的数据，比如用户设置
  • 网络请求：从服务器获取或发送数据
  • 状态管理：管理和更新界面上显示的数据
6
常见交互

手机应用常见的操作方式：

交互类型：

  • 点击：最基本的操作，比如按钮点击
  • 滑动：上下翻页，左右切换等
  • 下拉刷新：更新页面内容
  • 弹窗：显示提示信息或需要确认的内容
  • 表单输入：填写信息，比如登录、注册
目录