【 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 = 11

OK，现在我们希望把列数改成：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)

算了，不教你使坏了，我们直接看下修改后的效果：

在这里插入图片描述