feat: update demo

This commit is contained in:
2023-11-16 04:02:00 +08:00
parent a5adc167ce
commit 848b38711a
2 changed files with 52 additions and 56 deletions

View File

@@ -31,6 +31,6 @@ fun main() = application {
Window( Window(
onCloseRequest = ::exitApplication, onCloseRequest = ::exitApplication,
title = "FlexiUI Demo", title = "FlexiUI Demo",
state = rememberWindowState(width = 550.dp, height = 900.dp) state = rememberWindowState(width = 550.dp, height = 700.dp)
) { MainView() } ) { MainView() }
} }

View File

@@ -44,6 +44,8 @@ import com.highcapable.flexiui.blueColors
import com.highcapable.flexiui.component.AreaBox import com.highcapable.flexiui.component.AreaBox
import com.highcapable.flexiui.component.Button import com.highcapable.flexiui.component.Button
import com.highcapable.flexiui.component.CheckBox import com.highcapable.flexiui.component.CheckBox
import com.highcapable.flexiui.component.DropdownMenu
import com.highcapable.flexiui.component.DropdownMenuItem
import com.highcapable.flexiui.component.RadioButton import com.highcapable.flexiui.component.RadioButton
import com.highcapable.flexiui.component.Slider import com.highcapable.flexiui.component.Slider
import com.highcapable.flexiui.component.Surface import com.highcapable.flexiui.component.Surface
@@ -61,7 +63,7 @@ import kotlin.math.roundToInt
@Composable @Composable
fun App() { fun App() {
val themeColor = remember { mutableStateOf(greenColors()) } val themeColor = remember { mutableStateOf(ThemeColors.first().second) }
FlexiTheme(colors = themeColor.value) { FlexiTheme(colors = themeColor.value) {
Surface { Surface {
Column(horizontalAlignment = Alignment.CenterHorizontally) { Column(horizontalAlignment = Alignment.CenterHorizontally) {
@@ -139,59 +141,53 @@ private fun ContentView() {
private fun ThemeColorsView(themeColor: MutableState<Colors>) { private fun ThemeColorsView(themeColor: MutableState<Colors>) {
Text(text = "Here are some theme color tests.") Text(text = "Here are some theme color tests.")
Spacer(Modifier.padding(10.dp)) Spacer(Modifier.padding(10.dp))
Row { var showChooser by remember { mutableStateOf(false) }
Button(onClick = { themeColor.value = defaultColors() }) { var choosedColorName by remember { mutableStateOf(ThemeColors.first().first) }
Text(text = "Default") var choosedColor by remember { mutableStateOf(ThemeColors.first().second) }
} themeColor.value = choosedColor
Spacer(Modifier.padding(10.dp)) Button(onClick = { showChooser = !showChooser }) {
Button(onClick = { themeColor.value = defaultColors(darkMode = true) }) { Text(text = "Choose a color: $choosedColorName")
Text(text = "Default (Dark)") DropdownMenu(
} expanded = showChooser,
Spacer(Modifier.padding(10.dp)) onDismissRequest = { showChooser = false }
Button(onClick = { themeColor.value = defaultColors(darkMode = true, blackDarkMode = true) }) { ) {
Text(text = "Default (Black)") ThemeColors.forEach { (name, color) ->
DropdownMenuItem(
onClick = {
showChooser = false
choosedColorName = name
choosedColor = color
},
actived = choosedColorName == name
) { Text(text = name) }
}
} }
} }
Spacer(Modifier.padding(10.dp)) }
Row {
Button(onClick = { themeColor.value = redColors() }) { private val ThemeColors = listOf(
Text(text = "Red") "Default" to defaultColors(),
} "Default (Dark)" to defaultColors(darkMode = true),
Spacer(Modifier.padding(10.dp)) "Default (Black)" to defaultColors(darkMode = true, blackDarkMode = true),
Button(onClick = { themeColor.value = pinkColors() }) { "Red" to redColors(),
Text(text = "Pink") "Red (Dark)" to redColors(darkMode = true),
} "Red (Black)" to redColors(darkMode = true, blackDarkMode = true),
Spacer(Modifier.padding(10.dp)) "Pink" to pinkColors(),
Button(onClick = { themeColor.value = purpleColors() }) { "Pink (Dark)" to pinkColors(darkMode = true),
Text(text = "Purple") "Pink (Black)" to pinkColors(darkMode = true, blackDarkMode = true),
} "Purple" to purpleColors(),
} "Purple (Dark)" to purpleColors(darkMode = true),
Spacer(Modifier.padding(10.dp)) "Purple (Black)" to purpleColors(darkMode = true, blackDarkMode = true),
Row { "Green" to greenColors(),
Button(onClick = { themeColor.value = greenColors() }) { "Green (Dark)" to greenColors(darkMode = true),
Text(text = "Green") "Green (Black)" to greenColors(darkMode = true, blackDarkMode = true),
} "Orange" to orangeColors(),
Spacer(Modifier.padding(10.dp)) "Orange (Dark)" to orangeColors(darkMode = true),
Button(onClick = { themeColor.value = orangeColors() }) { "Orange (Black)" to orangeColors(darkMode = true, blackDarkMode = true),
Text(text = "Orange") "Yellow" to yellowColors(),
} "Yellow (Dark)" to yellowColors(darkMode = true),
Spacer(Modifier.padding(10.dp)) "Yellow (Black)" to yellowColors(darkMode = true, blackDarkMode = true),
Button(onClick = { themeColor.value = yellowColors() }) { "Blue" to blueColors(),
Text(text = "Yellow") "Blue (Dark)" to blueColors(darkMode = true),
} "Blue (Black)" to blueColors(darkMode = true, blackDarkMode = true)
} )
Spacer(Modifier.padding(10.dp))
Row {
Button(onClick = { themeColor.value = blueColors() }) {
Text(text = "Blue")
}
Spacer(Modifier.padding(10.dp))
Button(onClick = { themeColor.value = greenColors(darkMode = true) }) {
Text(text = "Green (Dark)")
}
Spacer(Modifier.padding(10.dp))
Button(onClick = { themeColor.value = greenColors(darkMode = true, blackDarkMode = true) }) {
Text(text = "Green (Black)")
}
}
}