feat: basic ui

This commit is contained in:
玖叁 2024-12-24 10:20:18 +08:00
parent c8e9f7d53c
commit 1f60b1f2ce
9 changed files with 123 additions and 19 deletions

View File

@ -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)
)
)
)

View File

@ -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(

View File

@ -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 = {
}
)
}
)
}
}
}

View File

@ -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

View File

@ -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()
}
}

View File

@ -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
)

View File

@ -56,7 +56,7 @@ object CardButtonTypography {
fontWeight = FontWeight.SemiBold
)
val CardButtonItemTextStyle = TextStyle(
fontSize = 18.sp,
fontSize = 16.sp,
fontWeight = FontWeight.Normal
)
}

View File

@ -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>

View File

@ -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>