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

2
gradle/libs.versions.toml
View file

@ -11,6 +11,7 @@ icons = "1.7.6"
room = "2.6.1"
navigation = "2.8.5"
material3 = "1.4.0-alpha05"
adaptive = "1.1.0-alpha08"
# AboutLibraries
aboutLibsRelease = "11.3.0-rc02"
# 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-animation = { group = "androidx.compose.animation", name = "animation" }
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-android = { group = "androidx.compose.ui", name = "ui-android" }
androidx-ui-graphics = { group = "androidx.compose.ui", name = "ui-graphics" }