源码地址:https://gitee.com/miketutu/flutter-practical-application.git

一、创建项目 - 基本目录使用git管理

二、搭建基础路由和组件:

基础路由和页面组件:

  1. 新建路由配置文件 -- routes/index.dart

  1. 入口处运行- main.dart

  1. 新建MainPage和LoginPage

  1. 写个基本结构

主页Tab栏

SafeArea(避开安全区组件)

安全区:摄像头,导航栏等等

IndexdStack:堆叠组件,根据索引显示对应组件

BottomNavigationBar:上图下字组件,可切换索引

主页Tab栏 - 代码实现:
  1. 将素材拷贝到assets种
  2. 配置pubspec.yaml文件的资源路径

  1. 定义底部循环项数据

  1. 使用函数生成循环项

  1. 配置BottomNavigationBar

  1. 创建四个组件视图

  1. 使用indexStack放置

首页布局实现

代码实现:
  1. 创建5个组件 - components/Home

  1. 轮播图组件

  1. 分类组件

  1. 特惠推荐

  1. 无限滚动

  1. 在CutomerScrollView中组合

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐