本文介绍了一次换肤需求经历。
背景
产品想要在一些大型活动时在社区里换肤，换换背景图、背景色这些，其实和之前适配多业务视觉风格有相似之处，当时也把通用资源整理归类，直接同名同类型替换即可。
在这个场景下虽然可以无需开发通过热更来替换资源，但之后每次活动上线都要开发配合发热更包，可能还要支持除图以外的其他配置项，在后期也会有隐形开发成本。所以最好前端提前预埋配置项，之后运营直接在管理端配置，可一劳永逸。
方案
和产品梳理发现配置项高达40+个，时间原因先做一部分，如此在前期就要考虑好如何设计方便后续快速开发上线。
首先需要新增一个皮肤配置管理器SkinConfigMgr用来拉取和保存配置内容，由于配置拉取是异步的，为了能及时刷新界面这里配置都是用ValueNotifier持有，例如有这样几个配置项：
class SkinConfigMgr {
static SkinConfigMgr? _instance;
SkinConfigMgr._();
static SkinConfigMgr get instance => _instance ??= SkinConfigMgr._();
ValueNotifier<String> mainNavBgColor = ValueNotifier(""); // 首页顶部导航栏背景色
ValueNotifier<String> mainBgImg = ValueNotifier(""); // 首页背景图
ValueNotifier<String> mainBgColor = ValueNotifier(""); // 首页背景色
// 初始化
void initSkinConfigs(ClientThemeSetting settings) {
mainNavBgColor.value = settings.mainNavBgColor;
mainBgImg.value = settings.mainBgImg;
mainBgColor.value = settings.mainBgColor;
}
}
因为是全局配置，要在app启动时就拉取请求，然后调用初始化即可SkinConfigMgr.instance.initSkinConfigs(apiReply.themeSetting)，避免并发多次请求考虑和其他请求做合并。
然后需要适配图片组件，这里尽可能保持组件的通用性以及降低外部使用成本，兼容了各种默认图样式，外部只要多传入一个图片配置项和是否需要开启换肤开关即可。换肤图片组件SkinImageView 具体如下：
class SkinImageView extends StatelessWidget {
final ValueNotifier<String> imgNotifier; // from SkinConfigMgr
final String defImgUrl; // 原图片路径
final double size; // 图片尺寸，这里填 width，若 height 和 width 不一致还需要给下 height
final bool fromNetwork; // 是否网络图
final double? height;
final String? package;
final BoxFit? fit;
final IconData? icon;
final bool supportSkinConfig;
SkinImageView(
this.imgNotifier,
this.defImgUrl,
this.size,
this.fromNetwork, {
this.height,
this.package,
this.fit,
this.icon,
this.supportSkinConfig = true,
});
Widget _getDefView() {
if (defImgUrl.isEmpty) {
return SizedBox.shrink();
}
// icon图标
if (icon != null) {
return Icon(icon, size: size);
}
// 网络图
if (fromNetwork) {
return ImageView(
url: defImgUrl,
width: size,
height: height ?? size,
fit: fit,
);
}
// 本地svg
if (defImgUrl.toLowerCase().endsWith("svg")) {
return SvgPicture.asset(
defImgUrl,
width: size,
height: height ?? size,
package: package,
fit: fit ?? BoxFit.contain,
);
}
// 本地其他图
return Image.asset(
defImgUrl,
width: size,
height: height ?? size,
package: package,
fit: fit,
);
}
@override
Widget build(BuildContext context) {
Widget defView = _getDefView();
if (!supportSkinConfig) {
return defView;
}
return ValueListenableBuilder<String>(
valueListenable: imgNotifier,
builder: (BuildContext context, String value, Widget? widget) {
return value.isNotEmpty
? ImageView(
url: value,
width: size,
height: height ?? size,
fit: fit,
)
: defView;
},
);
}
}
接着继续适配颜色组件，由于原来大部分是通过Container组件实现颜色的，这里还是参考这种方式，相当于在Container基础上又包装了一层，外部只要多传入配置项和换肤开关即可。换肤颜色组件SkinColorContainer 具体如下：
class SkinColorContainer extends StatelessWidget {
final ValueNotifier<String> colorNotifier; // from SkinConfigMgr
final Color? color; // 原颜色要放在 color 属性而不是 decoration
final AlignmentGeometry? alignment;
final EdgeInsetsGeometry? padding;
final Decoration? decoration;
final Decoration? foregroundDecoration;
final double? width;
final double? height;
final BoxConstraints? constraints;
final EdgeInsetsGeometry? margin;
final Matrix4? transform;
final AlignmentGeometry? transformAlignment;
final Widget? child;
final Clip clipBehavior;
final bool supportSkinConfig;
SkinColorContainer(
this.colorNotifier,
this.color, {
this.alignment,
this.padding,
this.decoration,
this.foregroundDecoration,
this.width,
this.height,
this.constraints,
this.margin,
this.transform,
this.transformAlignment,
this.child,
this.clipBehavior = Clip.none,
this.supportSkinConfig = true,
});
static Color? getColor(String colorStr, Color? defColor,
{bool supportSkinConfig = true}) {
if (!supportSkinConfig ||colorStr.isEmpty) {
return defColor;
}
try {
colorStr = colorStr.toLowerCase().replaceAll("#", "");
if (colorStr.length == 6) {
colorStr = "ff" + colorStr;
}
return Color(int.parse(colorStr, radix: 16));
} catch (e) {
return defColor;
}
}
@override
Widget build(BuildContext context) {
return ValueListenableBuilder<String>(
valueListenable: colorNotifier,
builder: (BuildContext context, String value, Widget? widget) {
return Container(
alignment: alignment,
padding: padding,
color: decoration != null || foregroundDecoration != null
? null
: getColor(value, color, supportSkinConfig: supportSkinConfig),
// decoration 和 color 不能同时设置，优先用 decoration
decoration: decoration,
foregroundDecoration: foregroundDecoration,
width: width,
height: height,
constraints: constraints,
margin: margin,
transform: transform,
transformAlignment: transformAlignment,
child: child,
clipBehavior: clipBehavior,
);
},
);
}
}
可以看到实际替换代码就非常简单了：
总结
对于不同的换肤需求提供不同的方案，在后面扩展时也能提供更多的选择。
