From 1f60b1f2ce2357b0da29b26d87b5f5c28fa0beea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8E=96=E5=8F=81?= Date: Tue, 24 Dec 2024 10:20:18 +0800 Subject: [PATCH] feat: basic ui --- .../icu/fur93/esp32_car/page/ControlPage.kt | 23 ++++--- .../java/icu/fur93/esp32_car/page/HomePage.kt | 10 ++- .../icu/fur93/esp32_car/page/SettingsPage.kt | 63 +++++++++++++++++++ .../esp32_car/ui/component/CardButtonGroup.kt | 3 +- .../fur93/esp32_car/ui/layout/MainLayout.kt | 4 +- .../icu/fur93/esp32_car/ui/theme/Theme.kt | 15 ++++- .../java/icu/fur93/esp32_car/ui/theme/Type.kt | 2 +- app/src/main/res/drawable/arrow_left_24.xml | 11 ++++ app/src/main/res/drawable/arrow_right_24.xml | 11 ++++ 9 files changed, 123 insertions(+), 19 deletions(-) create mode 100644 app/src/main/res/drawable/arrow_left_24.xml create mode 100644 app/src/main/res/drawable/arrow_right_24.xml diff --git a/app/src/main/java/icu/fur93/esp32_car/page/ControlPage.kt b/app/src/main/java/icu/fur93/esp32_car/page/ControlPage.kt index c00c9f1..e60181f 100644 --- a/app/src/main/java/icu/fur93/esp32_car/page/ControlPage.kt +++ b/app/src/main/java/icu/fur93/esp32_car/page/ControlPage.kt @@ -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) ) ) ) diff --git a/app/src/main/java/icu/fur93/esp32_car/page/HomePage.kt b/app/src/main/java/icu/fur93/esp32_car/page/HomePage.kt index 05f3669..e81ded8 100644 --- a/app/src/main/java/icu/fur93/esp32_car/page/HomePage.kt +++ b/app/src/main/java/icu/fur93/esp32_car/page/HomePage.kt @@ -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( diff --git a/app/src/main/java/icu/fur93/esp32_car/page/SettingsPage.kt b/app/src/main/java/icu/fur93/esp32_car/page/SettingsPage.kt index f5a636f..fde5ee2 100644 --- a/app/src/main/java/icu/fur93/esp32_car/page/SettingsPage.kt +++ b/app/src/main/java/icu/fur93/esp32_car/page/SettingsPage.kt @@ -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( @@ -18,4 +44,41 @@ 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 = { + + } + ) + } + ) + } + } } \ No newline at end of file diff --git a/app/src/main/java/icu/fur93/esp32_car/ui/component/CardButtonGroup.kt b/app/src/main/java/icu/fur93/esp32_car/ui/component/CardButtonGroup.kt index 10ee0b2..9826ee9 100644 --- a/app/src/main/java/icu/fur93/esp32_car/ui/component/CardButtonGroup.kt +++ b/app/src/main/java/icu/fur93/esp32_car/ui/component/CardButtonGroup.kt @@ -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 diff --git a/app/src/main/java/icu/fur93/esp32_car/ui/layout/MainLayout.kt b/app/src/main/java/icu/fur93/esp32_car/ui/layout/MainLayout.kt index f1d5518..6ccef2e 100644 --- a/app/src/main/java/icu/fur93/esp32_car/ui/layout/MainLayout.kt +++ b/app/src/main/java/icu/fur93/esp32_car/ui/layout/MainLayout.kt @@ -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() } } diff --git a/app/src/main/java/icu/fur93/esp32_car/ui/theme/Theme.kt b/app/src/main/java/icu/fur93/esp32_car/ui/theme/Theme.kt index 2368595..6ec1cf8 100644 --- a/app/src/main/java/icu/fur93/esp32_car/ui/theme/Theme.kt +++ b/app/src/main/java/icu/fur93/esp32_car/ui/theme/Theme.kt @@ -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, @@ -55,4 +58,14 @@ fun Esp32carTheme( typography = Typography, content = content ) -} \ No newline at end of file +} + +val LayoutContentPadding = 22.dp; +val LayoutTopPadding = 24.dp; + +val LayoutContentModifier = Modifier.padding( + start = LayoutContentPadding, + end = LayoutContentPadding, + top = LayoutTopPadding, + bottom = LayoutContentPadding +) \ No newline at end of file diff --git a/app/src/main/java/icu/fur93/esp32_car/ui/theme/Type.kt b/app/src/main/java/icu/fur93/esp32_car/ui/theme/Type.kt index 7b30854..ae53923 100644 --- a/app/src/main/java/icu/fur93/esp32_car/ui/theme/Type.kt +++ b/app/src/main/java/icu/fur93/esp32_car/ui/theme/Type.kt @@ -56,7 +56,7 @@ object CardButtonTypography { fontWeight = FontWeight.SemiBold ) val CardButtonItemTextStyle = TextStyle( - fontSize = 18.sp, + fontSize = 16.sp, fontWeight = FontWeight.Normal ) } \ No newline at end of file diff --git a/app/src/main/res/drawable/arrow_left_24.xml b/app/src/main/res/drawable/arrow_left_24.xml new file mode 100644 index 0000000..846a11f --- /dev/null +++ b/app/src/main/res/drawable/arrow_left_24.xml @@ -0,0 +1,11 @@ + + + diff --git a/app/src/main/res/drawable/arrow_right_24.xml b/app/src/main/res/drawable/arrow_right_24.xml new file mode 100644 index 0000000..12f5da6 --- /dev/null +++ b/app/src/main/res/drawable/arrow_right_24.xml @@ -0,0 +1,11 @@ + + +