feat: basic ui
This commit is contained in:
parent
c8e9f7d53c
commit
1f60b1f2ce
|
@ -1,9 +1,9 @@
|
|||
package icu.fur93.esp32_car.page
|
||||
|
||||
import androidx.compose.foundation.layout.Column
|
||||
import androidx.compose.foundation.layout.Spacer
|
||||
import androidx.compose.foundation.layout.height
|
||||
import androidx.compose.material.icons.Icons
|
||||
import androidx.compose.material.icons.filled.Home
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.graphics.vector.ImageVector
|
||||
|
@ -12,22 +12,21 @@ import androidx.compose.ui.unit.dp
|
|||
import androidx.navigation.NavHostController
|
||||
import icu.fur93.esp32_car.R
|
||||
import icu.fur93.esp32_car.Route
|
||||
import icu.fur93.esp32_car.ui.carditem.StatusCardInfo
|
||||
import icu.fur93.esp32_car.ui.carditem.StatusCardJoystickStatus
|
||||
import icu.fur93.esp32_car.ui.carditem.StatusCardMotorStatus
|
||||
import icu.fur93.esp32_car.ui.component.BottomNavigationBar
|
||||
import icu.fur93.esp32_car.ui.component.CardButtonGroup
|
||||
import icu.fur93.esp32_car.ui.component.CardButtonItem
|
||||
import icu.fur93.esp32_car.ui.component.PageTitle
|
||||
import icu.fur93.esp32_car.ui.component.StatusCard
|
||||
import icu.fur93.esp32_car.ui.layout.MainLayout
|
||||
import icu.fur93.esp32_car.ui.theme.LayoutContentModifier
|
||||
|
||||
@Composable
|
||||
fun ControlPage(navController: NavHostController) {
|
||||
MainLayout(
|
||||
content = {
|
||||
PageTitle("控制")
|
||||
ControlPageStatusCard()
|
||||
Column (LayoutContentModifier) {
|
||||
PageTitle("控制")
|
||||
ControlPageStatusCard()
|
||||
}
|
||||
},
|
||||
bottomBar = {
|
||||
BottomNavigationBar(
|
||||
|
@ -52,7 +51,7 @@ fun ControlPageAutoControl() {
|
|||
buttons = listOf(
|
||||
CardButtonItem(
|
||||
text = "循迹模式",
|
||||
icon = ImageVector.vectorResource(id = R.drawable.outline_route_24)
|
||||
icon = ImageVector.vectorResource(R.drawable.outline_route_24)
|
||||
)
|
||||
)
|
||||
)
|
||||
|
@ -65,15 +64,15 @@ fun ControlPageManualControl() {
|
|||
buttons = listOf(
|
||||
CardButtonItem(
|
||||
text = "单摇杆模式",
|
||||
icon = ImageVector.vectorResource(id = R.drawable.outline_joystick_24)
|
||||
icon = ImageVector.vectorResource(R.drawable.outline_joystick_24)
|
||||
),
|
||||
CardButtonItem(
|
||||
text = "单向按键模式",
|
||||
icon = ImageVector.vectorResource(id = R.drawable.outline_gamepad_24)
|
||||
icon = ImageVector.vectorResource(R.drawable.outline_gamepad_24)
|
||||
),
|
||||
CardButtonItem(
|
||||
text = "陀螺仪模式",
|
||||
icon = ImageVector.vectorResource(id = R.drawable.motion_sensor_active_24)
|
||||
icon = ImageVector.vectorResource(R.drawable.motion_sensor_active_24)
|
||||
)
|
||||
)
|
||||
)
|
||||
|
|
|
@ -1,6 +1,9 @@
|
|||
package icu.fur93.esp32_car.page
|
||||
|
||||
import androidx.compose.foundation.layout.Column
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.navigation.NavHostController
|
||||
import icu.fur93.esp32_car.Route
|
||||
import icu.fur93.esp32_car.ui.card.UnconnectedStatusCard
|
||||
|
@ -12,14 +15,17 @@ import icu.fur93.esp32_car.ui.component.BottomNavigationBar
|
|||
import icu.fur93.esp32_car.ui.component.PageTitle
|
||||
import icu.fur93.esp32_car.ui.component.StatusCard
|
||||
import icu.fur93.esp32_car.ui.layout.MainLayout
|
||||
import icu.fur93.esp32_car.ui.theme.LayoutContentModifier
|
||||
|
||||
@Composable
|
||||
fun HomePage(navController: NavHostController) {
|
||||
MainLayout(
|
||||
content = {
|
||||
PageTitle("标题还没想好")
|
||||
HomePageStatusCard()
|
||||
Column (LayoutContentModifier) {
|
||||
PageTitle("标题还没想好")
|
||||
HomePageStatusCard()
|
||||
// UnconnectedStatusCard()
|
||||
}
|
||||
},
|
||||
bottomBar = {
|
||||
BottomNavigationBar(
|
||||
|
|
|
@ -1,15 +1,41 @@
|
|||
package icu.fur93.esp32_car.page
|
||||
|
||||
import androidx.compose.foundation.layout.Column
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.lazy.LazyColumn
|
||||
import androidx.compose.material3.Icon
|
||||
import androidx.compose.material3.ListItem
|
||||
import androidx.compose.material3.Switch
|
||||
import androidx.compose.material3.Text
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.graphics.vector.ImageVector
|
||||
import androidx.compose.ui.res.vectorResource
|
||||
import androidx.navigation.NavHostController
|
||||
import icu.fur93.esp32_car.R
|
||||
import icu.fur93.esp32_car.Route
|
||||
import icu.fur93.esp32_car.ui.component.BottomNavigationBar
|
||||
import icu.fur93.esp32_car.ui.component.PageTitle
|
||||
import icu.fur93.esp32_car.ui.layout.MainLayout
|
||||
import icu.fur93.esp32_car.ui.theme.LayoutContentPadding
|
||||
import icu.fur93.esp32_car.ui.theme.LayoutTopPadding
|
||||
|
||||
@Composable
|
||||
fun SettingsPage(navController: NavHostController) {
|
||||
MainLayout(
|
||||
content = {
|
||||
Column {
|
||||
Column (
|
||||
Modifier.padding(
|
||||
top = LayoutTopPadding,
|
||||
start = LayoutContentPadding,
|
||||
end = LayoutContentPadding
|
||||
)
|
||||
) {
|
||||
PageTitle("设置")
|
||||
}
|
||||
SettingsList()
|
||||
}
|
||||
},
|
||||
bottomBar = {
|
||||
BottomNavigationBar(
|
||||
|
@ -19,3 +45,40 @@ fun SettingsPage(navController: NavHostController) {
|
|||
}
|
||||
)
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun SettingsList() {
|
||||
LazyColumn {
|
||||
item {
|
||||
ListItem(
|
||||
headlineContent = { Text("连接设备") },
|
||||
supportingContent = { Text("已连接") },
|
||||
trailingContent = {
|
||||
Icon(ImageVector.vectorResource(R.drawable.arrow_right_24), "连接设备")
|
||||
}
|
||||
)
|
||||
}
|
||||
item {
|
||||
ListItem(
|
||||
headlineContent = { Text("设备名称") },
|
||||
supportingContent = { Text("当前名称: Name") },
|
||||
trailingContent = {
|
||||
Icon(ImageVector.vectorResource(R.drawable.arrow_right_24), "设备名称")
|
||||
}
|
||||
)
|
||||
}
|
||||
item {
|
||||
ListItem(
|
||||
headlineContent = { Text("调试模式") },
|
||||
trailingContent = {
|
||||
Switch(
|
||||
checked = false,
|
||||
onCheckedChange = {
|
||||
|
||||
}
|
||||
)
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
|
@ -28,7 +28,7 @@ data class CardButtonItem(
|
|||
val modifier: Modifier? = Modifier
|
||||
)
|
||||
|
||||
val CardButtonGroupGap = 8.dp
|
||||
val CardButtonGroupGap = 10.dp
|
||||
|
||||
@Composable
|
||||
fun CardButtonGroup(
|
||||
|
@ -66,6 +66,7 @@ fun CardButton(
|
|||
text = item.text,
|
||||
style = CardButtonTypography.CardButtonItemTextStyle
|
||||
)
|
||||
Spacer(Modifier.height(10.dp))
|
||||
Box(
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
contentAlignment = Alignment.BottomEnd
|
||||
|
|
|
@ -1,12 +1,12 @@
|
|||
package icu.fur93.esp32_car.ui.layout
|
||||
|
||||
import androidx.compose.foundation.layout.Box
|
||||
import androidx.compose.foundation.layout.Column
|
||||
import androidx.compose.foundation.layout.fillMaxSize
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.material3.Scaffold
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.unit.dp
|
||||
|
||||
@Composable
|
||||
fun MainLayout(
|
||||
|
@ -19,7 +19,7 @@ fun MainLayout(
|
|||
Scaffold(
|
||||
bottomBar = bottomBar
|
||||
) { innerPadding ->
|
||||
Column (Modifier.padding(innerPadding).padding(22.dp)) {
|
||||
Box(Modifier.padding(innerPadding)) {
|
||||
content()
|
||||
}
|
||||
}
|
||||
|
|
|
@ -3,13 +3,16 @@ package icu.fur93.esp32_car.ui.theme
|
|||
import android.app.Activity
|
||||
import android.os.Build
|
||||
import androidx.compose.foundation.isSystemInDarkTheme
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.material3.MaterialTheme
|
||||
import androidx.compose.material3.darkColorScheme
|
||||
import androidx.compose.material3.dynamicDarkColorScheme
|
||||
import androidx.compose.material3.dynamicLightColorScheme
|
||||
import androidx.compose.material3.lightColorScheme
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.platform.LocalContext
|
||||
import androidx.compose.ui.unit.dp
|
||||
|
||||
private val DarkColorScheme = darkColorScheme(
|
||||
primary = Purple80,
|
||||
|
@ -56,3 +59,13 @@ fun Esp32carTheme(
|
|||
content = content
|
||||
)
|
||||
}
|
||||
|
||||
val LayoutContentPadding = 22.dp;
|
||||
val LayoutTopPadding = 24.dp;
|
||||
|
||||
val LayoutContentModifier = Modifier.padding(
|
||||
start = LayoutContentPadding,
|
||||
end = LayoutContentPadding,
|
||||
top = LayoutTopPadding,
|
||||
bottom = LayoutContentPadding
|
||||
)
|
|
@ -56,7 +56,7 @@ object CardButtonTypography {
|
|||
fontWeight = FontWeight.SemiBold
|
||||
)
|
||||
val CardButtonItemTextStyle = TextStyle(
|
||||
fontSize = 18.sp,
|
||||
fontSize = 16.sp,
|
||||
fontWeight = FontWeight.Normal
|
||||
)
|
||||
}
|
|
@ -0,0 +1,11 @@
|
|||
<vector xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:width="24dp"
|
||||
android:height="24dp"
|
||||
android:viewportWidth="960"
|
||||
android:viewportHeight="960"
|
||||
android:tint="@android:color/white"
|
||||
android:autoMirrored="true">
|
||||
<path
|
||||
android:fillColor="@android:color/white"
|
||||
android:pathData="M560,680L360,480L560,280L560,680Z"/>
|
||||
</vector>
|
|
@ -0,0 +1,11 @@
|
|||
<vector xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:width="24dp"
|
||||
android:height="24dp"
|
||||
android:viewportWidth="960"
|
||||
android:viewportHeight="960"
|
||||
android:tint="@android:color/white"
|
||||
android:autoMirrored="true">
|
||||
<path
|
||||
android:fillColor="@android:color/white"
|
||||
android:pathData="M400,680L400,280L600,480L400,680Z"/>
|
||||
</vector>
|
Loading…
Reference in New Issue