7.2 读取用户资料&缓存实现步骤：
第 1 步：常量定义lib/common/values/constants.dart
123456/// 常量class Constants { ... static const storageToken = 'token';// 登录成功后 token static const storageProfile = 'profile';// 用户资料缓存}
storageToken 登录成功后 token
storageProfile 用户资料缓存
第 2 步：登录请求 modellib/common/models/woo/request/user_login.dart
12345678910111213141516171819202122/// 用户登录class UserLoginReq { String? username; String? password; UserL ...
8.2 图标组件加 Badge 提示效果
实现步骤：
第 1 步：输入接口1234/// 图标组件class IconWidget extends StatelessWidget { ... final String? badgeString; // Badge 文字
第 2 步：build 实现123456789101112131415161718192021@overrideWidget build(BuildContext context) { ... // 文字、数字 if (badgeString != null) { return Badge( badgeContent: Text( badgeString!, style: TextStyle( color: AppColors.onPrimary, fontSize: 9, ), ), position: BadgePosition.topEnd(top: -7, ...
8.1 导航栏编写布局
实现步骤：
第 1 步：i18n 多语言lib/common/i18n/locale_keys.dart
12345// APP 主导航static const tabBarHome = 'tab_bar_home';static const tabBarCart = 'tab_bar_cart';static const tabBarMessage = 'tab_bar_message';static const tabBarProfile = 'tab_bar_profile';
lib/common/i18n/locales/locale_en.dart
12345// APP 导航LocaleKeys.tabBarHome: 'Home',LocaleKeys.tabBarCart: 'Cart',LocaleKeys.tabBarMessage: 'M ...
8.3 主界面编写实现步骤：
第 1 步：Bindings 依赖管理
主界面、首页、购物车、消息、我的 一共 5 个控制器，统一依赖载入
lib/pages/system/main/binding.dart
1234567891011/// 主界面依赖class MainBinding implements Bindings { @override void dependencies() { Get.lazyPut<HomeController>(() => HomeController()); Get.lazyPut<CartIndexController>(() => CartIndexController()); Get.lazyPut<MsgIndexController>(() => MsgIndexController()); Get.lazyPut<MyIndexController>(() => MyIndex ...
8.4 设置系统栏样式问题描述
系统栏颜色有的时候会变成白色，这样就不能看清楚系统栏信息了。
实现步骤：
第 1 步：theme 样式定义lib/common/style/theme.dart
123456789101112131415161718/// 主题class AppTheme { /// 亮色 static ThemeData light = ThemeData( ... appBarTheme: const AppBarTheme( systemOverlayStyle: SystemUiOverlayStyle.dark, // appBar 暗色 , 和主题色相反 ), ); /// 暗色 static ThemeData dark = ThemeData( ... appBarTheme: const AppBarTheme( systemOverlayStyle: SystemUiOverlayStyle.light, // appBar 亮色 , 和主题色相 ...
9.1 商品首页布局 sliver 编写
为了保证整体滚动的一致性，我们用 sliver 家族来布局如果没有这个需求用，用 SingleChildScrollView 就行了
实现步骤：
第 1 步：i18nlib/common/i18n/locale_keys.dart
12345// 商品 - 首页static const gHomeSearch = 'goods_home_search';static const gHomeFlashSell = 'goods_home_flash_shell';static const gHomeNewProduct = 'goods_home_new_product';static const gHomeMore = 'goods_home_more';
lib/common/i18n/locales/locale_en.dart
12345// 商品 - 首页LocaleKeys.gH ...
9.2 搜索栏
实现步骤：
第 1 步：搜索栏编写lib/pages/goods/home/controller.dart
12// 导航点击事件void onAppBarTap() {}
lib/pages/goods/home/view.dart
12345678910111213141516171819202122232425262728293031323334// 导航栏AppBar _buildAppBar() { return AppBar( // 背景透明 backgroundColor: Colors.transparent, // 取消阴影 elevation: 0, // 标题栏左侧间距 titleSpacing: AppSpace.listItem, // 搜索栏 title: InputWidget.search( // 提示文字，多语言 hintText: LocaleKeys. ...
9.10 首次打开读缓存
如果首屏快速展示内容，体验将是一个提升我们设置下缓存，数据是来自于下拉刷新
实现步骤：
第 1 步：定义缓存常量lib/common/values/constants.dart
12345// 首页离线static const storageHomeBanner = 'home_banner';static const storageHomeCategories = 'home_categories';static const storageHomeFlashSell = 'home_flash_sell';static const storageHomeNewSell = 'home_new_sell';
第 2 步：本地离线 json 数据格式lib/common/utils/storage.dart
1234567/// kv离线存储class Storage { ... Future<b ...
9.4 数据模型、API（分类、商品）实现步骤：
第 1 步：分类返回数据结构
12345678910111213141516171819202122232425262728293031323334[ { "id": 34, "name": "Bag", "slug": "bag", "parent": 0, "description": "", "display": "default", "image": { "id": 63, "date_created": "2022-04-09T09:58:41", "date_created_gmt": "2022-04-09T01:58:41& ...
9.5 分类栏编写
这是一个横向混动
实现步骤：
第 1 步：分类列表项编写lib/common/components/category_item.dart
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556import 'package:flutter/material.dart';import 'package:flutter_screenutil/flutter_screenutil.dart';import '../index.dart';/// 分类导航项class CategoryListItemWidget extends StatelessWidget { /// 分类数据 final CategoryModel category; /// 选中代码 final int? selectId; /// t ...
