mirror of
http://180.163.74.83:13000/zhangzhenghao/MPVN_Android.git
synced 2025-12-12 15:24:30 +00:00
fix light icon
This commit is contained in:
zzh
parent
7c8125f182
commit
6393df34ea
@ -157,16 +157,18 @@ fun OverviewRoomContent() {
|
||||
AirConditionerCard(modifier = Modifier.weight(1f), roomName = "全屋")
|
||||
UsageStatusChart(modifier = Modifier.weight(1f), roomName = "全屋")
|
||||
}
|
||||
LightRow(modifier = Modifier.fillMaxWidth().padding(bottom = 16.dp), roomName = "全屋")
|
||||
LightRow(modifier = Modifier.fillMaxWidth().padding(top = 16.dp, bottom = 16.dp), roomName = "全屋")
|
||||
ModeButtonsRow(onModeSelected = { })
|
||||
|
||||
Spacer(modifier = Modifier.height(24.dp))
|
||||
|
||||
// 显示所有房间的设备摘要
|
||||
Text(
|
||||
text = "所有设备",
|
||||
fontSize = 18.sp,
|
||||
fontWeight = FontWeight.Bold,
|
||||
color = Color.White,
|
||||
modifier = Modifier.padding(vertical = 12.dp)
|
||||
modifier = Modifier.padding(bottom = 12.dp)
|
||||
)
|
||||
AllDevicesOverview(modifier = Modifier.fillMaxSize())
|
||||
}
|
||||
@ -179,14 +181,16 @@ fun SpecificRoomContent(selectedRoom: Int, roomName: String) {
|
||||
AirConditionerCard(modifier = Modifier.weight(1f), roomName = roomName)
|
||||
UsageStatusChart(modifier = Modifier.weight(1f), roomName = roomName)
|
||||
}
|
||||
LightRow(modifier = Modifier.fillMaxWidth().padding(bottom = 16.dp), roomName = roomName)
|
||||
LightRow(modifier = Modifier.fillMaxWidth().padding(top = 16.dp, bottom = 16.dp), roomName = roomName)
|
||||
|
||||
Spacer(modifier = Modifier.height(24.dp))
|
||||
|
||||
Text(
|
||||
text = "$roomName 设备",
|
||||
fontSize = 18.sp,
|
||||
fontWeight = FontWeight.Bold,
|
||||
color = Color.White,
|
||||
modifier = Modifier.padding(vertical = 12.dp)
|
||||
modifier = Modifier.padding(bottom = 12.dp)
|
||||
)
|
||||
MyDevicesGrid(selectedRoom = selectedRoom, modifier = Modifier.fillMaxSize())
|
||||
}
|
||||
@ -673,31 +677,160 @@ fun AirConditionerCard(modifier: Modifier = Modifier, roomName: String = "房间
|
||||
var isOn by remember { mutableStateOf(true) }
|
||||
|
||||
Box(modifier = modifier.height(220.dp).clip(RoundedCornerShape(24.dp)).background(Color(0x26121212)).padding(16.dp)) {
|
||||
Column(verticalArrangement = Arrangement.spacedBy(12.dp)) {
|
||||
Column(verticalArrangement = Arrangement.spacedBy(16.dp)) {
|
||||
Row(horizontalArrangement = Arrangement.SpaceBetween, verticalAlignment = Alignment.CenterVertically, modifier = Modifier.fillMaxWidth()) {
|
||||
Column {
|
||||
Text(text = "空调", fontWeight = FontWeight.SemiBold, color = Color.White)
|
||||
Text(text = "空调", fontWeight = FontWeight.SemiBold, color = Color.White, fontSize = 18.sp)
|
||||
Text(text = roomName, fontSize = 12.sp, color = Color(0xFF9AA0A6))
|
||||
}
|
||||
Switch(checked = isOn, onCheckedChange = { isOn = it })
|
||||
}
|
||||
Text(text = "${temp.toInt()}°C", style = MaterialTheme.typography.headlineMedium, color = Color.White)
|
||||
Slider(
|
||||
|
||||
Row(
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
horizontalArrangement = Arrangement.SpaceBetween,
|
||||
verticalAlignment = Alignment.CenterVertically
|
||||
) {
|
||||
Text(
|
||||
text = "${temp.toInt()}°C",
|
||||
style = MaterialTheme.typography.headlineLarge,
|
||||
color = Color.White,
|
||||
fontWeight = FontWeight.Bold
|
||||
)
|
||||
|
||||
Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
|
||||
// 降温按钮
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.size(40.dp)
|
||||
.clip(RoundedCornerShape(12.dp))
|
||||
.background(Color(0x33FFFFFF))
|
||||
.clickable(enabled = isOn && temp > 16f) {
|
||||
if (temp > 16f) temp -= 1f
|
||||
},
|
||||
contentAlignment = Alignment.Center
|
||||
) {
|
||||
Text(text = "−", color = Color.White, fontSize = 24.sp, fontWeight = FontWeight.Bold)
|
||||
}
|
||||
|
||||
// 升温按钮
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.size(40.dp)
|
||||
.clip(RoundedCornerShape(12.dp))
|
||||
.background(Color(0x33FFFFFF))
|
||||
.clickable(enabled = isOn && temp < 32f) {
|
||||
if (temp < 32f) temp += 1f
|
||||
},
|
||||
contentAlignment = Alignment.Center
|
||||
) {
|
||||
Text(text = "+", color = Color.White, fontSize = 24.sp, fontWeight = FontWeight.Bold)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 自定义滑动条
|
||||
CustomSlider(
|
||||
value = temp,
|
||||
onValueChange = { temp = it },
|
||||
valueRange = 16f..32f,
|
||||
enabled = isOn
|
||||
)
|
||||
Row(horizontalArrangement = Arrangement.spacedBy(12.dp)) {
|
||||
Box(modifier = Modifier.size(36.dp).clip(RoundedCornerShape(10.dp)).background(Color(0x22121212)))
|
||||
Box(modifier = Modifier.size(36.dp).clip(RoundedCornerShape(10.dp)).background(Color(0x22121212)))
|
||||
Box(modifier = Modifier.size(36.dp).clip(RoundedCornerShape(10.dp)).background(Color(0x22121212)))
|
||||
Box(modifier = Modifier.size(36.dp).clip(RoundedCornerShape(10.dp)).background(Color(0x22121212)))
|
||||
|
||||
// 温度标记
|
||||
Row(
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
horizontalArrangement = Arrangement.SpaceBetween
|
||||
) {
|
||||
Text(text = "16°C", fontSize = 12.sp, color = Color(0xFF9AA0A6))
|
||||
Text(text = "24°C", fontSize = 12.sp, color = Color(0xFF9AA0A6))
|
||||
Text(text = "32°C", fontSize = 12.sp, color = Color(0xFF9AA0A6))
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@OptIn(androidx.compose.material3.ExperimentalMaterial3Api::class)
|
||||
@Composable
|
||||
fun CustomSlider(
|
||||
value: Float,
|
||||
onValueChange: (Float) -> Unit,
|
||||
valueRange: ClosedFloatingPointRange<Float>,
|
||||
enabled: Boolean = true
|
||||
) {
|
||||
val interactionSource = remember { MutableInteractionSource() }
|
||||
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.height(32.dp),
|
||||
contentAlignment = Alignment.Center
|
||||
) {
|
||||
Slider(
|
||||
value = value,
|
||||
onValueChange = onValueChange,
|
||||
valueRange = valueRange,
|
||||
enabled = enabled,
|
||||
interactionSource = interactionSource,
|
||||
colors = androidx.compose.material3.SliderDefaults.colors(
|
||||
thumbColor = Color.White,
|
||||
activeTrackColor = Brush.linearGradient(
|
||||
listOf(Color(0xFF00D1FF), Color(0xFFA9F0FF))
|
||||
).let { Color(0xFF00D1FF) },
|
||||
inactiveTrackColor = Color(0x33FFFFFF),
|
||||
disabledThumbColor = Color(0x66FFFFFF),
|
||||
disabledActiveTrackColor = Color(0x33FFFFFF),
|
||||
disabledInactiveTrackColor = Color(0x22FFFFFF)
|
||||
),
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.height(24.dp),
|
||||
thumb = {
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.size(20.dp)
|
||||
.shadow(4.dp, RoundedCornerShape(10.dp))
|
||||
.clip(RoundedCornerShape(10.dp))
|
||||
.background(Color.White)
|
||||
)
|
||||
},
|
||||
track = { sliderState ->
|
||||
val fraction = (sliderState.value - valueRange.start) / (valueRange.endInclusive - valueRange.start)
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.height(6.dp)
|
||||
.clip(RoundedCornerShape(3.dp))
|
||||
) {
|
||||
// 未激活轨道
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.fillMaxSize()
|
||||
.background(if (enabled) Color(0x33FFFFFF) else Color(0x22FFFFFF))
|
||||
)
|
||||
// 激活轨道
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth(fraction)
|
||||
.fillMaxHeight()
|
||||
.background(
|
||||
if (enabled) {
|
||||
Brush.linearGradient(
|
||||
listOf(Color(0xFF00D1FF), Color(0xFFA9F0FF))
|
||||
)
|
||||
} else {
|
||||
Brush.linearGradient(
|
||||
listOf(Color(0x33FFFFFF), Color(0x33FFFFFF))
|
||||
)
|
||||
}
|
||||
)
|
||||
)
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun LightList(modifier: Modifier = Modifier) {
|
||||
val lights = listOf(
|
||||
@ -722,12 +855,39 @@ fun LightList(modifier: Modifier = Modifier) {
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun DotsProgress(percent: Float) {
|
||||
fun DotsProgress(percent: Float, onPercentChange: (Float) -> Unit = {}, enabled: Boolean = true) {
|
||||
val total = 12
|
||||
Row(horizontalArrangement = Arrangement.spacedBy(4.dp), verticalAlignment = Alignment.CenterVertically) {
|
||||
Row(
|
||||
horizontalArrangement = Arrangement.spacedBy(4.dp),
|
||||
verticalAlignment = Alignment.CenterVertically,
|
||||
modifier = Modifier.pointerInput(enabled) {
|
||||
if (enabled) {
|
||||
detectTapGestures { offset ->
|
||||
// 计算点击的是第几个点
|
||||
val dotWidth = 6.dp.toPx()
|
||||
val spacing = 4.dp.toPx()
|
||||
val totalWidth = (dotWidth + spacing) * total - spacing
|
||||
val clickedIndex = ((offset.x / totalWidth) * total).toInt().coerceIn(0, total - 1)
|
||||
// 更新百分比
|
||||
val newPercent = (clickedIndex + 1).toFloat() / total
|
||||
onPercentChange(newPercent)
|
||||
}
|
||||
}
|
||||
}
|
||||
) {
|
||||
repeat(total) { i ->
|
||||
val filled = i < (percent * total).toInt()
|
||||
Box(modifier = Modifier.size(6.dp).clip(RoundedCornerShape(3.dp)).background(if (filled) Color(0xFFA9F0FF) else Color(0xFF3A3A3A)))
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.size(8.dp)
|
||||
.clip(RoundedCornerShape(4.dp))
|
||||
.background(if (filled) Color(0xFFA9F0FF) else Color(0xFF3A3A3A))
|
||||
.clickable(enabled = enabled) {
|
||||
// 点击某个点直接设置到该亮度
|
||||
val newPercent = (i + 1).toFloat() / total
|
||||
onPercentChange(newPercent)
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -903,13 +1063,70 @@ fun LightRow(modifier: Modifier = Modifier, roomName: String = "房间") {
|
||||
|
||||
@Composable
|
||||
fun LightCard(name: String, percent: Float, modifier: Modifier = Modifier) {
|
||||
var brightness by remember { mutableStateOf(percent) }
|
||||
|
||||
Box(modifier = modifier.height(100.dp).clip(RoundedCornerShape(16.dp)).background(Color(0x26121212)).padding(12.dp)) {
|
||||
Row(horizontalArrangement = Arrangement.SpaceBetween, verticalAlignment = Alignment.CenterVertically, modifier = Modifier.fillMaxWidth()) {
|
||||
Row(horizontalArrangement = Arrangement.spacedBy(12.dp), verticalAlignment = Alignment.CenterVertically) {
|
||||
Box(modifier = Modifier.size(36.dp).clip(RoundedCornerShape(10.dp)).background(Color(0x22121212)))
|
||||
Column { Text(text = name); Text(text = "${(percent * 100).toInt()}%", color = Color(0xFF9AA0A6)) }
|
||||
// 灯光图标 - 带发光效果
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.size(40.dp)
|
||||
.shadow(
|
||||
elevation = if (brightness > 0.3f) (brightness * 12).dp else 0.dp,
|
||||
shape = RoundedCornerShape(12.dp),
|
||||
spotColor = Color(0xFFFFD54F).copy(alpha = brightness * 0.6f)
|
||||
)
|
||||
.clip(RoundedCornerShape(12.dp))
|
||||
.background(
|
||||
if (brightness > 0.1f) {
|
||||
Brush.radialGradient(
|
||||
colors = listOf(
|
||||
Color(0xFFFFE082).copy(alpha = brightness),
|
||||
Color(0xFFFFD54F).copy(alpha = brightness * 0.9f),
|
||||
Color(0xFFFF8F00).copy(alpha = brightness * 0.7f)
|
||||
),
|
||||
radius = 60f
|
||||
)
|
||||
} else {
|
||||
Brush.linearGradient(
|
||||
listOf(
|
||||
Color(0xFF3A3A3A),
|
||||
Color(0xFF2A2A2A)
|
||||
)
|
||||
)
|
||||
}
|
||||
),
|
||||
contentAlignment = Alignment.Center
|
||||
) {
|
||||
Image(
|
||||
painter = painterResource(id = R.drawable.ic_light),
|
||||
contentDescription = "灯光",
|
||||
modifier = Modifier.size(24.dp),
|
||||
colorFilter = androidx.compose.ui.graphics.ColorFilter.tint(
|
||||
if (brightness > 0.1f) {
|
||||
Color.White.copy(alpha = 0.95f)
|
||||
} else {
|
||||
Color(0xFF666666)
|
||||
}
|
||||
)
|
||||
)
|
||||
}
|
||||
Column {
|
||||
Text(text = name, color = Color.White, fontWeight = FontWeight.Medium)
|
||||
Text(
|
||||
text = "${(brightness * 100).toInt()}%",
|
||||
color = if (brightness > 0.1f) Color(0xFFFFD54F) else Color(0xFF9AA0A6),
|
||||
fontSize = 13.sp,
|
||||
fontWeight = if (brightness > 0.5f) FontWeight.Medium else FontWeight.Normal
|
||||
)
|
||||
}
|
||||
}
|
||||
DotsProgress(percent)
|
||||
DotsProgress(
|
||||
percent = brightness,
|
||||
onPercentChange = { brightness = it },
|
||||
enabled = true
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,22 @@
|
||||
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="24dp" android:height="24dp" android:viewportWidth="24" android:viewportHeight="24">
|
||||
<path android:strokeColor="#FFFFFFFF" android:strokeWidth="2" android:fillColor="#00000000" android:pathData="M12,3 L15,10 L9,10 Z"/>
|
||||
<path android:strokeColor="#FFFFFFFF" android:strokeWidth="2" android:fillColor="#00000000" android:pathData="M10,14 L14,14 L14,21 L10,21 Z"/>
|
||||
<vector xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:width="24dp"
|
||||
android:height="24dp"
|
||||
android:viewportWidth="24"
|
||||
android:viewportHeight="24">
|
||||
|
||||
<!-- 灯泡主体 -->
|
||||
<path
|
||||
android:fillColor="#FFFFFFFF"
|
||||
android:pathData="M12,2 C8.69,2 6,4.69 6,8 C6,10.5 7.5,12.67 9.5,13.67 L9.5,17 C9.5,17.83 10.17,18.5 11,18.5 L13,18.5 C13.83,18.5 14.5,17.83 14.5,17 L14.5,13.67 C16.5,12.67 18,10.5 18,8 C18,4.69 15.31,2 12,2 Z"/>
|
||||
|
||||
<!-- 灯泡底座 -->
|
||||
<path
|
||||
android:fillColor="#FFFFFFFF"
|
||||
android:pathData="M10,19.5 L14,19.5 L14,20.5 C14,21.33 13.33,22 12.5,22 L11.5,22 C10.67,22 10,21.33 10,20.5 Z"/>
|
||||
|
||||
<!-- 灯泡高光效果 -->
|
||||
<path
|
||||
android:fillColor="#FFFFFF"
|
||||
android:fillAlpha="0.4"
|
||||
android:pathData="M9,6 C9,4.34 10.34,3 12,3 C12.55,3 13.05,3.15 13.5,3.4 C12.95,3.15 12.35,3 11.7,3 C10.21,3 9,4.21 9,5.7 C9,6.8 9.5,7.77 10.3,8.4 C9.5,7.6 9,6.37 9,6 Z"/>
|
||||
</vector>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user