网站开发需求分析中性能需求,网站建设 设计,湖北响应式网站建设费用,深圳蚂蚁网络Copmose自定义颜色和主题切换
一起颜色的设置的都是在res/values/colors里面去做颜色#xff0c; 但是当使用compose的时候#xff0c;抛弃了使用了ui.theme底下的Color.kt和Theme.kt 但是默认使用的是MaterialTheme主题#xff0c;里面的颜色字段不能定义#xff0c;因此…Copmose自定义颜色和主题切换
一起颜色的设置的都是在res/values/colors里面去做颜色 但是当使用compose的时候抛弃了使用了ui.theme底下的Color.kt和Theme.kt 但是默认使用的是MaterialTheme主题里面的颜色字段不能定义因此需要自定义这个 我先查看MaterialTheme 里面的颜色主题是怎么定义的然后照葫芦画瓢。 android官网 对应自定义的解释可以根据官网来进行操作
Compose 中的自定义设计系统
CustomColorScheme.kt import androidx.compose.runtime.Stable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.compose.ui.graphics.ColorStable
class CustomColorScheme(pureWhite: Color,pureBlack: Color,homeButtonBg: Color,textColor: Color,......// 根据项目需要去添加字段
) {var pureWhite by mutableStateOf(pureWhite)private setvar pureBlack by mutableStateOf(pureBlack)private setvar homeButtonBg by mutableStateOf(homeButtonBg)private setvar textColor by mutableStateOf(textColor)private set......fun update(colors: CustomColorScheme) {this.pureWhite colors.pureWhitethis.pureBlack colors.pureBlackthis.homeButtonBg colors.homeButtonBgthis.textColor colors.textColor......}fun copy() CustomColorScheme(pureWhite,pureBlack,homeButtonBg,textColor,......)
}
然后再Theme.kt里面添加DarkCustomColorScheme 和 LightCustomColorScheme实现自定义的颜色
// DarkColorScheme LightColorScheme 这个两个是系统默认的使用的是MaterialTheme
private val DarkColorScheme darkColorScheme(primary Purple80,secondary PurpleGrey80,tertiary Pink80
)private val LightColorScheme lightColorScheme(primary Purple40,secondary PurpleGrey40,tertiary Pink40/* Other default colors to overridebackground Color(0xFFFFFBFE),surface Color(0xFFFFFBFE),onPrimary Color.White,onSecondary Color.White,onTertiary Color.White,onBackground Color(0xFF1C1B1F),onSurface Color(0xFF1C1B1F),*/
)/** Color Scheme object */
// 黑夜
private val DarkCustomColorScheme CustomColorScheme(// temp use lightpureBlack NeutralBlack0100,pureWhite PrimaryPureWhite,homeButtonBg NeutralGrey8015,textColor NeutralGrey2076,)白天
private val LightCustomColorScheme CustomColorScheme(pureBlack NeutralBlack0100,pureWhite PrimaryPureWhite,homeButtonBg NeutralGrey8015,textColor NeutralGrey2076,)之后继续添加下面的这些
Composable
fun ProvideAppColors(colors: CustomColorScheme, content: Composable () - Unit) {val colorPalette remember {colors.copy()}colorPalette.update(colors)CompositionLocalProvider(LocalCustomColors provides colorPalette, content content)
}// create static CompositionLocal
private val LocalCustomColors staticCompositionLocalOf {DarkCustomColorScheme
}// 可以自己自定义添加
enum class CustomStyleScheme {// theme listDARK, LIGHT
}private val CustomStyleScheme.theme: PairColorScheme, CustomColorSchemeget() when (this) {CustomStyleScheme.DARK - DarkColorScheme to DarkCustomColorSchemeCustomStyleScheme.LIGHT - LightColorScheme to LightCustomColorScheme}// 这个添加了Composable 说明是可组合函数界面可以拿他进行设置颜色
Composable
fun AppTheme(/* Can use var pallet by mutableStateOf(CustomStyleScheme.LIGHT) to choose app theme* now use isSystemInDarkTheme to judge dark or light*/darkTheme: Boolean isSystemInDarkTheme(),
// customTheme: CustomStyleScheme AppTheme.pallet, //content: Composable () - Unit
) {val customTheme when {darkTheme - CustomStyleScheme.DARKelse - CustomStyleScheme.LIGHT}val (colorScheme, customColors) customTheme.themeProvideAppColors(colors customColors) {MaterialTheme(colorScheme colorScheme,typography Typography,content content)}
}/** AppTheme manager */
object AppTheme {val customColors: CustomColorSchemeComposableget() LocalCustomColors.currentvar pallet by mutableStateOf(CustomStyleScheme.LIGHT)
}看看默认生成的是怎么写的跟上面的AppTheme差不多只是我多了一个选择
Composable
fun ExtTheme(darkTheme: Boolean isSystemInDarkTheme(),// Dynamic color is available on Android 12dynamicColor: Boolean true,content: Composable () - Unit
) {val colorScheme when {dynamicColor Build.VERSION.SDK_INT Build.VERSION_CODES.S - {val context LocalContext.currentif (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)}darkTheme - DarkColorSchemeelse - LightColorScheme}val view LocalView.currentif (!view.isInEditMode) {SideEffect {val window (view.context as Activity).windowwindow.statusBarColor colorScheme.primary.toArgb()WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars darkTheme}}MaterialTheme(colorScheme colorScheme,typography Typography,content content)
}
