1.5 config service 配置代码实现 ConfigService 全局配置管理
第 1 步: 安装依赖包 package_info_plus1flutter pub add package_info_plus
第 2 步: 创建 ConfigServicelib/common/services/config.dart
123456789101112131415161718192021import 'package:get/get.dart';import 'package:package_info_plus/package_info_plus.dart';/// 配置服务class ConfigService extends GetxService { // 这是一个单例写法 static ConfigService get to => Get.find(); PackageInfo? _platform; String get version => _platform? ...
1.7 i18n 多语言配置实现步骤：
第 1 步：yaml 配置pubspec.yaml
123dependencies: flutter_localizations: sdk: flutter
第 2 步：定义 keyslib/common/i18n/locale_keys.dart
123456789101112131415161718/// 多语言 keysclass LocaleKeys { // 通用 static const commonBottomSave = 'common_bottom_save'; static const commonBottomRemove = 'common_bottom_remove'; static const commonBottomCancel = 'common_bottom_cancel'; static const commonBottomConfirm = 'common_bottom_confir ...
1.6 kv 离线存储kv 什么意思key value 的数据格式 ，典型代表 json、Map、 redis
https://www.json.org/json-en.html
实现步骤：
第 1 步：安装插件 shared_preferences1flutter pub add shared_preferences
第 2 步：storage 类lib/common/utils/storage.dart
1234567891011121314151617181920212223242526272829303132333435363738394041424344import 'package:shared_preferences/shared_preferences.dart';/// kv离线存储class Storage { // 单例写法 static final Storage _instance = Storage._internal(); factory Storage() => _instance ...
1.8 dio 封装参考https://pub.dev/packages/dio
https://github.com/flutterchina/dio/blob/master/README-ZH.md
实现步骤：
开始之前请阅读 API 设计规范说明
第 1 步：安装插件 dio123flutter pub add dio# flutter pub add dio_cookie_manager# flutter pub add cookie_jar
dio_cookie_manager cookie_jar 这两个我暂时没用上
第 2 步：常量定义lib/common/values/constants.dart
12345/// 常量class Constants { // wp 服务器 static const wpApiBaseUrl = 'https://wpapi.ducafecat.tech';
第 3 步：单例初始lib/common/services/wp_http ...
1.9 显示名、App 图标一、显示名称修改：
Androidandroid/app/src/main/AndroidManifest.xml
123456<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.flutter_woo_commerce_getx_learn"> <application android:label="Woo" android:name="${applicationName}" android:icon="@mipmap/ic_launcher">
修改 android:label 标签
IOSios/Runner/Info.plist
12<key>CFBund ...
10.1 导航栏组件抽取
发现很多界面都用到了这个导航功能，抽取到 lib/common/components 下面
实现步骤：
第 1 步：mainAppBar 组件编写
注意组件内不要用 .w .h 这种动态计算的方式，我们只有在 业务 UI 层调用时才传入，详见代码规范。
lib/common/components/appbar.dart
12345678910111213141516171819202122232425262728293031323334353637383940414243444546import 'package:flutter/material.dart';import '../index.dart';/// 主导航栏AppBar mainAppBarWidget({ Key? key, Function()? onTap, // 点击事件 Widget? leading, // 左侧按钮 String? hintText, // 输入框默认提示文字 Strin ...
10.2 商品列表编写效果
这个页面适合大家来练手，先不看文档，自己尝试了写下。
实现步骤：
第 1 步：i18nlib/common/i18n/locale_keys.dart
123// 商品 - 列表static const gFlashSellTitle = "goods_flash_sell_title";static const gNewsTitle = "goods_news_title";
lib/common/i18n/locales/locale_en.dart
123// 商品 - 列表LocaleKeys.gFlashSellTitle: 'Flash Sell',LocaleKeys.gNewsTitle: 'New Product',
lib/common/i18n/locales/locale_zh.dart
123// 商品 - 列表LocaleKeys.g ...
11.1 左侧导航栏组件效果
实现步骤：
第 1 步：i18nlib/common/i18n/locale_keys.dart
12// 商品 - 分类static const gCategoryTitle = "goods_category_title";
lib/common/i18n/locales/locale_en.dart
12// 商品 - 分类页LocaleKeys.gCategoryTitle: 'All Categories',
lib/common/i18n/locales/locale_zh.dart
12// 商品 - 分类LocaleKeys.gCategoryTitle: '所有分类',
第 2 步：分类数据缓存读取lib/common/values/constants.dart
123// 基础数据// 商品分类static const storag ...
11.2 右侧商品内容列表编写效果
实现步骤：
第 1 步：控制器lib/pages/goods/category/controller.dart
12345678910// 刷新控制器final RefreshController refreshController = RefreshController( initialRefresh: true, // 一开始就自动下拉刷新);// 列表List<ProductModel> items = [];// 页码int _page = 1;// 页尺寸final int _limit = 20;
1234567891011121314151617181920212223242526272829303132// 拉取数据// isRefresh 是否是刷新Future<bool> _loadSearch(bool isRefresh) async { // 拉取数据 var result = await ProductApi.products(Produc ...
12.10 Tab 商品评论
实现步骤：
第 1 步：评论模型json 数据格式
123456789101112131415161718192021222324252627282930313233343536[ { "id": 12, "date_created": "2022-04-04T23:36:23", "date_created_gmt": "2022-04-04T15:36:23", "product_id": 13, "status": "approved", "reviewer": "ducafecat5", "reviewer_email": "ducafecat5@gmail.com", "review": "<p>001 - ...
