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 ...

9.8 新商品栏、上下拉刷新实现步骤： 第 1 步：安装插件 pull_to_refresh1flutter pub add pull_to_refresh 第 2 步：main 配置插件lib/main.dart 123456789101112131415161718192021222324class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return ScreenUtilInit( ... builder: () { return RefreshConfiguration( headerBuilder: () => const ClassicHeader(), // 自定义刷新头部 footerBuilder: () => c ...

9.7 推荐商品栏编写实现步骤： 第 1 步：商品栏标题编写 这个可以复用所有抽取出来了主要有 标题、次标题、更多点击事件 三块完成 lib/pages/goods/home/widgets/list_title.dart 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647import 'package:flutter/material.dart';import 'package:flutter_woo_commerce_getx_learn/common/index.dart';import 'package:get/get.dart';/// 列表标题class BuildListTitle extends StatelessWidget { /// 标题 final String title; /// 次标题 final Stri ...

9.9 占位图 大家已经发现了，因为首页拉取的数据比较多，所以首屏展示慢。（如多次请求、网络延迟等等）大家可以放一张占位图，加强下用户体验 实现步骤： 第 1 步：添加图片 将占位图放在这个位置assets/images/3.0x/home_placeholder.png 通过 vscode Flutter GetX Generator - 猫哥 插件 生成 x2 x1 尺寸图 配置图片资源索引lib/common/values/images.dart 第 2 步：占位图组件lib/common/components/placehold.dart 123456789101112131415161718192021import 'package:flutter/material.dart';import '../index.dart';/// 占位图组件class PlaceholdWidget extends StatelessWidget &# ...

全部配置开启clash的TUN模式 1234567891011121314151617# 自动补全历史命令，逐字补全Import-Module PSReadLineSet-PSReadLineOption -PredictionSource History# 修改Tab补全为bash风格Set-PSReadlineKeyHandler -Key Tab -Function MenuComplete# 全新的主题oh-my-posh init pwsh --config C:\Documents\PowerShell\powerlevel10k_rainbow.omp.json | Invoke-Expressiongit config --global https.proxy http://127.0.0.1:7890git config --global https.proxy https://127.0.0.1:7890# 设置代理$Env:http_proxy="http://127.0.0.1:7890";$Env:https_proxy="htt ...

项目架构123456789101112131415├─assets│ ├─fonts│ ├─icons│ └─images├─doc├─lib│ ├─common│ │ ├─apis│ │ ├─i18n│ │ ├─model│ │ ├─routes│ │ ├─style│ │ ├─utils│ │ └─widgets│ └─pages

前言 使用 Bloc 的时候，有一个让我至今为止十分在意的问题，无法真正的跨页面交互！在反复的查阅官方文档后，使用一个全局 Bloc 的方式，实现了“伪”跨页面交互，详细可查看：flutter_bloc 使用解析；fish_redux 的广播机制是可以比较完美的实现跨页面交互的，我也写了一篇几万字文章介绍如何使用该框架：fish_redux 使用详解，redux 层次划分是比较细的，写起来会很费劲；最近尝试了 GetX 相关功能，解决了我的相当一部分痛点 把整篇文章写完后，我马上把自己的一个 demo 里面所有 Bloc 代码全用 GetX 替换，且去掉了 Fluro 框架；感觉用 Getx 虽然会省掉大量的模板代码，但还是有些重复工作：创建文件夹，创建几个必备文件，写那些必须要写的初始化代码和类；略微繁琐，为了对得起 GetX 给我开发带来的巨大便利，我就花了一些时间，给它写了一个插件！ 上面这重复的代码，文件，文件夹统统能一键生成！ GetX 相关优势 依赖注入 GetX 是通过依赖注入的方式，存储相应的 XxxGetxController；已经脱离了 InheritedW ...

12345678910111213141516171819202122232425262728293031323334module.exports = { extends: ['@commitlint/config-conventional'], rules: { 'type-enum': [ // type枚举 2, 'always', [ 'build', // 编译相关的修改，例如发布版本、对项目构建或者依赖的改动 'feat', // 新功能 'fix', // 修补bug 'docs', // 文档修改 'style', // 代码格式修改, 注意不是 css 修改 'refactor', // 重构 'perf' ...

123456789101112131415161718192021222324252627282930module.exports = { env: { browser: true, es2021: true, node: true }, extends: ['eslint:recommended', 'plugin:prettier/recommended'], parser: 'vue-eslint-parser', parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, plugins: ['vue'], rules: { indent: ['error', 2, { SwitchCase: 1 }], // 强制统一缩进 eqeqeq ...