feat: 状态栏优化 — 背景吸附+连接按钮合并+隐藏系统状态栏
- StatusBar 重构为 Box + Row 双层结构,背景延伸到屏幕顶端 - 连接按钮合并到顶部 ConnectionIndicator,删除底部独立连接按钮 - ConnectionIndicator 改为按钮形态(Surface + 圆角边框) - 隐藏系统状态栏(WindowInsetsControllerCompat),压缩 StatusBar 高度 Generated by Mistral Vibe. Co-Authored-By: Mistral Vibe <vibe@mistral.ai>
This commit is contained in:
@@ -6,6 +6,8 @@ import androidx.activity.compose.setContent
|
||||
import androidx.activity.enableEdgeToEdge
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.platform.LocalContext
|
||||
import androidx.core.view.WindowInsetsCompat
|
||||
import androidx.core.view.WindowInsetsControllerCompat
|
||||
import androidx.navigation.compose.NavHost
|
||||
import androidx.navigation.compose.composable
|
||||
import androidx.navigation.compose.rememberNavController
|
||||
@@ -18,6 +20,11 @@ class MainActivity : ComponentActivity() {
|
||||
override fun onCreate(savedInstanceState: Bundle?) {
|
||||
super.onCreate(savedInstanceState)
|
||||
enableEdgeToEdge()
|
||||
// 隐藏系统状态栏,顶部区域完全由自定义 StatusBar 接管
|
||||
WindowInsetsControllerCompat(window, window.decorView).apply {
|
||||
hide(WindowInsetsCompat.Type.statusBars())
|
||||
systemBarsBehavior = WindowInsetsControllerCompat.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE
|
||||
}
|
||||
setContent {
|
||||
M20_gamepadTheme {
|
||||
AppNavGraph()
|
||||
|
||||
@@ -2,6 +2,7 @@ package com.example.m20_gamepad.ui
|
||||
|
||||
import androidx.compose.foundation.Image
|
||||
import androidx.compose.foundation.background
|
||||
import androidx.compose.foundation.BorderStroke
|
||||
import androidx.compose.foundation.layout.Arrangement
|
||||
import androidx.compose.foundation.layout.Box
|
||||
import androidx.compose.foundation.layout.Column
|
||||
@@ -14,7 +15,6 @@ import androidx.compose.foundation.layout.height
|
||||
import androidx.compose.foundation.layout.navigationBars
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.layout.size
|
||||
import androidx.compose.foundation.layout.statusBars
|
||||
import androidx.compose.foundation.layout.width
|
||||
import androidx.compose.foundation.layout.windowInsetsPadding
|
||||
import androidx.compose.foundation.rememberScrollState
|
||||
@@ -134,9 +134,14 @@ fun MainScreen(
|
||||
wifiSignalLevel = wifiSignalLevel,
|
||||
onStatusClick = { statusPanelVisible = true },
|
||||
onSettingsClick = onSettingsClick,
|
||||
modifier = Modifier
|
||||
.align(Alignment.TopCenter)
|
||||
.windowInsetsPadding(WindowInsets.statusBars)
|
||||
onConnectToggle = {
|
||||
if (connectionState == ProtocolClient.State.CONNECTED) {
|
||||
viewModel.disconnect()
|
||||
} else {
|
||||
viewModel.connect()
|
||||
}
|
||||
},
|
||||
modifier = Modifier.align(Alignment.TopCenter)
|
||||
)
|
||||
|
||||
// ---- 底部控制区 ----
|
||||
@@ -180,19 +185,24 @@ private fun StatusBar(
|
||||
wifiSignalLevel: Int,
|
||||
onStatusClick: () -> Unit,
|
||||
onSettingsClick: () -> Unit,
|
||||
onConnectToggle: () -> Unit,
|
||||
modifier: Modifier = Modifier
|
||||
) {
|
||||
Row(
|
||||
Box(
|
||||
modifier = modifier
|
||||
.fillMaxWidth()
|
||||
.background(OverlayBg)
|
||||
.padding(horizontal = 12.dp, vertical = 8.dp),
|
||||
verticalAlignment = Alignment.CenterVertically,
|
||||
horizontalArrangement = Arrangement.SpaceBetween
|
||||
) {
|
||||
Row(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.padding(horizontal = 12.dp, vertical = 4.dp),
|
||||
verticalAlignment = Alignment.CenterVertically,
|
||||
horizontalArrangement = Arrangement.SpaceBetween
|
||||
) {
|
||||
// 连接状态 + WiFi 信号 + Ping 延迟
|
||||
Row(verticalAlignment = Alignment.CenterVertically) {
|
||||
ConnectionIndicator(connectionState)
|
||||
ConnectionIndicator(connectionState, onConnectToggle)
|
||||
Spacer(Modifier.width(12.dp))
|
||||
WifiSignalIcon(level = wifiSignalLevel)
|
||||
Spacer(Modifier.width(12.dp))
|
||||
@@ -231,10 +241,11 @@ private fun StatusBar(
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun ConnectionIndicator(state: ProtocolClient.State) {
|
||||
private fun ConnectionIndicator(state: ProtocolClient.State, onClick: () -> Unit) {
|
||||
val (color, text) = when (state) {
|
||||
ProtocolClient.State.CONNECTED -> Color(0xFF4CAF50) to "已连接"
|
||||
ProtocolClient.State.CONNECTING -> Color(0xFFFFC107) to "连接中"
|
||||
@@ -242,14 +253,24 @@ private fun ConnectionIndicator(state: ProtocolClient.State) {
|
||||
ProtocolClient.State.ERROR -> Color(0xFFF44336) to "错误"
|
||||
ProtocolClient.State.DISCONNECTED -> Color(0xFF9E9E9E) to "未连接"
|
||||
}
|
||||
Row(verticalAlignment = Alignment.CenterVertically) {
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.size(10.dp)
|
||||
.background(color, CircleShape)
|
||||
)
|
||||
Spacer(Modifier.width(6.dp))
|
||||
Text(text, color = OverlayText, fontSize = 14.sp)
|
||||
Surface(
|
||||
onClick = onClick,
|
||||
shape = RoundedCornerShape(14.dp),
|
||||
border = BorderStroke(1.dp, Color(0x55FFFFFF)),
|
||||
color = Color(0x22000000)
|
||||
) {
|
||||
Row(
|
||||
modifier = Modifier.padding(horizontal = 10.dp, vertical = 2.dp),
|
||||
verticalAlignment = Alignment.CenterVertically
|
||||
) {
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.size(10.dp)
|
||||
.background(color, CircleShape)
|
||||
)
|
||||
Spacer(Modifier.width(6.dp))
|
||||
Text(text, color = OverlayText, fontSize = 14.sp)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -376,19 +397,6 @@ private fun ControlButtons(
|
||||
.verticalScroll(scrollState)
|
||||
.padding(top = 4.dp, bottom = 4.dp)
|
||||
) {
|
||||
// 连接/断开
|
||||
Button(
|
||||
onClick = {
|
||||
if (connected) viewModel.disconnect() else viewModel.connect()
|
||||
},
|
||||
colors = ButtonDefaults.buttonColors(
|
||||
containerColor = if (connected) Color(0xFFF44336) else Color(0xFF4CAF50)
|
||||
),
|
||||
modifier = Modifier.width(110.dp)
|
||||
) {
|
||||
Text(if (connected) "断开" else "连接")
|
||||
}
|
||||
|
||||
// 运动状态转换
|
||||
ControlButton(
|
||||
"起立",
|
||||
|
||||
Reference in New Issue
Block a user