[优化] 优化书籍编辑界面显示
This commit is contained in:
1 file changed
+94
-50
@@ -3,13 +3,19 @@ package io.legado.app.ui.book.info.edit
|
|||||||
import androidx.activity.compose.rememberLauncherForActivityResult
|
import androidx.activity.compose.rememberLauncherForActivityResult
|
||||||
import androidx.compose.foundation.layout.Arrangement
|
import androidx.compose.foundation.layout.Arrangement
|
||||||
import androidx.compose.foundation.layout.Column
|
import androidx.compose.foundation.layout.Column
|
||||||
|
import androidx.compose.foundation.layout.PaddingValues
|
||||||
import androidx.compose.foundation.layout.Row
|
import androidx.compose.foundation.layout.Row
|
||||||
import androidx.compose.foundation.layout.Spacer
|
import androidx.compose.foundation.layout.Spacer
|
||||||
import androidx.compose.foundation.layout.fillMaxSize
|
import androidx.compose.foundation.layout.fillMaxSize
|
||||||
import androidx.compose.foundation.layout.fillMaxWidth
|
import androidx.compose.foundation.layout.fillMaxWidth
|
||||||
import androidx.compose.foundation.layout.height
|
import androidx.compose.foundation.layout.height
|
||||||
|
import androidx.compose.foundation.layout.heightIn
|
||||||
import androidx.compose.foundation.layout.padding
|
import androidx.compose.foundation.layout.padding
|
||||||
|
import androidx.compose.foundation.layout.width
|
||||||
import androidx.compose.foundation.rememberScrollState
|
import androidx.compose.foundation.rememberScrollState
|
||||||
|
import androidx.compose.foundation.text.input.TextFieldLineLimits
|
||||||
|
import androidx.compose.foundation.text.input.rememberTextFieldState
|
||||||
|
import androidx.compose.foundation.text.input.setTextAndPlaceCursorAtEnd
|
||||||
import androidx.compose.foundation.verticalScroll
|
import androidx.compose.foundation.verticalScroll
|
||||||
import androidx.compose.material.icons.Icons
|
import androidx.compose.material.icons.Icons
|
||||||
import androidx.compose.material.icons.automirrored.filled.ArrowBack
|
import androidx.compose.material.icons.automirrored.filled.ArrowBack
|
||||||
@@ -17,6 +23,7 @@ import androidx.compose.material.icons.filled.FolderOpen
|
|||||||
import androidx.compose.material.icons.filled.ImageSearch
|
import androidx.compose.material.icons.filled.ImageSearch
|
||||||
import androidx.compose.material.icons.filled.Replay
|
import androidx.compose.material.icons.filled.Replay
|
||||||
import androidx.compose.material.icons.filled.Save
|
import androidx.compose.material.icons.filled.Save
|
||||||
|
import androidx.compose.material3.ButtonDefaults
|
||||||
import androidx.compose.material3.DropdownMenuItem
|
import androidx.compose.material3.DropdownMenuItem
|
||||||
import androidx.compose.material3.ExperimentalMaterial3Api
|
import androidx.compose.material3.ExperimentalMaterial3Api
|
||||||
import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
|
import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
|
||||||
@@ -27,18 +34,26 @@ import androidx.compose.material3.FilledTonalIconButton
|
|||||||
import androidx.compose.material3.Icon
|
import androidx.compose.material3.Icon
|
||||||
import androidx.compose.material3.IconButton
|
import androidx.compose.material3.IconButton
|
||||||
import androidx.compose.material3.IconButtonDefaults
|
import androidx.compose.material3.IconButtonDefaults
|
||||||
|
import androidx.compose.material3.MaterialTheme
|
||||||
import androidx.compose.material3.MediumTopAppBar
|
import androidx.compose.material3.MediumTopAppBar
|
||||||
|
import androidx.compose.material3.OutlinedButton
|
||||||
|
import androidx.compose.material3.OutlinedIconButton
|
||||||
import androidx.compose.material3.OutlinedTextField
|
import androidx.compose.material3.OutlinedTextField
|
||||||
|
import androidx.compose.material3.OutlinedTextFieldDefaults
|
||||||
import androidx.compose.material3.Scaffold
|
import androidx.compose.material3.Scaffold
|
||||||
import androidx.compose.material3.Text
|
import androidx.compose.material3.Text
|
||||||
|
import androidx.compose.material3.TextField
|
||||||
import androidx.compose.material3.TopAppBarDefaults
|
import androidx.compose.material3.TopAppBarDefaults
|
||||||
import androidx.compose.runtime.Composable
|
import androidx.compose.runtime.Composable
|
||||||
|
import androidx.compose.runtime.LaunchedEffect
|
||||||
import androidx.compose.runtime.getValue
|
import androidx.compose.runtime.getValue
|
||||||
import androidx.compose.runtime.mutableStateOf
|
import androidx.compose.runtime.mutableStateOf
|
||||||
import androidx.compose.runtime.remember
|
import androidx.compose.runtime.remember
|
||||||
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.Modifier.Companion
|
||||||
|
import androidx.compose.ui.graphics.Color
|
||||||
import androidx.compose.ui.input.nestedscroll.nestedScroll
|
import androidx.compose.ui.input.nestedscroll.nestedScroll
|
||||||
import androidx.compose.ui.platform.LocalContext
|
import androidx.compose.ui.platform.LocalContext
|
||||||
import androidx.compose.ui.res.stringResource
|
import androidx.compose.ui.res.stringResource
|
||||||
@@ -118,43 +133,65 @@ fun BookInfoEditContent(
|
|||||||
}
|
}
|
||||||
|
|
||||||
Column(
|
Column(
|
||||||
modifier = modifier.padding(16.dp),
|
modifier = modifier.padding(16.dp)
|
||||||
horizontalAlignment = Alignment.CenterHorizontally
|
|
||||||
) {
|
) {
|
||||||
Cover(
|
Row(
|
||||||
path = uiState.coverUrl,
|
modifier = Modifier.fillMaxWidth(),
|
||||||
modifier = Modifier
|
horizontalArrangement = Arrangement.spacedBy(16.dp),
|
||||||
.fillMaxWidth(0.3f)
|
verticalAlignment = Alignment.CenterVertically
|
||||||
)
|
) {
|
||||||
Spacer(modifier = Modifier.height(16.dp))
|
Cover(
|
||||||
Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
|
path = uiState.coverUrl,
|
||||||
FilledTonalIconButton(
|
modifier = Modifier
|
||||||
onClick = {
|
.width(110.dp)
|
||||||
(context as? BookInfoEditActivity)?.showDialogFragment(
|
.height(154.dp)
|
||||||
ChangeCoverDialog(
|
)
|
||||||
uiState.name,
|
Column(
|
||||||
uiState.author
|
modifier = Modifier.weight(1f),
|
||||||
|
verticalArrangement = Arrangement.spacedBy(8.dp),
|
||||||
|
horizontalAlignment = Alignment.CenterHorizontally
|
||||||
|
) {
|
||||||
|
Row(horizontalArrangement = Arrangement.spacedBy(12.dp)) {
|
||||||
|
OutlinedButton(
|
||||||
|
onClick = {
|
||||||
|
(context as? BookInfoEditActivity)?.showDialogFragment(
|
||||||
|
ChangeCoverDialog(
|
||||||
|
uiState.name,
|
||||||
|
uiState.author
|
||||||
|
)
|
||||||
|
)
|
||||||
|
},
|
||||||
|
shapes = ButtonDefaults.shapes()
|
||||||
|
) {
|
||||||
|
Icon(
|
||||||
|
Icons.Default.ImageSearch,
|
||||||
|
contentDescription = stringResource(id = R.string.default_cover)
|
||||||
)
|
)
|
||||||
)
|
}
|
||||||
},
|
OutlinedButton(
|
||||||
shapes = IconButtonDefaults.shapes()) {
|
onClick = { selectCover.launch() },
|
||||||
Icon(
|
shapes = ButtonDefaults.shapes()
|
||||||
Icons.Default.ImageSearch,
|
) {
|
||||||
contentDescription = stringResource(id = R.string.default_cover)
|
Icon(
|
||||||
)
|
Icons.Default.FolderOpen,
|
||||||
}
|
contentDescription = stringResource(id = R.string.default_cover)
|
||||||
FilledTonalIconButton(onClick = { selectCover.launch() },
|
)
|
||||||
shapes = IconButtonDefaults.shapes()) {
|
}
|
||||||
Icon(
|
OutlinedButton(
|
||||||
Icons.Default.FolderOpen,
|
onClick = { viewModel.resetCover() },
|
||||||
contentDescription = stringResource(id = R.string.default_cover)
|
shapes = ButtonDefaults.shapes()
|
||||||
)
|
) {
|
||||||
}
|
Icon(
|
||||||
FilledTonalIconButton(onClick = { viewModel.resetCover() },
|
Icons.Default.Replay,
|
||||||
shapes = IconButtonDefaults.shapes()) {
|
contentDescription = stringResource(id = R.string.default_cover)
|
||||||
Icon(
|
)
|
||||||
Icons.Default.Replay,
|
}
|
||||||
contentDescription = stringResource(id = R.string.default_cover)
|
}
|
||||||
|
Spacer(modifier = Modifier.height(4.dp))
|
||||||
|
BookTypeDropdown(
|
||||||
|
bookTypes = uiState.bookTypes,
|
||||||
|
selectedType = uiState.selectedType,
|
||||||
|
onTypeSelected = { viewModel.onBookTypeChange(it) }
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -173,12 +210,6 @@ fun BookInfoEditContent(
|
|||||||
modifier = Modifier.fillMaxWidth()
|
modifier = Modifier.fillMaxWidth()
|
||||||
)
|
)
|
||||||
Spacer(modifier = Modifier.height(8.dp))
|
Spacer(modifier = Modifier.height(8.dp))
|
||||||
BookTypeDropdown(
|
|
||||||
bookTypes = uiState.bookTypes,
|
|
||||||
selectedType = uiState.selectedType,
|
|
||||||
onTypeSelected = { viewModel.onBookTypeChange(it) }
|
|
||||||
)
|
|
||||||
Spacer(modifier = Modifier.height(8.dp))
|
|
||||||
OutlinedTextField(
|
OutlinedTextField(
|
||||||
value = uiState.coverUrl ?: "",
|
value = uiState.coverUrl ?: "",
|
||||||
onValueChange = { viewModel.onCoverUrlChange(it) },
|
onValueChange = { viewModel.onCoverUrlChange(it) },
|
||||||
@@ -212,32 +243,44 @@ fun BookTypeDropdown(
|
|||||||
) {
|
) {
|
||||||
var expanded by remember { mutableStateOf(false) }
|
var expanded by remember { mutableStateOf(false) }
|
||||||
|
|
||||||
|
val textFieldState = rememberTextFieldState(
|
||||||
|
initialText = selectedType
|
||||||
|
)
|
||||||
|
|
||||||
|
LaunchedEffect(selectedType) {
|
||||||
|
textFieldState.setTextAndPlaceCursorAtEnd(selectedType)
|
||||||
|
}
|
||||||
|
|
||||||
ExposedDropdownMenuBox(
|
ExposedDropdownMenuBox(
|
||||||
|
modifier = Modifier.padding(horizontal = 8.dp),
|
||||||
expanded = expanded,
|
expanded = expanded,
|
||||||
onExpandedChange = { expanded = !expanded }
|
onExpandedChange = { expanded = !expanded }
|
||||||
) {
|
) {
|
||||||
OutlinedTextField(
|
OutlinedTextField(
|
||||||
|
state = textFieldState,
|
||||||
|
readOnly = true,
|
||||||
|
lineLimits = TextFieldLineLimits.SingleLine,
|
||||||
|
label = { Text("书籍类型") },
|
||||||
|
trailingIcon = {
|
||||||
|
ExposedDropdownMenuDefaults.TrailingIcon(expanded = expanded)
|
||||||
|
},
|
||||||
modifier = Modifier
|
modifier = Modifier
|
||||||
.fillMaxWidth()
|
.fillMaxWidth()
|
||||||
.menuAnchor(
|
.menuAnchor(
|
||||||
ExposedDropdownMenuAnchorType.PrimaryEditable,
|
ExposedDropdownMenuAnchorType.PrimaryEditable,
|
||||||
true
|
enabled = true
|
||||||
),
|
),
|
||||||
readOnly = true,
|
|
||||||
value = selectedType,
|
|
||||||
onValueChange = {},
|
|
||||||
label = { Text("书籍类型") },
|
|
||||||
trailingIcon = { ExposedDropdownMenuDefaults.TrailingIcon(expanded = expanded) },
|
|
||||||
)
|
)
|
||||||
|
|
||||||
ExposedDropdownMenu(
|
ExposedDropdownMenu(
|
||||||
expanded = expanded,
|
expanded = expanded,
|
||||||
onDismissRequest = { expanded = false }
|
onDismissRequest = { expanded = false }
|
||||||
) {
|
) {
|
||||||
bookTypes.forEach { selectionOption ->
|
bookTypes.forEach { option ->
|
||||||
DropdownMenuItem(
|
DropdownMenuItem(
|
||||||
text = { Text(selectionOption) },
|
text = { Text(option) },
|
||||||
onClick = {
|
onClick = {
|
||||||
onTypeSelected(selectionOption)
|
onTypeSelected(option)
|
||||||
expanded = false
|
expanded = false
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
@@ -245,3 +288,4 @@ fun BookTypeDropdown(
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Reference in new issue
Block a user