Add settings page

This commit is contained in:
Ash 2022-03-04 02:15:12 +08:00
parent ee9e0a4553
commit f260175f25

View File

@ -2,12 +2,28 @@ package me.ash.reader.ui.page.settings
import androidx.compose.animation.ExperimentalAnimationApi
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material.icons.outlined.*
import androidx.compose.material.icons.rounded.ArrowBackIosNew
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.NavHostController
import com.google.accompanist.pager.ExperimentalPagerApi
import me.ash.reader.ui.util.paddingFixedHorizontal
import me.ash.reader.ui.util.roundClick
import me.ash.reader.ui.widget.TopTitleBox
@ExperimentalAnimationApi
@ExperimentalMaterial3Api
@ -17,33 +33,137 @@ import com.google.accompanist.pager.ExperimentalPagerApi
fun SettingsPage(
navController: NavHostController,
) {
Scaffold(
topBar = {
LargeTopAppBar(
title = {
Text(
text = "Settings",
color = MaterialTheme.colorScheme.primary,
)
},
val listState = rememberLazyListState()
Box(modifier = Modifier.fillMaxSize()) {
// LargeTopAppBar(
// title = { Text(text = "Settings") }
// )
TopTitleBox(
title = "Settings",
description = "",
listState = listState,
startOffset = Offset(20f, 78f),
startHeight = 72f,
startTitleFontSize = 36f,
startDescriptionFontSize = 0f,
) {
}
Column {
SmallTopAppBar(
title = {},
navigationIcon = {
IconButton(onClick = {
navController.popBackStack()
}) {
IconButton(onClick = { /*TODO*/ }) {
Icon(
imageVector = Icons.Filled.ArrowBack,
contentDescription = "Back",
tint = MaterialTheme.colorScheme.primary
)
}
IconButton(onClick = { navController.popBackStack() }) {
Icon(
imageVector = Icons.Rounded.ArrowBackIosNew,
contentDescription = "Back",
tint = MaterialTheme.colorScheme.primary
)
}
},
)
},
content = {
Text(text = "af")
},
)
LazyColumn(
modifier = Modifier
.weight(1f)
.paddingFixedHorizontal(),
state = listState
) {
item {
Spacer(modifier = Modifier.height(112.dp))
}
item {
Item(
title = "通用",
description = "应用的基本设置",
imageVector = Icons.Outlined.Apps,
)
}
item {
Item(
title = "外观",
description = "字体、颜色、背景",
imageVector = Icons.Outlined.ColorLens,
)
}
item {
Item(
title = "阅读",
description = "渲染阅读视图的设置",
imageVector = Icons.Outlined.LocalLibrary,
)
}
item {
Item(
title = "Ash",
description = "本地账户",
imageVector = Icons.Outlined.Storage,
)
}
item {
Item(
title = "添加账户",
description = "FreshRSS、Inoreader、Feedly",
imageVector = Icons.Outlined.AccountCircle,
)
}
item {
Spacer(modifier = Modifier.height(500.dp))
Item(
title = "添加账户",
description = "FreshRSS、Inoreader、Feedly",
imageVector = Icons.Outlined.AccountCircle,
)
}
}
}
}
}
@Composable
fun Item(
title: String = "",
description: String = "",
imageVector: ImageVector,
) {
Row(modifier = Modifier
.fillMaxWidth()
.roundClick { }
) {
Row(
modifier = Modifier.paddingFixedHorizontal(top = 16.dp, bottom = 16.dp),
verticalAlignment = Alignment.CenterVertically
) {
Spacer(modifier = Modifier.width(4.dp))
Icon(
imageVector = imageVector,
contentDescription = title,
tint = MaterialTheme.colorScheme.onPrimaryContainer,
)
Spacer(modifier = Modifier.width(20.dp))
Column {
Text(
text = title,
fontSize = 20.sp,
color = MaterialTheme.colorScheme.onPrimaryContainer,
)
Text(
text = description,
color = MaterialTheme.colorScheme.outline,
)
}
}
}
}
@ExperimentalAnimationApi
@ExperimentalMaterial3Api
@ExperimentalPagerApi
@ExperimentalFoundationApi
@Preview
@Composable
fun SettingsPreview() {
Row(modifier = Modifier.background(MaterialTheme.colorScheme.surface)) {
SettingsPage(navController = NavHostController(LocalContext.current))
}
}