danvics/VerveDo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: 使用 WindowSizeClass 对屏幕大小进行更广泛的适配

Browse source
This commit is contained in:
Super12138 2025-01-13 20:51:43 +08:00
parent dcd22ec07c
commit d90768e466
3 changed files with 70 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/build.gradle.kts
View file

@ -58,6 +58,7 @@ dependencies {
implementation(platform(libs.androidx.compose.bom)) implementation(platform(libs.androidx.compose.bom))
implementation(libs.androidx.animation) implementation(libs.androidx.animation)
implementation(libs.androidx.navigation) implementation(libs.androidx.navigation)
implementation(libs.androidx.material3.adaptive)
implementation(libs.androidx.ui) implementation(libs.androidx.ui)
implementation(libs.androidx.ui.android) implementation(libs.androidx.ui.android)
implementation(libs.androidx.ui.graphics) implementation(libs.androidx.ui.graphics)

145
app/src/main/kotlin/cn/super12138/todo/ui/pages/main/MainPage.kt
View file

@ -1,6 +1,5 @@
package cn.super12138.todo.ui.pages.main package cn.super12138.todo.ui.pages.main
import android.content.res.Configuration
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxSize
@ -14,6 +13,7 @@ import androidx.compose.material3.IconButton
import androidx.compose.material3.Scaffold import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar import androidx.compose.material3.TopAppBar
import androidx.compose.material3.adaptive.currentWindowAdaptiveInfo
import androidx.compose.material3.rememberModalBottomSheetState import androidx.compose.material3.rememberModalBottomSheetState
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState import androidx.compose.runtime.collectAsState
@ -25,11 +25,10 @@ import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.saveable.rememberSaveable import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.res.stringResource import androidx.compose.ui.res.stringResource
import androidx.window.core.layout.WindowWidthSizeClass
import cn.super12138.todo.R import cn.super12138.todo.R
import cn.super12138.todo.logic.database.TodoEntity import cn.super12138.todo.logic.database.TodoEntity
import cn.super12138.todo.logic.model.Orientation
import cn.super12138.todo.ui.pages.main.components.TodoFAB import cn.super12138.todo.ui.pages.main.components.TodoFAB
import cn.super12138.todo.ui.viewmodels.MainViewModel import cn.super12138.todo.ui.viewmodels.MainViewModel
import kotlinx.coroutines.launch import kotlinx.coroutines.launch
@ -50,13 +49,7 @@ fun MainPage(viewModel: MainViewModel, modifier: Modifier = Modifier) {
val bottomSheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true) val bottomSheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)
val scope = rememberCoroutineScope() val scope = rememberCoroutineScope()
// TODO: 寻找更好的适配方式 val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass
val configuration = LocalConfiguration.current
val orientation = when (configuration.orientation) {
Configuration.ORIENTATION_PORTRAIT -> Orientation.Portrait
Configuration.ORIENTATION_LANDSCAPE -> Orientation.Landscape
else -> Orientation.Portrait
}
Scaffold( Scaffold(
topBar = { topBar = {
@ -86,79 +79,75 @@ fun MainPage(viewModel: MainViewModel, modifier: Modifier = Modifier) {
}, },
modifier = modifier modifier = modifier
) { innerPadding -> ) { innerPadding ->
when (orientation) { if (windowSizeClass.windowWidthSizeClass == WindowWidthSizeClass.COMPACT) {
Orientation.Portrait -> { Column(modifier = Modifier.padding(innerPadding)) {
Column(modifier = Modifier.padding(innerPadding)) { ProgressFragment(
ProgressFragment( totalTasks = toDoList.value.size,
totalTasks = toDoList.value.size, completedTasks = toDoList.value.count { it.isCompleted },
completedTasks = toDoList.value.count { it.isCompleted }, modifier = Modifier
modifier = Modifier .weight(2f)
.weight(2f) .fillMaxSize()
.fillMaxSize() )
)
ManagerFragment( ManagerFragment(
state = listState, state = listState,
list = toDoList.value.filter { item -> !item.isCompleted }, list = toDoList.value.filter { item -> !item.isCompleted },
onItemClick = { item -> onItemClick = { item ->
openBottomSheet = true openBottomSheet = true
viewModel.setEditTodoItem(item) viewModel.setEditTodoItem(item)
}, },
onItemChecked = { item -> onItemChecked = { item ->
item.apply { item.apply {
viewModel.updateTodo( viewModel.updateTodo(
TodoEntity( TodoEntity(
content = content, content = content,
subject = subject, subject = subject,
isCompleted = true, isCompleted = true,
id = id id = id
)
) )
viewModel.playConfetti() )
} viewModel.playConfetti()
}, }
modifier = Modifier },
.weight(3f) modifier = Modifier
.fillMaxSize() .weight(3f)
) .fillMaxSize()
} )
} }
} else {
Row(modifier = Modifier.padding(innerPadding)) {
ProgressFragment(
totalTasks = toDoList.value.size,
completedTasks = toDoList.value.count { it.isCompleted },
modifier = Modifier
.weight(2f)
.fillMaxSize()
)
Orientation.Landscape -> { ManagerFragment(
Row(modifier = Modifier.padding(innerPadding)) { state = listState,
ProgressFragment( list = toDoList.value.filter { item -> !item.isCompleted },
totalTasks = toDoList.value.size, onItemClick = { item ->
completedTasks = toDoList.value.count { it.isCompleted }, openBottomSheet = true
modifier = Modifier viewModel.setEditTodoItem(item)
.weight(2f) },
.fillMaxSize() onItemChecked = { item ->
) item.apply {
viewModel.updateTodo(
ManagerFragment( TodoEntity(
state = listState, content = content,
list = toDoList.value.filter { item -> !item.isCompleted }, subject = subject,
onItemClick = { item -> isCompleted = true,
openBottomSheet = true id = id
viewModel.setEditTodoItem(item)
},
onItemChecked = { item ->
item.apply {
viewModel.updateTodo(
TodoEntity(
content = content,
subject = subject,
isCompleted = true,
id = id
)
) )
viewModel.playConfetti() )
} viewModel.playConfetti()
}, }
modifier = Modifier },
.weight(3f) modifier = Modifier
.fillMaxSize() .weight(3f)
) .fillMaxSize()
} )
} }
} }
} }

2
gradle/libs.versions.toml
View file

@ -11,6 +11,7 @@ icons = "1.7.6"
room = "2.6.1" room = "2.6.1"
navigation = "2.8.5" navigation = "2.8.5"
material3 = "1.4.0-alpha05" material3 = "1.4.0-alpha05"
adaptive = "1.1.0-alpha08"
# AboutLibraries # AboutLibraries
aboutLibsRelease = "11.3.0-rc02" aboutLibsRelease = "11.3.0-rc02"
# M3 Color # M3 Color
@ -41,6 +42,7 @@ androidx-activity-compose = { group = "androidx.activity", name = "activity-comp
androidx-compose-bom = { group = "androidx.compose", name = "compose-bom", version.ref = "composeBom" } androidx-compose-bom = { group = "androidx.compose", name = "compose-bom", version.ref = "composeBom" }
androidx-animation = { group = "androidx.compose.animation", name = "animation" } androidx-animation = { group = "androidx.compose.animation", name = "animation" }
androidx-navigation = { group = "androidx.navigation", name = "navigation-compose", version.ref = "navigation" } androidx-navigation = { group = "androidx.navigation", name = "navigation-compose", version.ref = "navigation" }
androidx-material3-adaptive = { group = "androidx.compose.material3.adaptive", name = "adaptive", version.ref = "adaptive" }
androidx-ui = { group = "androidx.compose.ui", name = "ui" } androidx-ui = { group = "androidx.compose.ui", name = "ui" }
androidx-ui-android = { group = "androidx.compose.ui", name = "ui-android" } androidx-ui-android = { group = "androidx.compose.ui", name = "ui-android" }
androidx-ui-graphics = { group = "androidx.compose.ui", name = "ui-graphics" } androidx-ui-graphics = { group = "androidx.compose.ui", name = "ui-graphics" }