7.4 密码 aes 后传输效果
AES 介绍
密码需要在传输中加密，防止被网关抓包，平时你们用的 wifi 都是可以被抓包的
https://zh.wikipedia.org/wiki/高级加密标准
高级加密标准（英语：Advanced Encryption Standard，缩写：AES），又称Rijndael 加密法（荷兰语发音：ˈrɛindaːlˈrɛindaːl，音似英文的“Rhine doll”），是美国联邦政府采用的一种区块加密标准。这个标准用来替代原先的DES，已经被多方分析且广为全世界所使用。经过五年的甄选流程，高级加密标准由美国国家标准与技术研究院（NIST）于 2001 年 11 月 26 日发布于 FIPS PUB 197，并在 2002 年 5 月 26 日成为有效的标准。现在，高级加密标准已然成为对称密钥加密中最流行的算法之一。
之所以选这个加密法，是因为 wordpress rest api 中的接口，输入的 password 是一个明文，其实输入 md5 签名更好。
实现步骤：
第 1 步：安装插件 encrypt1flutter pub add ...
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 ...
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 ...
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.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.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.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.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.3 轮播广告 ad
这个组件是一个轮播图组件，再叠加一个指示器组件合成
实现步骤：
第 1 步：下载插件 carousel_slider1flutter pub add carousel_slider
第 2 步：创建 kv 模型lib/common/models/kv.dart
123456789101112131415161718192021222324/// key value 键值对class KeyValueModel<T> { String key; T value; KeyValueModel({required this.key, required this.value}); factory KeyValueModel.fromJson(Map<String, dynamic> json) { return KeyValueModel( key: json['key'] as String, value: jso ...
