使用compose和material3实现主题皮肤切换操作

299 阅读2分钟

1.先上效果图

ezgif.com-video-to-gif.gif

2.具体代码就不说了,说说使用了什么操作

1.主页构成

Scaffold脚手架下方BottomBar下方改的BottonNavagation 使其支持自定义的指示器(就是中间那个框框)也有动画的喔~和自定义Item,

因为我觉得使用compose做demo比用xml做demo真的快很多。。。
提供了脚手架之后,将基本框架搭好后,就单纯的开发页面就可以了。

2.compose的基本摆盘

Column

Row

LazyColumn ... 不赘述了

3.使用主题换色的基操

简单来说就是: 自定义了Material的主题色,定义主色之后通过更改主题去切换不同的颜色

但是当我想去随意切换颜色之后就没那么容易了... material3的色盘内部set是internal的.所以只能去通过扩展该 material3的色盘..

CompositionLocalProvider(LocalExtendedColors provides ExtendedTheme.extendedColorsX) {
    MaterialTheme(
        colorScheme = colorScheme,
        /* colors = ..., typography = ..., shapes = ... */
        content = content
    )
}

当我增加了该色盘后,就可以随意更改该色值.通过animateColorAsState就可以实现该效果啦!!! gif图可能没办法看出来这个动画有多么顺滑.我只能说比德芙还顺滑.

4.圆形色盘的建立

不知道各位注意到右上方的渐变圆环嘛? 现在也暂时只能呈现三条色条.中间计算的结果真的弄得我头大。重新学习了一下高中关于圆的知识...最后总算可以点击定位到正确的位置拉!!! 这部分就是compose的自定义图像的绘画。

5.总结

compose真好用~焯喜欢的。MVI结构也学了一下,感觉焯配的. 再也没有那么怕写动画了..compose倒是感觉降低了一些学习的门槛...不过可能文档稍微欠缺了一些(或者我懒得看).有一些属性并没有那么容易想起来,需要用到的时候才去看一下 可以幻想一下,这个颜色置换放在backgroupColor中.非常有国风的感觉,我很喜欢.