feat: 尝试适配横屏下的布局

但貌似重复的代码太多了,后面改改
This commit is contained in:
Super12138 2025-01-12 15:07:35 +08:00
parent 8cbf9fbcb6
commit 111e2bb7d2
2 changed files with 117 additions and 60 deletions

View file

@ -0,0 +1,6 @@
package cn.super12138.todo.logic.model
enum class Orientation {
Portrait,
Landscape
}

View file

@ -1,5 +1,6 @@
package cn.super12138.todo.ui.pages.main package cn.super12138.todo.ui.pages.main
import android.content.res.Configuration
import androidx.compose.animation.AnimatedVisibility import androidx.compose.animation.AnimatedVisibility
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
@ -28,10 +29,12 @@ import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment import androidx.compose.ui.Alignment
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.compose.ui.unit.dp import androidx.compose.ui.unit.dp
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.viewmodels.MainViewModel import cn.super12138.todo.ui.viewmodels.MainViewModel
import kotlinx.coroutines.launch import kotlinx.coroutines.launch
@ -51,6 +54,15 @@ 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 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 = {
TopAppBar( TopAppBar(
@ -94,70 +106,109 @@ fun MainPage(viewModel: MainViewModel, modifier: Modifier = Modifier) {
}, },
modifier = modifier modifier = modifier
) { innerPadding -> ) { innerPadding ->
Column(modifier = Modifier.padding(innerPadding)) { when (orientation) {
ProgressFragment( Orientation.Portrait -> {
totalTasks = toDoList.value.size, Column(modifier = Modifier.padding(innerPadding)) {
completedTasks = toDoList.value.count { it.isCompleted }, ProgressFragment(
modifier = Modifier totalTasks = toDoList.value.size,
.weight(2f) completedTasks = toDoList.value.count { it.isCompleted },
.fillMaxSize() modifier = Modifier
) .weight(2f)
.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
selectedTodoItem = item selectedTodoItem = 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
) )
) )
} }
}, },
modifier = Modifier modifier = Modifier
.weight(3f) .weight(3f)
.fillMaxSize() .fillMaxSize()
) )
}
}
if (openBottomSheet) { Orientation.Landscape -> {
TodoBottomSheet( Row(modifier = Modifier.padding(innerPadding)) {
sheetState = bottomSheetState, ProgressFragment(
onDismissRequest = { totalTasks = toDoList.value.size,
openBottomSheet = false completedTasks = toDoList.value.count { it.isCompleted },
selectedTodoItem = null modifier = Modifier
}, .weight(2f)
toDo = selectedTodoItem, .fillMaxSize()
onSave = { toDo -> )
selectedTodoItem = null
viewModel.addTodo(toDo) ManagerFragment(
scope state = listState,
.launch { bottomSheetState.hide() } list = toDoList.value.filter { item -> !item.isCompleted },
.invokeOnCompletion { onItemClick = { item ->
if (!bottomSheetState.isVisible) { openBottomSheet = true
openBottomSheet = false selectedTodoItem = item
} },
onItemChecked = { item ->
item.apply {
viewModel.updateTodo(
TodoEntity(
content = content,
subject = subject,
isCompleted = true,
id = id
)
)
} }
}, },
onClose = { modifier = Modifier
selectedTodoItem = null .weight(3f)
scope .fillMaxSize()
.launch { bottomSheetState.hide() } )
.invokeOnCompletion { }
if (!bottomSheetState.isVisible) {
openBottomSheet = false
}
}
}
)
} }
} }
} }
if (openBottomSheet) {
TodoBottomSheet(
sheetState = bottomSheetState,
onDismissRequest = {
openBottomSheet = false
selectedTodoItem = null
},
toDo = selectedTodoItem,
onSave = { toDo ->
selectedTodoItem = null
viewModel.addTodo(toDo)
scope
.launch { bottomSheetState.hide() }
.invokeOnCompletion {
if (!bottomSheetState.isVisible) {
openBottomSheet = false
}
}
},
onClose = {
selectedTodoItem = null
scope
.launch { bottomSheetState.hide() }
.invokeOnCompletion {
if (!bottomSheetState.isVisible) {
openBottomSheet = false
}
}
}
)
}
} }