【 OpenHarmony 系统应用源码魔改 】-- Launcher 之「桌面布局定制」
前言
阅读本篇文章之前，有几个需要说明一下：
- 调试设备：平板，如果你是开发者手机，一样可以加 Log 调试，源码仍然是手机和平板一起分析；
- 文章中的 Log 信息所显示的数值可能跟你的设备不一样，以你调试的数据为准。
- 装个逼：目前好像 OH 社区或者其它开发者还没有针对 OH 的系统应用，比如 Launcher 写过非常深入的源码解析类文章，所以此类文章，仅供大家参考学习，如转载或引用，请标明出处！
- 定制章节会直接定位到修改的地方，如果你不仅想知道怎么改，也想知道为什么这么改，正所谓：知其然知其所以然，探其深方得真谛！
可以看看 "【 OpenHarmony 系统应用源码解析 】-- Launcher 桌面布局 " 这篇文章。
定制需求
- 行数：3
- 列数：7
如果你看过 "【 OpenHarmony 系统应用源码解析 】-- Launcher 桌面布局 " 这篇文章的话，应该会清除，Launcher 布局的行、列数是算出来的。
算法：
- 列数 = ~~（屏幕宽度 + 图标间距）/ （图标大小 + 图标间距）
- 行数 = ~~（可用高度 + 平均列间距）/ （图标大小 + 平均列间距）
修改代码前，我们先看下默认 Launcher 效果图（平板）：
在 "【 OpenHarmony 系统应用源码解析 】-- Launcher 桌面布局 " 文章中，我们已经分析过源码，并且加了 Log 展示了很多数据，例如：
let column = ~~((realWidth + minGutter) / (itemSize + minGutter));
我们看下平板的数据：
pid-1360 I @@@ pepsimaxin : 桌面布局边距 ==> margin = 82
pid-1360 I @@@ pepsimaxin : 屏幕宽度 ==> this.mScreenWidth = 1280
com.ohos.launcher D @@@ pepsimaxin : realWidth = 1116, minGutter = 6, itemSize = 96
com.ohos.launcher D @@@ pepsimaxin : column = 11OK，现在我们希望把列数改成：7列，那么：
- realWidth：我们不会动
- itemSize：图标大小，我们暂时也不动
那么显而易见了，我们只需要修改 minGutter（网格间距）即可！
所以修改成多少呢？-- 这是个基础数学计算问题，不用我教你了。
我们就拿平板为例：
(1116 + 6) / (96 + 6)= 11我们只需要保证：
(1116 + minGutter) / (96 + minGutter) = 7.00 ~ 7.99 之间即可（因为是向下取整）我比较懒，直接让 GPT 给我算了下：
minGutter 的取值范围：[49.9 ~ 74]，我们取个整：[50 ~ 74]
现在我们定位到源码里面，看如何修改：
📄 common/src/main/ets/default/viewmodel/LayoutViewModel.tscalculateDesktop(): any {...let itemSize = this.mLauncherLayoutStyleConfig.mAppItemSize;// 网格间距let minGutter = this.mLauncherLayoutStyleConfig.mGridGutter;let column = ~~((realWidth + minGutter) / (itemSize + minGutter));let userWidth = (realWidth + minGutter - (itemSize + minGutter) * column);let gutter = (userWidth / (column - 1)) + minGutter;let row = ~~((realHeight + gutter) / (itemSize + gutter));...}
而 minGutter 从哪读取的，就不用我说了吧？
// Phone
mGridGutter = PhonePresetStyleConstants.DEFAULT_APP_LAYOUT_MIN_GUTTER;
static readonly DEFAULT_APP_LAYOUT_MIN_GUTTER = 5;// Pad
mGridGutter = PadPresetStyleConstants.DEFAULT_APP_LAYOUT_MIN_GUTTER;
static readonly DEFAULT_APP_LAYOUT_MIN_GUTTER = 6;
到这里就有两种改法：
- 要么去对应的 **PresetStyleConstants 里面改 DEFAULT_APP_LAYOUT_MIN_GUTTER 值；
- 要么暴力点，直接改：
let minGutter = [50 ~ 74] 随便取一个值
另外，在 "【 OpenHarmony 系统应用源码解析 】-- Launcher 桌面布局 " 文章中我们也讲过，计算出来的 Column 和 Row，都是要传入 this.updateGrid(row, column) 方法，更新网格布局配置的。
所以？你猜我要干什么？更暴力的改法就是：
我不管你怎么算，直接 this.updateGrid(3, 7)
算了，不教你使坏了，我们直接看下修改后的效果：
