3.3 导入图片、图标 Svg导入图片 png 图标 svg，实现步骤： 第 1 步：转换 3.0x 图片到 2.0x 1.0x复制 png 到 assets/images/3.0x 目录 assets目录点击右键 “Assets: Images x1 x2 Generate” 支持的图片格式 jpeg jpg png 成功后会多出 files.txt 2.0x 1.0x 的文件 第 2 步：保存图片索引打开 files.txt 1234567891011static const defaultPng = 'assets/images/default.png';static const orderConfirmedPng = 'assets/images/order-confirmed.png';static const pMastercardPng = 'assets/images/p-mastercard.png';static const pCashPng = 'assets/images/p-ca ...

3.4 图标组件封装图标组件封装，实现步骤： 第 1 步：安装依赖包 flutter_svg badges12flutter pub add flutter_svgflutter pub add badges 最近的几个项目都在用 svg 图标了，这种图标颜色更丰富些，你可以传统 iconData 加 svg 组合在项目中使用 第 2 步：IconWidget 封装定义如下 name 说明 参数 icon Icons 图标 iconData 图标数据 svg svg 文件路径 assetName svg 文件 image asset 图片路径 assetName 图片文件 url url 网址 来自网络图标 lib/common/widgets/icon.dart 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970 ...

3.6 按钮组件封装实现步骤： 第 1 步：组件定义设计稿参考 定义如下 name 说明 primary 主按钮 secondary 次按钮 text 文字按钮 icon 图标按钮 textFilled 文字/填充 textRoundFilled 文字/填充/圆形 iconTextUpDown 图标/文字/上下 iconTextOutlined 图标/文字/边框 iconTextUpDownOutlined 图标/文字/上下/边框 textIcon 文字/图标 第 2 步：ButtonWidget 封装lib/common/widgets/button.dart 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263 ...

3.5 图片组件封装实现步骤： 第 1 步：安装插件 extended_image1flutter pub add extended_image 第 2 步：ImageWidget 封装定义如下 name 说明 参数 url 图片来自于网络 url 图片网址 asset 图片来自于 asset assetName 文件路径 file 图片来自于本地文件 file path 绝对路径 图片可以来自 url asset lib/common/widgets/image.dart 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131 ...

3.7 输入组件封装实现步骤： 第 1 步：规划组件功能 依据设计稿，我们定义如下 类型 说明 text 文本 textBorder 文本/边框 textFilled 文本/填充/边框 iconTextFilled 图标/文本/填充/边框 suffixTextFilled 后缀图标/文本/填充/边框 search 搜索 第 2 步：编写文本输入组件lib/common/widgets/input.dart 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108 ...

3.8 生成接口文档实现步骤： 注意导出的文档注释用 /// 第 1 步：配置 dartdoc_options.yamldartdoc_options.yaml 12dartdoc: nodoc: ["lib/pages/**/*.dart"] 这里排除了 pages 目录，我们只要 common 生成定义文件就行 第 2 步：生成文档执行命令，安装 dartdoc 1dart pub global activate dartdoc 执行命令，生成文档到 doc/api 目录 1dart pub global run dartdoc 生成成功 最后：启动一个 http 服务查看执行命令，安装 dhttpd 1dart pub global activate dhttpd 执行命令，运行 dhttpd 1dhttpd --path doc/api 提交代码到 git

4.1 ScreenUtil 配置按比例适配屏幕1234567891011121314151617181920212223import 'package:flutter/material.dart';import 'package:flutter_screenutil/flutter_screenutil.dart';class ViewScreenPape extends StatelessWidget { const ViewScreenPape({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( body: Container( width: 100.w, height: 100.w, color: Colors.amber, child: Text( "我是文 ...

4.2 splash 启动界面Splash 作用 让 flutter 视图引擎有个缓存热身时间 在 splash 决定去哪个界面 实现步骤： 第 1 步：加入图片到 assets将图片放入 assets/images/3.0x 然后执行 Assets: Images x1 x2 Generate 生成需要的 x1 x2 图片 复制 files.txt 配置到 lib/common/values/images.dart 1234class AssetsImages { ... static const splashJpg = 'assets/images/splash.jpg';} 第 2 步：修改 splashlib/pages/system/splash/view.dart 123456789101112131415161718192021class SplashPage extends GetView<SplashController> { co ...

3.9 视图层打薄【重要】方案 使用 extension 扩展方式简化代码 抽取组件，提高复用率 基础组件、业务组件 样式全局管理 字体、颜色、间距、圆角 assets 资源索引 图片、文件、图标 svg 原来的代码 lib/pages/login.dart 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551 ...