mirror of
https://github.com/Joker-x-dev/AndroidProject-Compose.git
synced 2025-12-29 00:27:10 +00:00
初步实现主题
This commit is contained in:
@@ -11,14 +11,14 @@ import androidx.compose.material3.Text
|
|||||||
import androidx.compose.runtime.Composable
|
import androidx.compose.runtime.Composable
|
||||||
import androidx.compose.ui.Modifier
|
import androidx.compose.ui.Modifier
|
||||||
import androidx.compose.ui.tooling.preview.Preview
|
import androidx.compose.ui.tooling.preview.Preview
|
||||||
import com.joker.kit.ui.theme.AndroidProjectComposeTheme
|
import com.joker.kit.core.designsystem.theme.AppTheme
|
||||||
|
|
||||||
class MainActivity : ComponentActivity() {
|
class MainActivity : ComponentActivity() {
|
||||||
override fun onCreate(savedInstanceState: Bundle?) {
|
override fun onCreate(savedInstanceState: Bundle?) {
|
||||||
super.onCreate(savedInstanceState)
|
super.onCreate(savedInstanceState)
|
||||||
enableEdgeToEdge()
|
enableEdgeToEdge()
|
||||||
setContent {
|
setContent {
|
||||||
AndroidProjectComposeTheme {
|
AppTheme {
|
||||||
Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
|
Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
|
||||||
Greeting(
|
Greeting(
|
||||||
name = "Android",
|
name = "Android",
|
||||||
@@ -41,7 +41,7 @@ fun Greeting(name: String, modifier: Modifier = Modifier) {
|
|||||||
@Preview(showBackground = true)
|
@Preview(showBackground = true)
|
||||||
@Composable
|
@Composable
|
||||||
fun GreetingPreview() {
|
fun GreetingPreview() {
|
||||||
AndroidProjectComposeTheme {
|
AppTheme {
|
||||||
Greeting("Android")
|
Greeting("Android")
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -0,0 +1,400 @@
|
|||||||
|
package com.joker.kit.core.designsystem.component
|
||||||
|
|
||||||
|
import androidx.compose.foundation.border
|
||||||
|
import androidx.compose.foundation.layout.Box
|
||||||
|
import androidx.compose.foundation.layout.BoxScope
|
||||||
|
import androidx.compose.foundation.layout.PaddingValues
|
||||||
|
import androidx.compose.foundation.layout.fillMaxSize
|
||||||
|
import androidx.compose.foundation.layout.fillMaxWidth
|
||||||
|
import androidx.compose.foundation.layout.height
|
||||||
|
import androidx.compose.foundation.layout.padding
|
||||||
|
import androidx.compose.foundation.layout.width
|
||||||
|
import androidx.compose.foundation.shape.RoundedCornerShape
|
||||||
|
import androidx.compose.material3.MaterialTheme
|
||||||
|
import androidx.compose.runtime.Composable
|
||||||
|
import androidx.compose.ui.Alignment
|
||||||
|
import androidx.compose.ui.Modifier
|
||||||
|
import androidx.compose.ui.draw.clip
|
||||||
|
import androidx.compose.ui.graphics.Color
|
||||||
|
import androidx.compose.ui.graphics.Shape
|
||||||
|
import androidx.compose.ui.unit.Dp
|
||||||
|
import androidx.compose.ui.unit.dp
|
||||||
|
import com.joker.kit.core.designsystem.theme.SpacePaddingLarge
|
||||||
|
import com.joker.kit.core.designsystem.theme.SpacePaddingMedium
|
||||||
|
import com.joker.kit.core.designsystem.theme.SpacePaddingSmall
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 封装的Box组件,预设了常用的修饰符
|
||||||
|
*
|
||||||
|
* @param modifier 额外的修饰符
|
||||||
|
* @param contentAlignment 内容对齐方式
|
||||||
|
* @param fillMaxSize 是否填充最大尺寸
|
||||||
|
* @param fillMaxWidth 是否填充最大宽度(当fillMaxSize为false时生效)
|
||||||
|
* @param padding 内边距
|
||||||
|
* @param content 内容
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun AppBox(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
contentAlignment: Alignment = Alignment.TopStart,
|
||||||
|
fillMaxSize: Boolean = false,
|
||||||
|
fillMaxWidth: Boolean = true,
|
||||||
|
padding: Dp = 0.dp,
|
||||||
|
content: @Composable BoxScope.() -> Unit
|
||||||
|
) {
|
||||||
|
val finalModifier = modifier
|
||||||
|
.let { if (fillMaxSize) it.fillMaxSize() else if (fillMaxWidth) it.fillMaxWidth() else it }
|
||||||
|
.let { if (padding > 0.dp) it.padding(padding) else it }
|
||||||
|
|
||||||
|
Box(
|
||||||
|
modifier = finalModifier,
|
||||||
|
contentAlignment = contentAlignment,
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 填充整个屏幕的Box,便于创建全屏布局
|
||||||
|
*
|
||||||
|
* @param modifier 额外的修饰符
|
||||||
|
* @param contentAlignment 内容对齐方式
|
||||||
|
* @param padding 内边距
|
||||||
|
* @param content 内容
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun FullScreenBox(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
contentAlignment: Alignment = Alignment.TopStart,
|
||||||
|
padding: PaddingValues = PaddingValues(0.dp),
|
||||||
|
content: @Composable BoxScope.() -> Unit
|
||||||
|
) {
|
||||||
|
Box(
|
||||||
|
modifier = modifier
|
||||||
|
.fillMaxSize()
|
||||||
|
.padding(padding),
|
||||||
|
contentAlignment = contentAlignment,
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 居中Box组件,内容居中对齐
|
||||||
|
*
|
||||||
|
* @param modifier 额外的修饰符
|
||||||
|
* @param fillMaxSize 是否填充最大尺寸
|
||||||
|
* @param padding 内边距
|
||||||
|
* @param content 内容
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun CenterBox(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
fillMaxSize: Boolean = true,
|
||||||
|
padding: Dp = 0.dp,
|
||||||
|
content: @Composable BoxScope.() -> Unit
|
||||||
|
) {
|
||||||
|
AppBox(
|
||||||
|
modifier = modifier,
|
||||||
|
contentAlignment = Alignment.Center,
|
||||||
|
fillMaxSize = fillMaxSize,
|
||||||
|
padding = padding,
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 顶部居中对齐的Box组件
|
||||||
|
*
|
||||||
|
* @param modifier 额外的修饰符
|
||||||
|
* @param fillMaxSize 是否填充最大尺寸
|
||||||
|
* @param fillMaxWidth 是否填充最大宽度
|
||||||
|
* @param padding 内边距
|
||||||
|
* @param content 内容
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun TopCenterBox(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
fillMaxSize: Boolean = false,
|
||||||
|
fillMaxWidth: Boolean = true,
|
||||||
|
padding: Dp = 0.dp,
|
||||||
|
content: @Composable BoxScope.() -> Unit
|
||||||
|
) {
|
||||||
|
AppBox(
|
||||||
|
modifier = modifier,
|
||||||
|
contentAlignment = Alignment.TopCenter,
|
||||||
|
fillMaxSize = fillMaxSize,
|
||||||
|
fillMaxWidth = fillMaxWidth,
|
||||||
|
padding = padding,
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 底部居中对齐的Box组件
|
||||||
|
*
|
||||||
|
* @param modifier 额外的修饰符
|
||||||
|
* @param fillMaxSize 是否填充最大尺寸
|
||||||
|
* @param fillMaxWidth 是否填充最大宽度
|
||||||
|
* @param padding 内边距
|
||||||
|
* @param content 内容
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun BottomCenterBox(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
fillMaxSize: Boolean = false,
|
||||||
|
fillMaxWidth: Boolean = true,
|
||||||
|
padding: Dp = 0.dp,
|
||||||
|
content: @Composable BoxScope.() -> Unit
|
||||||
|
) {
|
||||||
|
AppBox(
|
||||||
|
modifier = modifier,
|
||||||
|
contentAlignment = Alignment.BottomCenter,
|
||||||
|
fillMaxSize = fillMaxSize,
|
||||||
|
fillMaxWidth = fillMaxWidth,
|
||||||
|
padding = padding,
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 左侧居中对齐的Box组件
|
||||||
|
*
|
||||||
|
* @param modifier 额外的修饰符
|
||||||
|
* @param fillMaxSize 是否填充最大尺寸
|
||||||
|
* @param fillMaxWidth 是否填充最大宽度
|
||||||
|
* @param padding 内边距
|
||||||
|
* @param content 内容
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun CenterStartBox(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
fillMaxSize: Boolean = false,
|
||||||
|
fillMaxWidth: Boolean = true,
|
||||||
|
padding: Dp = 0.dp,
|
||||||
|
content: @Composable BoxScope.() -> Unit
|
||||||
|
) {
|
||||||
|
AppBox(
|
||||||
|
modifier = modifier,
|
||||||
|
contentAlignment = Alignment.CenterStart,
|
||||||
|
fillMaxSize = fillMaxSize,
|
||||||
|
fillMaxWidth = fillMaxWidth,
|
||||||
|
padding = padding,
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 右侧居中对齐的Box组件
|
||||||
|
*
|
||||||
|
* @param modifier 额外的修饰符
|
||||||
|
* @param fillMaxSize 是否填充最大尺寸
|
||||||
|
* @param fillMaxWidth 是否填充最大宽度
|
||||||
|
* @param padding 内边距
|
||||||
|
* @param content 内容
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun CenterEndBox(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
fillMaxSize: Boolean = false,
|
||||||
|
fillMaxWidth: Boolean = true,
|
||||||
|
padding: Dp = 0.dp,
|
||||||
|
content: @Composable BoxScope.() -> Unit
|
||||||
|
) {
|
||||||
|
AppBox(
|
||||||
|
modifier = modifier,
|
||||||
|
contentAlignment = Alignment.CenterEnd,
|
||||||
|
fillMaxSize = fillMaxSize,
|
||||||
|
fillMaxWidth = fillMaxWidth,
|
||||||
|
padding = padding,
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 固定尺寸的Box组件
|
||||||
|
*
|
||||||
|
* @param modifier 额外的修饰符
|
||||||
|
* @param width 宽度
|
||||||
|
* @param height 高度
|
||||||
|
* @param contentAlignment 内容对齐方式
|
||||||
|
* @param padding 内边距
|
||||||
|
* @param content 内容
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun FixedSizeBox(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
width: Dp,
|
||||||
|
height: Dp,
|
||||||
|
contentAlignment: Alignment = Alignment.Center,
|
||||||
|
padding: Dp = 0.dp,
|
||||||
|
content: @Composable BoxScope.() -> Unit
|
||||||
|
) {
|
||||||
|
Box(
|
||||||
|
modifier = modifier
|
||||||
|
.width(width)
|
||||||
|
.height(height)
|
||||||
|
.let { if (padding > 0.dp) it.padding(padding) else it },
|
||||||
|
contentAlignment = contentAlignment,
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 圆角Box组件,常用于卡片或容器
|
||||||
|
*
|
||||||
|
* @param modifier 额外的修饰符
|
||||||
|
* @param contentAlignment 内容对齐方式
|
||||||
|
* @param fillMaxWidth 是否填充最大宽度
|
||||||
|
* @param cornerRadius 圆角半径
|
||||||
|
* @param padding 内边距
|
||||||
|
* @param backgroundColor 背景颜色
|
||||||
|
* @param content 内容
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun RoundedBox(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
contentAlignment: Alignment = Alignment.TopStart,
|
||||||
|
fillMaxWidth: Boolean = true,
|
||||||
|
cornerRadius: Dp = 8.dp,
|
||||||
|
padding: Dp = SpacePaddingMedium,
|
||||||
|
backgroundColor: Color = MaterialTheme.colorScheme.surface,
|
||||||
|
content: @Composable BoxScope.() -> Unit
|
||||||
|
) {
|
||||||
|
Box(
|
||||||
|
modifier = modifier
|
||||||
|
.let { if (fillMaxWidth) it.fillMaxWidth() else it }
|
||||||
|
.clip(RoundedCornerShape(cornerRadius))
|
||||||
|
.padding(padding),
|
||||||
|
contentAlignment = contentAlignment,
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 带边框的Box组件,常用于强调区域
|
||||||
|
*
|
||||||
|
* @param modifier 额外的修饰符
|
||||||
|
* @param contentAlignment 内容对齐方式
|
||||||
|
* @param fillMaxWidth 是否填充最大宽度
|
||||||
|
* @param cornerRadius 圆角半径
|
||||||
|
* @param padding 内边距
|
||||||
|
* @param borderWidth 边框宽度
|
||||||
|
* @param borderColor 边框颜色
|
||||||
|
* @param shape 形状
|
||||||
|
* @param content 内容
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun BorderBox(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
contentAlignment: Alignment = Alignment.TopStart,
|
||||||
|
fillMaxWidth: Boolean = true,
|
||||||
|
cornerRadius: Dp = 8.dp,
|
||||||
|
padding: Dp = SpacePaddingMedium,
|
||||||
|
borderWidth: Dp = 1.dp,
|
||||||
|
borderColor: Color = MaterialTheme.colorScheme.outline,
|
||||||
|
shape: Shape = RoundedCornerShape(cornerRadius),
|
||||||
|
content: @Composable BoxScope.() -> Unit
|
||||||
|
) {
|
||||||
|
Box(
|
||||||
|
modifier = modifier
|
||||||
|
.let { if (fillMaxWidth) it.fillMaxWidth() else it }
|
||||||
|
.clip(shape)
|
||||||
|
.border(borderWidth, borderColor, shape)
|
||||||
|
.padding(padding),
|
||||||
|
contentAlignment = contentAlignment,
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 带小内边距的Box,常用于紧凑型布局
|
||||||
|
*
|
||||||
|
* @param modifier 额外的修饰符
|
||||||
|
* @param contentAlignment 内容对齐方式
|
||||||
|
* @param fillMaxSize 是否填充最大尺寸
|
||||||
|
* @param fillMaxWidth 是否填充最大宽度
|
||||||
|
* @param content 内容
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun SmallPaddingBox(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
contentAlignment: Alignment = Alignment.TopStart,
|
||||||
|
fillMaxSize: Boolean = false,
|
||||||
|
fillMaxWidth: Boolean = true,
|
||||||
|
content: @Composable BoxScope.() -> Unit
|
||||||
|
) {
|
||||||
|
AppBox(
|
||||||
|
modifier = modifier,
|
||||||
|
contentAlignment = contentAlignment,
|
||||||
|
fillMaxSize = fillMaxSize,
|
||||||
|
fillMaxWidth = fillMaxWidth,
|
||||||
|
padding = SpacePaddingSmall,
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 带中等内边距的Box,常用于普通布局
|
||||||
|
*
|
||||||
|
* @param modifier 额外的修饰符
|
||||||
|
* @param contentAlignment 内容对齐方式
|
||||||
|
* @param fillMaxSize 是否填充最大尺寸
|
||||||
|
* @param fillMaxWidth 是否填充最大宽度
|
||||||
|
* @param content 内容
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun MediumPaddingBox(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
contentAlignment: Alignment = Alignment.TopStart,
|
||||||
|
fillMaxSize: Boolean = false,
|
||||||
|
fillMaxWidth: Boolean = true,
|
||||||
|
content: @Composable BoxScope.() -> Unit
|
||||||
|
) {
|
||||||
|
AppBox(
|
||||||
|
modifier = modifier,
|
||||||
|
contentAlignment = contentAlignment,
|
||||||
|
fillMaxSize = fillMaxSize,
|
||||||
|
fillMaxWidth = fillMaxWidth,
|
||||||
|
padding = SpacePaddingMedium,
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 带大内边距的Box,常用于强调布局
|
||||||
|
*
|
||||||
|
* @param modifier 额外的修饰符
|
||||||
|
* @param contentAlignment 内容对齐方式
|
||||||
|
* @param fillMaxSize 是否填充最大尺寸
|
||||||
|
* @param fillMaxWidth 是否填充最大宽度
|
||||||
|
* @param content 内容
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun LargePaddingBox(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
contentAlignment: Alignment = Alignment.TopStart,
|
||||||
|
fillMaxSize: Boolean = false,
|
||||||
|
fillMaxWidth: Boolean = true,
|
||||||
|
content: @Composable BoxScope.() -> Unit
|
||||||
|
) {
|
||||||
|
AppBox(
|
||||||
|
modifier = modifier,
|
||||||
|
contentAlignment = contentAlignment,
|
||||||
|
fillMaxSize = fillMaxSize,
|
||||||
|
fillMaxWidth = fillMaxWidth,
|
||||||
|
padding = SpacePaddingLarge,
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,444 @@
|
|||||||
|
package com.joker.kit.core.designsystem.component
|
||||||
|
|
||||||
|
import androidx.compose.foundation.layout.Arrangement
|
||||||
|
import androidx.compose.foundation.layout.Column
|
||||||
|
import androidx.compose.foundation.layout.ColumnScope
|
||||||
|
import androidx.compose.foundation.layout.fillMaxSize
|
||||||
|
import androidx.compose.foundation.layout.fillMaxWidth
|
||||||
|
import androidx.compose.foundation.layout.padding
|
||||||
|
import androidx.compose.foundation.layout.wrapContentHeight
|
||||||
|
import androidx.compose.foundation.layout.wrapContentWidth
|
||||||
|
import androidx.compose.runtime.Composable
|
||||||
|
import androidx.compose.ui.Alignment
|
||||||
|
import androidx.compose.ui.Modifier
|
||||||
|
import androidx.compose.ui.unit.Dp
|
||||||
|
import androidx.compose.ui.unit.dp
|
||||||
|
import com.joker.kit.core.designsystem.theme.SpacePaddingLarge
|
||||||
|
import com.joker.kit.core.designsystem.theme.SpacePaddingMedium
|
||||||
|
import com.joker.kit.core.designsystem.theme.SpacePaddingSmall
|
||||||
|
import com.joker.kit.core.designsystem.theme.SpaceVerticalMedium
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 封装的Column组件,预设了常用的修饰符
|
||||||
|
*
|
||||||
|
* @param modifier 额外的修饰符
|
||||||
|
* @param verticalArrangement 垂直排列方式
|
||||||
|
* @param horizontalAlignment 水平对齐方式
|
||||||
|
* @param fillMaxWidth 是否填充最大宽度
|
||||||
|
* @param padding 内边距
|
||||||
|
* @param content 内容
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun AppColumn(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
verticalArrangement: Arrangement.Vertical = Arrangement.Top,
|
||||||
|
horizontalAlignment: Alignment.Horizontal = Alignment.Start,
|
||||||
|
fillMaxWidth: Boolean = true,
|
||||||
|
padding: Dp = 0.dp,
|
||||||
|
content: @Composable ColumnScope.() -> Unit
|
||||||
|
) {
|
||||||
|
val finalModifier = modifier
|
||||||
|
.let { if (fillMaxWidth) it.fillMaxWidth() else it }
|
||||||
|
.let { if (padding > 0.dp) it.padding(padding) else it }
|
||||||
|
|
||||||
|
Column(
|
||||||
|
modifier = finalModifier,
|
||||||
|
verticalArrangement = verticalArrangement,
|
||||||
|
horizontalAlignment = horizontalAlignment,
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 填充整个屏幕的Column,便于创建全屏页面布局
|
||||||
|
*
|
||||||
|
* @param modifier 额外的修饰符
|
||||||
|
* @param verticalArrangement 垂直排列方式
|
||||||
|
* @param horizontalAlignment 水平对齐方式
|
||||||
|
* @param padding 内边距
|
||||||
|
* @param content 内容
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun FullScreenColumn(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
verticalArrangement: Arrangement.Vertical = Arrangement.Top,
|
||||||
|
horizontalAlignment: Alignment.Horizontal = Alignment.Start,
|
||||||
|
padding: Dp = 0.dp,
|
||||||
|
content: @Composable ColumnScope.() -> Unit
|
||||||
|
) {
|
||||||
|
Column(
|
||||||
|
modifier = modifier
|
||||||
|
.fillMaxSize()
|
||||||
|
.let { if (padding > 0.dp) it.padding(padding) else it },
|
||||||
|
verticalArrangement = verticalArrangement,
|
||||||
|
horizontalAlignment = horizontalAlignment,
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 垂直居中的Column组件
|
||||||
|
*
|
||||||
|
* @param modifier 额外的修饰符
|
||||||
|
* @param fillMaxWidth 是否填充最大宽度
|
||||||
|
* @param padding 内边距
|
||||||
|
* @param content 内容
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun CenterColumn(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
fillMaxWidth: Boolean = true,
|
||||||
|
padding: Dp = 0.dp,
|
||||||
|
content: @Composable ColumnScope.() -> Unit
|
||||||
|
) {
|
||||||
|
AppColumn(
|
||||||
|
modifier = modifier,
|
||||||
|
verticalArrangement = Arrangement.Center,
|
||||||
|
horizontalAlignment = Alignment.CenterHorizontally,
|
||||||
|
fillMaxWidth = fillMaxWidth,
|
||||||
|
padding = padding,
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 顶部对齐的Column组件
|
||||||
|
*
|
||||||
|
* @param modifier 额外的修饰符
|
||||||
|
* @param horizontalAlignment 水平对齐方式
|
||||||
|
* @param fillMaxWidth 是否填充最大宽度
|
||||||
|
* @param padding 内边距
|
||||||
|
* @param content 内容
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun TopColumn(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
horizontalAlignment: Alignment.Horizontal = Alignment.Start,
|
||||||
|
fillMaxWidth: Boolean = true,
|
||||||
|
padding: Dp = 0.dp,
|
||||||
|
content: @Composable ColumnScope.() -> Unit
|
||||||
|
) {
|
||||||
|
AppColumn(
|
||||||
|
modifier = modifier,
|
||||||
|
verticalArrangement = Arrangement.Top,
|
||||||
|
horizontalAlignment = horizontalAlignment,
|
||||||
|
fillMaxWidth = fillMaxWidth,
|
||||||
|
padding = padding,
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 底部对齐的Column组件
|
||||||
|
*
|
||||||
|
* @param modifier 额外的修饰符
|
||||||
|
* @param horizontalAlignment 水平对齐方式
|
||||||
|
* @param fillMaxWidth 是否填充最大宽度
|
||||||
|
* @param padding 内边距
|
||||||
|
* @param content 内容
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun BottomColumn(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
horizontalAlignment: Alignment.Horizontal = Alignment.Start,
|
||||||
|
fillMaxWidth: Boolean = true,
|
||||||
|
padding: Dp = 0.dp,
|
||||||
|
content: @Composable ColumnScope.() -> Unit
|
||||||
|
) {
|
||||||
|
AppColumn(
|
||||||
|
modifier = modifier,
|
||||||
|
verticalArrangement = Arrangement.Bottom,
|
||||||
|
horizontalAlignment = horizontalAlignment,
|
||||||
|
fillMaxWidth = fillMaxWidth,
|
||||||
|
padding = padding,
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 两端对齐的Column组件
|
||||||
|
*
|
||||||
|
* @param modifier 额外的修饰符
|
||||||
|
* @param horizontalAlignment 水平对齐方式
|
||||||
|
* @param fillMaxWidth 是否填充最大宽度
|
||||||
|
* @param padding 内边距
|
||||||
|
* @param content 内容
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun SpaceBetweenColumn(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
horizontalAlignment: Alignment.Horizontal = Alignment.CenterHorizontally,
|
||||||
|
fillMaxWidth: Boolean = true,
|
||||||
|
padding: Dp = 0.dp,
|
||||||
|
content: @Composable ColumnScope.() -> Unit
|
||||||
|
) {
|
||||||
|
AppColumn(
|
||||||
|
modifier = modifier,
|
||||||
|
verticalArrangement = Arrangement.SpaceBetween,
|
||||||
|
horizontalAlignment = horizontalAlignment,
|
||||||
|
fillMaxWidth = fillMaxWidth,
|
||||||
|
padding = padding,
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 均匀分布的Column组件
|
||||||
|
*
|
||||||
|
* @param modifier 额外的修饰符
|
||||||
|
* @param horizontalAlignment 水平对齐方式
|
||||||
|
* @param fillMaxWidth 是否填充最大宽度
|
||||||
|
* @param padding 内边距
|
||||||
|
* @param content 内容
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun SpaceEvenlyColumn(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
horizontalAlignment: Alignment.Horizontal = Alignment.Start,
|
||||||
|
fillMaxWidth: Boolean = true,
|
||||||
|
padding: Dp = 0.dp,
|
||||||
|
content: @Composable ColumnScope.() -> Unit
|
||||||
|
) {
|
||||||
|
AppColumn(
|
||||||
|
modifier = modifier,
|
||||||
|
verticalArrangement = Arrangement.SpaceEvenly,
|
||||||
|
horizontalAlignment = horizontalAlignment,
|
||||||
|
fillMaxWidth = fillMaxWidth,
|
||||||
|
padding = padding,
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 居左对齐的Column组件
|
||||||
|
*
|
||||||
|
* @param modifier 额外的修饰符
|
||||||
|
* @param verticalArrangement 垂直排列方式
|
||||||
|
* @param fillMaxWidth 是否填充最大宽度
|
||||||
|
* @param padding 内边距
|
||||||
|
* @param content 内容
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun StartAlignColumn(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
verticalArrangement: Arrangement.Vertical = Arrangement.Top,
|
||||||
|
fillMaxWidth: Boolean = true,
|
||||||
|
padding: Dp = 0.dp,
|
||||||
|
content: @Composable ColumnScope.() -> Unit
|
||||||
|
) {
|
||||||
|
AppColumn(
|
||||||
|
modifier = modifier,
|
||||||
|
verticalArrangement = verticalArrangement,
|
||||||
|
horizontalAlignment = Alignment.Start,
|
||||||
|
fillMaxWidth = fillMaxWidth,
|
||||||
|
padding = padding,
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 居右对齐的Column组件
|
||||||
|
*
|
||||||
|
* @param modifier 额外的修饰符
|
||||||
|
* @param verticalArrangement 垂直排列方式
|
||||||
|
* @param fillMaxWidth 是否填充最大宽度
|
||||||
|
* @param padding 内边距
|
||||||
|
* @param content 内容
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun EndAlignColumn(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
verticalArrangement: Arrangement.Vertical = Arrangement.Top,
|
||||||
|
fillMaxWidth: Boolean = true,
|
||||||
|
padding: Dp = 0.dp,
|
||||||
|
content: @Composable ColumnScope.() -> Unit
|
||||||
|
) {
|
||||||
|
AppColumn(
|
||||||
|
modifier = modifier,
|
||||||
|
verticalArrangement = verticalArrangement,
|
||||||
|
horizontalAlignment = Alignment.End,
|
||||||
|
fillMaxWidth = fillMaxWidth,
|
||||||
|
padding = padding,
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 内容包裹的Column,不会填充最大宽度
|
||||||
|
*
|
||||||
|
* @param modifier 额外的修饰符
|
||||||
|
* @param verticalArrangement 垂直排列方式
|
||||||
|
* @param horizontalAlignment 水平对齐方式
|
||||||
|
* @param padding 内边距
|
||||||
|
* @param content 内容
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun WrapColumn(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
verticalArrangement: Arrangement.Vertical = Arrangement.Top,
|
||||||
|
horizontalAlignment: Alignment.Horizontal = Alignment.Start,
|
||||||
|
padding: Dp = 0.dp,
|
||||||
|
content: @Composable ColumnScope.() -> Unit
|
||||||
|
) {
|
||||||
|
Column(
|
||||||
|
modifier = modifier
|
||||||
|
.wrapContentWidth()
|
||||||
|
.wrapContentHeight()
|
||||||
|
.let { if (padding > 0.dp) it.padding(padding) else it },
|
||||||
|
verticalArrangement = verticalArrangement,
|
||||||
|
horizontalAlignment = horizontalAlignment,
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 垂直列表组件,带有预设的垂直间距
|
||||||
|
*
|
||||||
|
* @param modifier 额外的修饰符
|
||||||
|
* @param verticalArrangement 垂直排列方式
|
||||||
|
* @param horizontalAlignment 水平对齐方式
|
||||||
|
* @param fillMaxWidth 是否填充最大宽度
|
||||||
|
* @param padding 内边距
|
||||||
|
* @param content 内容
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun VerticalList(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
verticalArrangement: Arrangement.Vertical = Arrangement.spacedBy(SpaceVerticalMedium),
|
||||||
|
horizontalAlignment: Alignment.Horizontal = Alignment.Start,
|
||||||
|
fillMaxWidth: Boolean = true,
|
||||||
|
padding: Dp = SpacePaddingMedium,
|
||||||
|
content: @Composable ColumnScope.() -> Unit
|
||||||
|
) {
|
||||||
|
AppColumn(
|
||||||
|
modifier = modifier,
|
||||||
|
verticalArrangement = verticalArrangement,
|
||||||
|
horizontalAlignment = horizontalAlignment,
|
||||||
|
fillMaxWidth = fillMaxWidth,
|
||||||
|
padding = padding,
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 卡片内容列表,适用于卡片内部的内容排列
|
||||||
|
*
|
||||||
|
* @param modifier 额外的修饰符
|
||||||
|
* @param verticalArrangement 垂直排列方式
|
||||||
|
* @param horizontalAlignment 水平对齐方式
|
||||||
|
* @param padding 内边距
|
||||||
|
* @param content 内容
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun CardContentList(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
verticalArrangement: Arrangement.Vertical = Arrangement.spacedBy(SpaceVerticalMedium),
|
||||||
|
horizontalAlignment: Alignment.Horizontal = Alignment.Start,
|
||||||
|
padding: Dp = SpacePaddingMedium,
|
||||||
|
content: @Composable ColumnScope.() -> Unit
|
||||||
|
) {
|
||||||
|
Column(
|
||||||
|
modifier = modifier
|
||||||
|
.fillMaxWidth()
|
||||||
|
.padding(padding),
|
||||||
|
verticalArrangement = verticalArrangement,
|
||||||
|
horizontalAlignment = horizontalAlignment,
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 带小内边距的Column,常用于紧凑型布局
|
||||||
|
*
|
||||||
|
* @param modifier 额外的修饰符
|
||||||
|
* @param verticalArrangement 垂直排列方式
|
||||||
|
* @param horizontalAlignment 水平对齐方式
|
||||||
|
* @param fillMaxWidth 是否填充最大宽度
|
||||||
|
* @param content 内容
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun SmallPaddingColumn(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
verticalArrangement: Arrangement.Vertical = Arrangement.Top,
|
||||||
|
horizontalAlignment: Alignment.Horizontal = Alignment.Start,
|
||||||
|
fillMaxWidth: Boolean = true,
|
||||||
|
content: @Composable ColumnScope.() -> Unit
|
||||||
|
) {
|
||||||
|
AppColumn(
|
||||||
|
modifier = modifier,
|
||||||
|
verticalArrangement = verticalArrangement,
|
||||||
|
horizontalAlignment = horizontalAlignment,
|
||||||
|
fillMaxWidth = fillMaxWidth,
|
||||||
|
padding = SpacePaddingSmall,
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 带中等内边距的Column,常用于普通布局
|
||||||
|
*
|
||||||
|
* @param modifier 额外的修饰符
|
||||||
|
* @param verticalArrangement 垂直排列方式
|
||||||
|
* @param horizontalAlignment 水平对齐方式
|
||||||
|
* @param fillMaxWidth 是否填充最大宽度
|
||||||
|
* @param content 内容
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun MediumPaddingColumn(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
verticalArrangement: Arrangement.Vertical = Arrangement.Top,
|
||||||
|
horizontalAlignment: Alignment.Horizontal = Alignment.Start,
|
||||||
|
fillMaxWidth: Boolean = true,
|
||||||
|
content: @Composable ColumnScope.() -> Unit
|
||||||
|
) {
|
||||||
|
AppColumn(
|
||||||
|
modifier = modifier,
|
||||||
|
verticalArrangement = verticalArrangement,
|
||||||
|
horizontalAlignment = horizontalAlignment,
|
||||||
|
fillMaxWidth = fillMaxWidth,
|
||||||
|
padding = SpacePaddingMedium,
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 带大内边距的Column,常用于强调布局
|
||||||
|
*
|
||||||
|
* @param modifier 额外的修饰符
|
||||||
|
* @param verticalArrangement 垂直排列方式
|
||||||
|
* @param horizontalAlignment 水平对齐方式
|
||||||
|
* @param fillMaxWidth 是否填充最大宽度
|
||||||
|
* @param content 内容
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun LargePaddingColumn(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
verticalArrangement: Arrangement.Vertical = Arrangement.Top,
|
||||||
|
horizontalAlignment: Alignment.Horizontal = Alignment.Start,
|
||||||
|
fillMaxWidth: Boolean = true,
|
||||||
|
content: @Composable ColumnScope.() -> Unit
|
||||||
|
) {
|
||||||
|
AppColumn(
|
||||||
|
modifier = modifier,
|
||||||
|
verticalArrangement = verticalArrangement,
|
||||||
|
horizontalAlignment = horizontalAlignment,
|
||||||
|
fillMaxWidth = fillMaxWidth,
|
||||||
|
padding = SpacePaddingLarge,
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,306 @@
|
|||||||
|
package com.joker.kit.core.designsystem.component
|
||||||
|
|
||||||
|
import androidx.compose.foundation.layout.Arrangement
|
||||||
|
import androidx.compose.foundation.layout.PaddingValues
|
||||||
|
import androidx.compose.foundation.layout.fillMaxSize
|
||||||
|
import androidx.compose.foundation.layout.fillMaxWidth
|
||||||
|
import androidx.compose.foundation.lazy.LazyColumn
|
||||||
|
import androidx.compose.foundation.lazy.LazyListScope
|
||||||
|
import androidx.compose.foundation.lazy.LazyListState
|
||||||
|
import androidx.compose.foundation.lazy.LazyRow
|
||||||
|
import androidx.compose.foundation.lazy.rememberLazyListState
|
||||||
|
import androidx.compose.runtime.Composable
|
||||||
|
import androidx.compose.ui.Alignment
|
||||||
|
import androidx.compose.ui.Modifier
|
||||||
|
import androidx.compose.ui.unit.Dp
|
||||||
|
import androidx.compose.ui.unit.dp
|
||||||
|
import com.joker.kit.core.designsystem.theme.SpacePaddingLarge
|
||||||
|
import com.joker.kit.core.designsystem.theme.SpacePaddingMedium
|
||||||
|
import com.joker.kit.core.designsystem.theme.SpacePaddingSmall
|
||||||
|
import com.joker.kit.core.designsystem.theme.SpaceVerticalSmall
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 垂直懒加载列表组件,预设的常用属性
|
||||||
|
*
|
||||||
|
* @param modifier 额外的修饰符
|
||||||
|
* @param listState 列表状态
|
||||||
|
* @param contentPadding 内容内边距
|
||||||
|
* @param verticalArrangement 垂直排列方式
|
||||||
|
* @param horizontalAlignment 水平对齐方式
|
||||||
|
* @param reverseLayout 是否反向布局
|
||||||
|
* @param fillMaxSize 是否填充最大尺寸
|
||||||
|
* @param fillMaxWidth 是否填充最大宽度(当fillMaxSize为false时生效)
|
||||||
|
* @param content 列表内容构建器
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun AppLazyColumn(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
listState: LazyListState = rememberLazyListState(),
|
||||||
|
contentPadding: PaddingValues = PaddingValues(0.dp),
|
||||||
|
verticalArrangement: Arrangement.Vertical = Arrangement.Top,
|
||||||
|
horizontalAlignment: Alignment.Horizontal = Alignment.Start,
|
||||||
|
reverseLayout: Boolean = false,
|
||||||
|
fillMaxSize: Boolean = false,
|
||||||
|
fillMaxWidth: Boolean = true,
|
||||||
|
content: LazyListScope.() -> Unit
|
||||||
|
) {
|
||||||
|
LazyColumn(
|
||||||
|
modifier = modifier.let {
|
||||||
|
if (fillMaxSize) it.fillMaxSize()
|
||||||
|
else if (fillMaxWidth) it.fillMaxWidth()
|
||||||
|
else it
|
||||||
|
},
|
||||||
|
state = listState,
|
||||||
|
contentPadding = contentPadding,
|
||||||
|
verticalArrangement = verticalArrangement,
|
||||||
|
horizontalAlignment = horizontalAlignment,
|
||||||
|
reverseLayout = reverseLayout,
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 带小内边距的垂直懒加载列表
|
||||||
|
*
|
||||||
|
* @param modifier 额外的修饰符
|
||||||
|
* @param listState 列表状态
|
||||||
|
* @param verticalArrangement 垂直排列方式
|
||||||
|
* @param horizontalAlignment 水平对齐方式
|
||||||
|
* @param reverseLayout 是否反向布局
|
||||||
|
* @param fillMaxSize 是否填充最大尺寸
|
||||||
|
* @param fillMaxWidth 是否填充最大宽度
|
||||||
|
* @param content 列表内容构建器
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun SmallPaddingLazyColumn(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
listState: LazyListState = rememberLazyListState(),
|
||||||
|
verticalArrangement: Arrangement.Vertical = Arrangement.Top,
|
||||||
|
horizontalAlignment: Alignment.Horizontal = Alignment.Start,
|
||||||
|
reverseLayout: Boolean = false,
|
||||||
|
fillMaxSize: Boolean = false,
|
||||||
|
fillMaxWidth: Boolean = true,
|
||||||
|
content: LazyListScope.() -> Unit
|
||||||
|
) {
|
||||||
|
AppLazyColumn(
|
||||||
|
modifier = modifier,
|
||||||
|
listState = listState,
|
||||||
|
contentPadding = PaddingValues(SpacePaddingSmall),
|
||||||
|
verticalArrangement = verticalArrangement,
|
||||||
|
horizontalAlignment = horizontalAlignment,
|
||||||
|
reverseLayout = reverseLayout,
|
||||||
|
fillMaxSize = fillMaxSize,
|
||||||
|
fillMaxWidth = fillMaxWidth,
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 带中等内边距的垂直懒加载列表
|
||||||
|
*
|
||||||
|
* @param modifier 额外的修饰符
|
||||||
|
* @param listState 列表状态
|
||||||
|
* @param verticalArrangement 垂直排列方式
|
||||||
|
* @param horizontalAlignment 水平对齐方式
|
||||||
|
* @param reverseLayout 是否反向布局
|
||||||
|
* @param fillMaxSize 是否填充最大尺寸
|
||||||
|
* @param fillMaxWidth 是否填充最大宽度
|
||||||
|
* @param content 列表内容构建器
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun MediumPaddingLazyColumn(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
listState: LazyListState = rememberLazyListState(),
|
||||||
|
verticalArrangement: Arrangement.Vertical = Arrangement.Top,
|
||||||
|
horizontalAlignment: Alignment.Horizontal = Alignment.Start,
|
||||||
|
reverseLayout: Boolean = false,
|
||||||
|
fillMaxSize: Boolean = false,
|
||||||
|
fillMaxWidth: Boolean = true,
|
||||||
|
content: LazyListScope.() -> Unit
|
||||||
|
) {
|
||||||
|
AppLazyColumn(
|
||||||
|
modifier = modifier,
|
||||||
|
listState = listState,
|
||||||
|
contentPadding = PaddingValues(SpacePaddingMedium),
|
||||||
|
verticalArrangement = verticalArrangement,
|
||||||
|
horizontalAlignment = horizontalAlignment,
|
||||||
|
reverseLayout = reverseLayout,
|
||||||
|
fillMaxSize = fillMaxSize,
|
||||||
|
fillMaxWidth = fillMaxWidth,
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 带大内边距的垂直懒加载列表
|
||||||
|
*
|
||||||
|
* @param modifier 额外的修饰符
|
||||||
|
* @param listState 列表状态
|
||||||
|
* @param verticalArrangement 垂直排列方式
|
||||||
|
* @param horizontalAlignment 水平对齐方式
|
||||||
|
* @param reverseLayout 是否反向布局
|
||||||
|
* @param fillMaxSize 是否填充最大尺寸
|
||||||
|
* @param fillMaxWidth 是否填充最大宽度
|
||||||
|
* @param content 列表内容构建器
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun LargePaddingLazyColumn(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
listState: LazyListState = rememberLazyListState(),
|
||||||
|
verticalArrangement: Arrangement.Vertical = Arrangement.Top,
|
||||||
|
horizontalAlignment: Alignment.Horizontal = Alignment.Start,
|
||||||
|
reverseLayout: Boolean = false,
|
||||||
|
fillMaxSize: Boolean = false,
|
||||||
|
fillMaxWidth: Boolean = true,
|
||||||
|
content: LazyListScope.() -> Unit
|
||||||
|
) {
|
||||||
|
AppLazyColumn(
|
||||||
|
modifier = modifier,
|
||||||
|
listState = listState,
|
||||||
|
contentPadding = PaddingValues(SpacePaddingLarge),
|
||||||
|
verticalArrangement = verticalArrangement,
|
||||||
|
horizontalAlignment = horizontalAlignment,
|
||||||
|
reverseLayout = reverseLayout,
|
||||||
|
fillMaxSize = fillMaxSize,
|
||||||
|
fillMaxWidth = fillMaxWidth,
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 垂直列表项目,预设了间距
|
||||||
|
*
|
||||||
|
* @param modifier 额外的修饰符
|
||||||
|
* @param listState 列表状态
|
||||||
|
* @param contentPadding 内容内边距
|
||||||
|
* @param itemSpacing 列表项间距
|
||||||
|
* @param horizontalAlignment 水平对齐方式
|
||||||
|
* @param reverseLayout 是否反向布局
|
||||||
|
* @param fillMaxSize 是否填充最大尺寸
|
||||||
|
* @param fillMaxWidth 是否填充最大宽度
|
||||||
|
* @param content 列表内容构建器
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun VerticalListItems(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
listState: LazyListState = rememberLazyListState(),
|
||||||
|
contentPadding: PaddingValues = PaddingValues(SpacePaddingMedium),
|
||||||
|
itemSpacing: Dp = SpaceVerticalSmall,
|
||||||
|
horizontalAlignment: Alignment.Horizontal = Alignment.Start,
|
||||||
|
reverseLayout: Boolean = false,
|
||||||
|
fillMaxSize: Boolean = false,
|
||||||
|
fillMaxWidth: Boolean = true,
|
||||||
|
content: LazyListScope.() -> Unit
|
||||||
|
) {
|
||||||
|
AppLazyColumn(
|
||||||
|
modifier = modifier,
|
||||||
|
listState = listState,
|
||||||
|
contentPadding = contentPadding,
|
||||||
|
verticalArrangement = Arrangement.spacedBy(itemSpacing),
|
||||||
|
horizontalAlignment = horizontalAlignment,
|
||||||
|
reverseLayout = reverseLayout,
|
||||||
|
fillMaxSize = fillMaxSize,
|
||||||
|
fillMaxWidth = fillMaxWidth,
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 水平懒加载列表组件,预设的常用属性
|
||||||
|
*
|
||||||
|
* @param modifier 额外的修饰符
|
||||||
|
* @param listState 列表状态
|
||||||
|
* @param contentPadding 内容内边距
|
||||||
|
* @param horizontalArrangement 水平排列方式
|
||||||
|
* @param verticalAlignment 垂直对齐方式
|
||||||
|
* @param reverseLayout 是否反向布局
|
||||||
|
* @param content 列表内容构建器
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun AppLazyRow(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
listState: LazyListState = rememberLazyListState(),
|
||||||
|
contentPadding: PaddingValues = PaddingValues(0.dp),
|
||||||
|
horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
|
||||||
|
verticalAlignment: Alignment.Vertical = Alignment.CenterVertically,
|
||||||
|
reverseLayout: Boolean = false,
|
||||||
|
content: LazyListScope.() -> Unit
|
||||||
|
) {
|
||||||
|
LazyRow(
|
||||||
|
modifier = modifier,
|
||||||
|
state = listState,
|
||||||
|
contentPadding = contentPadding,
|
||||||
|
horizontalArrangement = horizontalArrangement,
|
||||||
|
verticalAlignment = verticalAlignment,
|
||||||
|
reverseLayout = reverseLayout,
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 带小内边距的水平懒加载列表
|
||||||
|
*
|
||||||
|
* @param modifier 额外的修饰符
|
||||||
|
* @param listState 列表状态
|
||||||
|
* @param horizontalArrangement 水平排列方式
|
||||||
|
* @param verticalAlignment 垂直对齐方式
|
||||||
|
* @param reverseLayout 是否反向布局
|
||||||
|
* @param content 列表内容构建器
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun SmallPaddingLazyRow(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
listState: LazyListState = rememberLazyListState(),
|
||||||
|
horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
|
||||||
|
verticalAlignment: Alignment.Vertical = Alignment.CenterVertically,
|
||||||
|
reverseLayout: Boolean = false,
|
||||||
|
content: LazyListScope.() -> Unit
|
||||||
|
) {
|
||||||
|
AppLazyRow(
|
||||||
|
modifier = modifier,
|
||||||
|
listState = listState,
|
||||||
|
contentPadding = PaddingValues(SpacePaddingSmall),
|
||||||
|
horizontalArrangement = horizontalArrangement,
|
||||||
|
verticalAlignment = verticalAlignment,
|
||||||
|
reverseLayout = reverseLayout,
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 带中等内边距的水平懒加载列表
|
||||||
|
*
|
||||||
|
* @param modifier 额外的修饰符
|
||||||
|
* @param listState 列表状态
|
||||||
|
* @param horizontalArrangement 水平排列方式
|
||||||
|
* @param verticalAlignment 垂直对齐方式
|
||||||
|
* @param reverseLayout 是否反向布局
|
||||||
|
* @param content 列表内容构建器
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun MediumPaddingLazyRow(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
listState: LazyListState = rememberLazyListState(),
|
||||||
|
horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
|
||||||
|
verticalAlignment: Alignment.Vertical = Alignment.CenterVertically,
|
||||||
|
reverseLayout: Boolean = false,
|
||||||
|
content: LazyListScope.() -> Unit
|
||||||
|
) {
|
||||||
|
AppLazyRow(
|
||||||
|
modifier = modifier,
|
||||||
|
listState = listState,
|
||||||
|
contentPadding = PaddingValues(SpacePaddingMedium),
|
||||||
|
horizontalArrangement = horizontalArrangement,
|
||||||
|
verticalAlignment = verticalAlignment,
|
||||||
|
reverseLayout = reverseLayout,
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,347 @@
|
|||||||
|
package com.joker.kit.core.designsystem.component
|
||||||
|
|
||||||
|
import androidx.compose.foundation.layout.Arrangement
|
||||||
|
import androidx.compose.foundation.layout.Row
|
||||||
|
import androidx.compose.foundation.layout.RowScope
|
||||||
|
import androidx.compose.foundation.layout.fillMaxWidth
|
||||||
|
import androidx.compose.foundation.layout.padding
|
||||||
|
import androidx.compose.foundation.layout.wrapContentWidth
|
||||||
|
import androidx.compose.runtime.Composable
|
||||||
|
import androidx.compose.ui.Alignment
|
||||||
|
import androidx.compose.ui.Modifier
|
||||||
|
import androidx.compose.ui.unit.Dp
|
||||||
|
import androidx.compose.ui.unit.dp
|
||||||
|
import com.joker.kit.core.designsystem.theme.SpaceHorizontalSmall
|
||||||
|
import com.joker.kit.core.designsystem.theme.SpacePaddingLarge
|
||||||
|
import com.joker.kit.core.designsystem.theme.SpacePaddingMedium
|
||||||
|
import com.joker.kit.core.designsystem.theme.SpacePaddingSmall
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 封装的Row组件,预设了常用的修饰符
|
||||||
|
*
|
||||||
|
* @param modifier 额外的修饰符
|
||||||
|
* @param horizontalArrangement 水平排列方式
|
||||||
|
* @param verticalAlignment 垂直对齐方式
|
||||||
|
* @param fillMaxWidth 是否填充最大宽度
|
||||||
|
* @param padding 内边距
|
||||||
|
* @param content 内容
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun AppRow(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
|
||||||
|
verticalAlignment: Alignment.Vertical = Alignment.CenterVertically,
|
||||||
|
fillMaxWidth: Boolean = true,
|
||||||
|
padding: Dp = 0.dp,
|
||||||
|
content: @Composable RowScope.() -> Unit
|
||||||
|
) {
|
||||||
|
val finalModifier = modifier
|
||||||
|
.let { if (fillMaxWidth) it.fillMaxWidth() else it }
|
||||||
|
.let { if (padding > 0.dp) it.padding(padding) else it }
|
||||||
|
|
||||||
|
Row(
|
||||||
|
modifier = finalModifier,
|
||||||
|
horizontalArrangement = horizontalArrangement,
|
||||||
|
verticalAlignment = verticalAlignment,
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 水平居中的Row组件
|
||||||
|
*
|
||||||
|
* @param modifier 额外的修饰符
|
||||||
|
* @param fillMaxWidth 是否填充最大宽度
|
||||||
|
* @param padding 内边距
|
||||||
|
* @param content 内容
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun CenterRow(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
fillMaxWidth: Boolean = true,
|
||||||
|
padding: Dp = 0.dp,
|
||||||
|
content: @Composable RowScope.() -> Unit
|
||||||
|
) {
|
||||||
|
AppRow(
|
||||||
|
modifier = modifier,
|
||||||
|
horizontalArrangement = Arrangement.Center,
|
||||||
|
verticalAlignment = Alignment.CenterVertically,
|
||||||
|
fillMaxWidth = fillMaxWidth,
|
||||||
|
padding = padding,
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 两端对齐的Row组件
|
||||||
|
*
|
||||||
|
* @param modifier 额外的修饰符
|
||||||
|
* @param fillMaxWidth 是否填充最大宽度
|
||||||
|
* @param padding 内边距
|
||||||
|
* @param content 内容
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun SpaceBetweenRow(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
fillMaxWidth: Boolean = true,
|
||||||
|
padding: Dp = 0.dp,
|
||||||
|
content: @Composable RowScope.() -> Unit
|
||||||
|
) {
|
||||||
|
AppRow(
|
||||||
|
modifier = modifier,
|
||||||
|
horizontalArrangement = Arrangement.SpaceBetween,
|
||||||
|
verticalAlignment = Alignment.CenterVertically,
|
||||||
|
fillMaxWidth = fillMaxWidth,
|
||||||
|
padding = padding,
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 均匀分布的Row组件
|
||||||
|
*
|
||||||
|
* @param modifier 额外的修饰符
|
||||||
|
* @param fillMaxWidth 是否填充最大宽度
|
||||||
|
* @param padding 内边距
|
||||||
|
* @param content 内容
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun SpaceEvenlyRow(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
fillMaxWidth: Boolean = true,
|
||||||
|
padding: Dp = 0.dp,
|
||||||
|
content: @Composable RowScope.() -> Unit
|
||||||
|
) {
|
||||||
|
AppRow(
|
||||||
|
modifier = modifier,
|
||||||
|
horizontalArrangement = Arrangement.SpaceEvenly,
|
||||||
|
verticalAlignment = Alignment.CenterVertically,
|
||||||
|
fillMaxWidth = fillMaxWidth,
|
||||||
|
padding = padding,
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 平均分布的Row组件(间距均匀)
|
||||||
|
*
|
||||||
|
* @param modifier 额外的修饰符
|
||||||
|
* @param fillMaxWidth 是否填充最大宽度
|
||||||
|
* @param padding 内边距
|
||||||
|
* @param content 内容
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun SpaceAroundRow(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
fillMaxWidth: Boolean = true,
|
||||||
|
padding: Dp = 0.dp,
|
||||||
|
content: @Composable RowScope.() -> Unit
|
||||||
|
) {
|
||||||
|
AppRow(
|
||||||
|
modifier = modifier,
|
||||||
|
horizontalArrangement = Arrangement.SpaceAround,
|
||||||
|
verticalAlignment = Alignment.CenterVertically,
|
||||||
|
fillMaxWidth = fillMaxWidth,
|
||||||
|
padding = padding,
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 左对齐的Row组件
|
||||||
|
*
|
||||||
|
* @param modifier 额外的修饰符
|
||||||
|
* @param fillMaxWidth 是否填充最大宽度
|
||||||
|
* @param padding 内边距
|
||||||
|
* @param content 内容
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun StartRow(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
fillMaxWidth: Boolean = true,
|
||||||
|
padding: Dp = 0.dp,
|
||||||
|
content: @Composable RowScope.() -> Unit
|
||||||
|
) {
|
||||||
|
AppRow(
|
||||||
|
modifier = modifier,
|
||||||
|
horizontalArrangement = Arrangement.Start,
|
||||||
|
verticalAlignment = Alignment.CenterVertically,
|
||||||
|
fillMaxWidth = fillMaxWidth,
|
||||||
|
padding = padding,
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 右对齐的Row组件
|
||||||
|
*
|
||||||
|
* @param modifier 额外的修饰符
|
||||||
|
* @param fillMaxWidth 是否填充最大宽度
|
||||||
|
* @param padding 内边距
|
||||||
|
* @param content 内容
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun EndRow(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
fillMaxWidth: Boolean = true,
|
||||||
|
padding: Dp = 0.dp,
|
||||||
|
content: @Composable RowScope.() -> Unit
|
||||||
|
) {
|
||||||
|
AppRow(
|
||||||
|
modifier = modifier,
|
||||||
|
horizontalArrangement = Arrangement.End,
|
||||||
|
verticalAlignment = Alignment.CenterVertically,
|
||||||
|
fillMaxWidth = fillMaxWidth,
|
||||||
|
padding = padding,
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 内容包裹的Row,不会填充最大宽度
|
||||||
|
*
|
||||||
|
* @param modifier 额外的修饰符
|
||||||
|
* @param horizontalArrangement 水平排列方式
|
||||||
|
* @param verticalAlignment 垂直对齐方式
|
||||||
|
* @param padding 内边距
|
||||||
|
* @param content 内容
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun WrapRow(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
|
||||||
|
verticalAlignment: Alignment.Vertical = Alignment.CenterVertically,
|
||||||
|
padding: Dp = 0.dp,
|
||||||
|
content: @Composable RowScope.() -> Unit
|
||||||
|
) {
|
||||||
|
Row(
|
||||||
|
modifier = modifier
|
||||||
|
.wrapContentWidth()
|
||||||
|
.let { if (padding > 0.dp) it.padding(padding) else it },
|
||||||
|
horizontalArrangement = horizontalArrangement,
|
||||||
|
verticalAlignment = verticalAlignment,
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 水平列表组件,带有预设的水平间距
|
||||||
|
*
|
||||||
|
* @param modifier 额外的修饰符
|
||||||
|
* @param horizontalArrangement 水平排列方式
|
||||||
|
* @param verticalAlignment 垂直对齐方式
|
||||||
|
* @param fillMaxWidth 是否填充最大宽度
|
||||||
|
* @param padding 内边距
|
||||||
|
* @param content 内容
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun HorizontalList(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
horizontalArrangement: Arrangement.Horizontal = Arrangement.spacedBy(SpaceHorizontalSmall),
|
||||||
|
verticalAlignment: Alignment.Vertical = Alignment.CenterVertically,
|
||||||
|
fillMaxWidth: Boolean = true,
|
||||||
|
padding: Dp = SpacePaddingMedium,
|
||||||
|
content: @Composable RowScope.() -> Unit
|
||||||
|
) {
|
||||||
|
AppRow(
|
||||||
|
modifier = modifier,
|
||||||
|
horizontalArrangement = horizontalArrangement,
|
||||||
|
verticalAlignment = verticalAlignment,
|
||||||
|
fillMaxWidth = fillMaxWidth,
|
||||||
|
padding = padding,
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 带小内边距的Row,常用于紧凑型布局
|
||||||
|
*
|
||||||
|
* @param modifier 额外的修饰符
|
||||||
|
* @param horizontalArrangement 水平排列方式
|
||||||
|
* @param verticalAlignment 垂直对齐方式
|
||||||
|
* @param fillMaxWidth 是否填充最大宽度
|
||||||
|
* @param content 内容
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun SmallPaddingRow(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
|
||||||
|
verticalAlignment: Alignment.Vertical = Alignment.CenterVertically,
|
||||||
|
fillMaxWidth: Boolean = true,
|
||||||
|
content: @Composable RowScope.() -> Unit
|
||||||
|
) {
|
||||||
|
AppRow(
|
||||||
|
modifier = modifier,
|
||||||
|
horizontalArrangement = horizontalArrangement,
|
||||||
|
verticalAlignment = verticalAlignment,
|
||||||
|
fillMaxWidth = fillMaxWidth,
|
||||||
|
padding = SpacePaddingSmall,
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 带中等内边距的Row,常用于普通布局
|
||||||
|
*
|
||||||
|
* @param modifier 额外的修饰符
|
||||||
|
* @param horizontalArrangement 水平排列方式
|
||||||
|
* @param verticalAlignment 垂直对齐方式
|
||||||
|
* @param fillMaxWidth 是否填充最大宽度
|
||||||
|
* @param content 内容
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun MediumPaddingRow(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
|
||||||
|
verticalAlignment: Alignment.Vertical = Alignment.CenterVertically,
|
||||||
|
fillMaxWidth: Boolean = true,
|
||||||
|
content: @Composable RowScope.() -> Unit
|
||||||
|
) {
|
||||||
|
AppRow(
|
||||||
|
modifier = modifier,
|
||||||
|
horizontalArrangement = horizontalArrangement,
|
||||||
|
verticalAlignment = verticalAlignment,
|
||||||
|
fillMaxWidth = fillMaxWidth,
|
||||||
|
padding = SpacePaddingMedium,
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 带大内边距的Row,常用于强调布局
|
||||||
|
*
|
||||||
|
* @param modifier 额外的修饰符
|
||||||
|
* @param horizontalArrangement 水平排列方式
|
||||||
|
* @param verticalAlignment 垂直对齐方式
|
||||||
|
* @param fillMaxWidth 是否填充最大宽度
|
||||||
|
* @param content 内容
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun LargePaddingRow(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
|
||||||
|
verticalAlignment: Alignment.Vertical = Alignment.CenterVertically,
|
||||||
|
fillMaxWidth: Boolean = true,
|
||||||
|
content: @Composable RowScope.() -> Unit
|
||||||
|
) {
|
||||||
|
AppRow(
|
||||||
|
modifier = modifier,
|
||||||
|
horizontalArrangement = horizontalArrangement,
|
||||||
|
verticalAlignment = verticalAlignment,
|
||||||
|
fillMaxWidth = fillMaxWidth,
|
||||||
|
padding = SpacePaddingLarge,
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,235 @@
|
|||||||
|
package com.joker.kit.core.designsystem.component
|
||||||
|
|
||||||
|
import androidx.compose.foundation.gestures.FlingBehavior
|
||||||
|
import androidx.compose.foundation.gestures.ScrollableDefaults
|
||||||
|
import androidx.compose.foundation.horizontalScroll
|
||||||
|
import androidx.compose.foundation.layout.Arrangement
|
||||||
|
import androidx.compose.foundation.layout.Column
|
||||||
|
import androidx.compose.foundation.layout.ColumnScope
|
||||||
|
import androidx.compose.foundation.layout.Row
|
||||||
|
import androidx.compose.foundation.layout.RowScope
|
||||||
|
import androidx.compose.foundation.layout.fillMaxSize
|
||||||
|
import androidx.compose.foundation.layout.fillMaxWidth
|
||||||
|
import androidx.compose.foundation.layout.padding
|
||||||
|
import androidx.compose.foundation.rememberScrollState
|
||||||
|
import androidx.compose.foundation.verticalScroll
|
||||||
|
import androidx.compose.runtime.Composable
|
||||||
|
import androidx.compose.ui.Alignment
|
||||||
|
import androidx.compose.ui.Modifier
|
||||||
|
import androidx.compose.ui.unit.Dp
|
||||||
|
import androidx.compose.ui.unit.dp
|
||||||
|
import com.joker.kit.core.designsystem.theme.SpacePaddingLarge
|
||||||
|
import com.joker.kit.core.designsystem.theme.SpacePaddingMedium
|
||||||
|
import com.joker.kit.core.designsystem.theme.SpacePaddingSmall
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 垂直滚动组件,包含预设的修饰符和属性
|
||||||
|
*
|
||||||
|
* @param modifier 额外的修饰符
|
||||||
|
* @param padding 内边距
|
||||||
|
* @param horizontalAlignment 水平对齐方式
|
||||||
|
* @param verticalArrangement 垂直排列方式
|
||||||
|
* @param fillMaxSize 是否填充最大尺寸
|
||||||
|
* @param fillMaxWidth 是否填充最大宽度 (仅当fillMaxSize为false时生效)
|
||||||
|
* @param flingBehavior 滑动行为
|
||||||
|
* @param content 内容
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun VerticalScroll(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
padding: Dp = 0.dp,
|
||||||
|
horizontalAlignment: Alignment.Horizontal = Alignment.Start,
|
||||||
|
verticalArrangement: Arrangement.Vertical = Arrangement.Top,
|
||||||
|
fillMaxSize: Boolean = false,
|
||||||
|
fillMaxWidth: Boolean = true,
|
||||||
|
flingBehavior: FlingBehavior = ScrollableDefaults.flingBehavior(),
|
||||||
|
content: @Composable ColumnScope.() -> Unit
|
||||||
|
) {
|
||||||
|
val scrollState = rememberScrollState()
|
||||||
|
|
||||||
|
Column(
|
||||||
|
modifier = modifier
|
||||||
|
.let { if (fillMaxSize) it.fillMaxSize() else if (fillMaxWidth) it.fillMaxWidth() else it }
|
||||||
|
.verticalScroll(scrollState, flingBehavior = flingBehavior)
|
||||||
|
.let { if (padding > 0.dp) it.padding(padding) else it },
|
||||||
|
horizontalAlignment = horizontalAlignment,
|
||||||
|
verticalArrangement = verticalArrangement,
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 带小内边距的垂直滚动组件
|
||||||
|
*
|
||||||
|
* @param modifier 额外的修饰符
|
||||||
|
* @param horizontalAlignment 水平对齐方式
|
||||||
|
* @param verticalArrangement 垂直排列方式
|
||||||
|
* @param fillMaxSize 是否填充最大尺寸
|
||||||
|
* @param fillMaxWidth 是否填充最大宽度
|
||||||
|
* @param content 内容
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun SmallPaddingVerticalScroll(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
horizontalAlignment: Alignment.Horizontal = Alignment.Start,
|
||||||
|
verticalArrangement: Arrangement.Vertical = Arrangement.Top,
|
||||||
|
fillMaxSize: Boolean = false,
|
||||||
|
fillMaxWidth: Boolean = true,
|
||||||
|
content: @Composable ColumnScope.() -> Unit
|
||||||
|
) {
|
||||||
|
VerticalScroll(
|
||||||
|
modifier = modifier,
|
||||||
|
padding = SpacePaddingSmall,
|
||||||
|
horizontalAlignment = horizontalAlignment,
|
||||||
|
verticalArrangement = verticalArrangement,
|
||||||
|
fillMaxSize = fillMaxSize,
|
||||||
|
fillMaxWidth = fillMaxWidth,
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 带中等内边距的垂直滚动组件
|
||||||
|
*
|
||||||
|
* @param modifier 额外的修饰符
|
||||||
|
* @param horizontalAlignment 水平对齐方式
|
||||||
|
* @param verticalArrangement 垂直排列方式
|
||||||
|
* @param fillMaxSize 是否填充最大尺寸
|
||||||
|
* @param fillMaxWidth 是否填充最大宽度
|
||||||
|
* @param content 内容
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun MediumPaddingVerticalScroll(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
horizontalAlignment: Alignment.Horizontal = Alignment.Start,
|
||||||
|
verticalArrangement: Arrangement.Vertical = Arrangement.Top,
|
||||||
|
fillMaxSize: Boolean = false,
|
||||||
|
fillMaxWidth: Boolean = true,
|
||||||
|
content: @Composable ColumnScope.() -> Unit
|
||||||
|
) {
|
||||||
|
VerticalScroll(
|
||||||
|
modifier = modifier,
|
||||||
|
padding = SpacePaddingMedium,
|
||||||
|
horizontalAlignment = horizontalAlignment,
|
||||||
|
verticalArrangement = verticalArrangement,
|
||||||
|
fillMaxSize = fillMaxSize,
|
||||||
|
fillMaxWidth = fillMaxWidth,
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 带大内边距的垂直滚动组件
|
||||||
|
*
|
||||||
|
* @param modifier 额外的修饰符
|
||||||
|
* @param horizontalAlignment 水平对齐方式
|
||||||
|
* @param verticalArrangement 垂直排列方式
|
||||||
|
* @param fillMaxSize 是否填充最大尺寸
|
||||||
|
* @param fillMaxWidth 是否填充最大宽度
|
||||||
|
* @param content 内容
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun LargePaddingVerticalScroll(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
horizontalAlignment: Alignment.Horizontal = Alignment.Start,
|
||||||
|
verticalArrangement: Arrangement.Vertical = Arrangement.Top,
|
||||||
|
fillMaxSize: Boolean = false,
|
||||||
|
fillMaxWidth: Boolean = true,
|
||||||
|
content: @Composable ColumnScope.() -> Unit
|
||||||
|
) {
|
||||||
|
VerticalScroll(
|
||||||
|
modifier = modifier,
|
||||||
|
padding = SpacePaddingLarge,
|
||||||
|
horizontalAlignment = horizontalAlignment,
|
||||||
|
verticalArrangement = verticalArrangement,
|
||||||
|
fillMaxSize = fillMaxSize,
|
||||||
|
fillMaxWidth = fillMaxWidth,
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 水平滚动组件,包含预设的修饰符和属性
|
||||||
|
*
|
||||||
|
* @param modifier 额外的修饰符
|
||||||
|
* @param padding 内边距
|
||||||
|
* @param horizontalArrangement 水平排列方式
|
||||||
|
* @param verticalAlignment 垂直对齐方式
|
||||||
|
* @param flingBehavior 滑动行为
|
||||||
|
* @param content 内容
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun HorizontalScroll(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
padding: Dp = 0.dp,
|
||||||
|
horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
|
||||||
|
verticalAlignment: Alignment.Vertical = Alignment.CenterVertically,
|
||||||
|
flingBehavior: FlingBehavior = ScrollableDefaults.flingBehavior(),
|
||||||
|
content: @Composable RowScope.() -> Unit
|
||||||
|
) {
|
||||||
|
val scrollState = rememberScrollState()
|
||||||
|
|
||||||
|
Row(
|
||||||
|
modifier = modifier
|
||||||
|
.horizontalScroll(scrollState, flingBehavior = flingBehavior)
|
||||||
|
.let { if (padding > 0.dp) it.padding(padding) else it },
|
||||||
|
horizontalArrangement = horizontalArrangement,
|
||||||
|
verticalAlignment = verticalAlignment,
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 带小内边距的水平滚动组件
|
||||||
|
*
|
||||||
|
* @param modifier 额外的修饰符
|
||||||
|
* @param horizontalArrangement 水平排列方式
|
||||||
|
* @param verticalAlignment 垂直对齐方式
|
||||||
|
* @param content 内容
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun SmallPaddingHorizontalScroll(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
|
||||||
|
verticalAlignment: Alignment.Vertical = Alignment.CenterVertically,
|
||||||
|
content: @Composable RowScope.() -> Unit
|
||||||
|
) {
|
||||||
|
HorizontalScroll(
|
||||||
|
modifier = modifier,
|
||||||
|
padding = SpacePaddingSmall,
|
||||||
|
horizontalArrangement = horizontalArrangement,
|
||||||
|
verticalAlignment = verticalAlignment,
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 带中等内边距的水平滚动组件
|
||||||
|
*
|
||||||
|
* @param modifier 额外的修饰符
|
||||||
|
* @param horizontalArrangement 水平排列方式
|
||||||
|
* @param verticalAlignment 垂直对齐方式
|
||||||
|
* @param content 内容
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun MediumPaddingHorizontalScroll(
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
|
||||||
|
verticalAlignment: Alignment.Vertical = Alignment.CenterVertically,
|
||||||
|
content: @Composable RowScope.() -> Unit
|
||||||
|
) {
|
||||||
|
HorizontalScroll(
|
||||||
|
modifier = modifier,
|
||||||
|
padding = SpacePaddingMedium,
|
||||||
|
horizontalArrangement = horizontalArrangement,
|
||||||
|
verticalAlignment = verticalAlignment,
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,141 @@
|
|||||||
|
package com.joker.kit.core.designsystem.component
|
||||||
|
|
||||||
|
import androidx.compose.foundation.layout.Spacer
|
||||||
|
import androidx.compose.foundation.layout.height
|
||||||
|
import androidx.compose.foundation.layout.width
|
||||||
|
import androidx.compose.runtime.Composable
|
||||||
|
import androidx.compose.ui.Modifier
|
||||||
|
import com.joker.kit.core.designsystem.theme.SpaceHorizontalMedium
|
||||||
|
import com.joker.kit.core.designsystem.theme.SpaceHorizontalSmall
|
||||||
|
import com.joker.kit.core.designsystem.theme.SpaceHorizontalXLarge
|
||||||
|
import com.joker.kit.core.designsystem.theme.SpaceHorizontalXSmall
|
||||||
|
import com.joker.kit.core.designsystem.theme.SpaceHorizontalXXLarge
|
||||||
|
import com.joker.kit.core.designsystem.theme.SpaceVerticalLarge
|
||||||
|
import com.joker.kit.core.designsystem.theme.SpaceVerticalMedium
|
||||||
|
import com.joker.kit.core.designsystem.theme.SpaceVerticalSmall
|
||||||
|
import com.joker.kit.core.designsystem.theme.SpaceVerticalXLarge
|
||||||
|
import com.joker.kit.core.designsystem.theme.SpaceVerticalXSmall
|
||||||
|
import com.joker.kit.core.designsystem.theme.SpaceVerticalXXLarge
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 创建一个超大垂直间距(32dp)的Spacer组件
|
||||||
|
* 使用方式:SpaceVerticalXXLarge()
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun SpaceVerticalXXLarge() {
|
||||||
|
Spacer(modifier = Modifier.height(SpaceVerticalXXLarge))
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 创建一个特大垂直间距(24dp)的Spacer组件
|
||||||
|
* 使用方式:SpaceVerticalXLarge()
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun SpaceVerticalXLarge() {
|
||||||
|
Spacer(modifier = Modifier.height(SpaceVerticalXLarge))
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 创建一个大垂直间距(16dp)的Spacer组件
|
||||||
|
* 使用方式:SpaceVerticalLarge()
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun SpaceVerticalLarge() {
|
||||||
|
Spacer(modifier = Modifier.height(SpaceVerticalLarge))
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 创建一个中等垂直间距(12dp)的Spacer组件
|
||||||
|
* 使用方式:SpaceVerticalMedium()
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun SpaceVerticalMedium() {
|
||||||
|
Spacer(modifier = Modifier.height(SpaceVerticalMedium))
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 创建一个小垂直间距(8dp)的Spacer组件
|
||||||
|
* 使用方式:SpaceVerticalSmall()
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun SpaceVerticalSmall() {
|
||||||
|
Spacer(modifier = Modifier.height(SpaceVerticalSmall))
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 创建一个超小垂直间距(4dp)的Spacer组件
|
||||||
|
* 使用方式:SpaceVerticalXSmall()
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun SpaceVerticalXSmall() {
|
||||||
|
Spacer(modifier = Modifier.height(SpaceVerticalXSmall))
|
||||||
|
}
|
||||||
|
//endregion
|
||||||
|
|
||||||
|
//region 水平间距组件
|
||||||
|
/**
|
||||||
|
* 创建一个超大水平间距(32dp)的Spacer组件
|
||||||
|
* 使用方式:SpaceHorizontalXXLarge()
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun SpaceHorizontalXXLarge() {
|
||||||
|
Spacer(modifier = Modifier.width(SpaceHorizontalXXLarge))
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 创建一个特大水平间距(24dp)的Spacer组件
|
||||||
|
* 使用方式:SpaceHorizontalXLarge()
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun SpaceHorizontalXLarge() {
|
||||||
|
Spacer(modifier = Modifier.width(SpaceHorizontalXLarge))
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 创建一个大水平间距(16dp)的Spacer组件
|
||||||
|
* 使用方式:SpaceHorizontalLarge()
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun SpaceHorizontalLarge() {
|
||||||
|
Spacer(modifier = Modifier.width(SpaceHorizontalXLarge))
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 创建一个中等水平间距(12dp)的Spacer组件
|
||||||
|
* 使用方式:SpaceHorizontalMedium()
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun SpaceHorizontalMedium() {
|
||||||
|
Spacer(modifier = Modifier.width(SpaceHorizontalMedium))
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 创建一个小水平间距(8dp)的Spacer组件
|
||||||
|
* 使用方式:SpaceHorizontalSmall()
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun SpaceHorizontalSmall() {
|
||||||
|
Spacer(modifier = Modifier.width(SpaceHorizontalSmall))
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 创建一个超小水平间距(4dp)的Spacer组件
|
||||||
|
* 使用方式:SpaceHorizontalXSmall()
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun SpaceHorizontalXSmall() {
|
||||||
|
Spacer(modifier = Modifier.width(SpaceHorizontalXSmall))
|
||||||
|
}
|
||||||
306
app/src/main/java/com/joker/kit/core/designsystem/theme/Color.kt
Normal file
306
app/src/main/java/com/joker/kit/core/designsystem/theme/Color.kt
Normal file
@@ -0,0 +1,306 @@
|
|||||||
|
package com.joker.kit.core.designsystem.theme
|
||||||
|
|
||||||
|
import androidx.compose.ui.graphics.Color
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 颜色规范
|
||||||
|
* 定义应用程序中使用的所有颜色,包括浅色和深色主题
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 品牌主色(普通模式):#465CFF
|
||||||
|
* 场景:菜单栏、主要按钮、突出文字
|
||||||
|
*/
|
||||||
|
val PrimaryLight = Color(0xFF465CFF)
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 品牌主色(暗黑模式):#466CFF
|
||||||
|
* 场景:暗黑主题下的菜单栏、主要按钮、突出文字
|
||||||
|
*/
|
||||||
|
val PrimaryDark = Color(0xFF466CFF)
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 品牌主色
|
||||||
|
* 暂时和亮色模式一致可自行修改
|
||||||
|
*/
|
||||||
|
val Primary = PrimaryLight
|
||||||
|
|
||||||
|
// 辅助色
|
||||||
|
/**
|
||||||
|
* 危险色/红色:#FF2B2B
|
||||||
|
* 适用场景:错误提示、删除操作、警告信息等
|
||||||
|
*/
|
||||||
|
val ColorDanger = Color(0xFFFF2B2B) // 危险色/红色
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 深色模式危险色/红色:#FF2B3B
|
||||||
|
*/
|
||||||
|
val ColorDangerDark = Color(0xFFFF2B3B)
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 警告色/黄色:#FFB703
|
||||||
|
* 适用场景:警告提示、需要注意的信息等
|
||||||
|
*/
|
||||||
|
val ColorWarning = Color(0xFFFFB703) // 警告色/黄色
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 深色模式警告色/黄色:#FFB704
|
||||||
|
*/
|
||||||
|
val ColorWarningDark = Color(0xFFFFB704)
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 紫色:#6831FF
|
||||||
|
* 适用场景:特殊强调、次要品牌色等
|
||||||
|
*/
|
||||||
|
val ColorPurple = Color(0xFF6831FF) // 紫色
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 深色模式紫色:#6832FF
|
||||||
|
*/
|
||||||
|
val ColorPurpleDark = Color(0xFF6832FF)
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 成功色/绿色:#09BE4F
|
||||||
|
* 适用场景:成功提示、完成状态等
|
||||||
|
*/
|
||||||
|
val ColorSuccess = Color(0xFF09BE4F) // 成功色/绿色
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 深色模式成功色/绿色:#09BE5F
|
||||||
|
*/
|
||||||
|
val ColorSuccessDark = Color(0xFF09BE5F)
|
||||||
|
|
||||||
|
// 字体颜色 - 浅色模式
|
||||||
|
/**
|
||||||
|
* 浅色模式下主要文字颜色:#181818
|
||||||
|
* 适用场景:标题、重要文本内容
|
||||||
|
*/
|
||||||
|
val TextPrimaryLight = Color(0xFF181818) // 用于重要标题内容
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 浅色模式下次要文字颜色:#333333
|
||||||
|
* 适用场景:正文内容、次要标题
|
||||||
|
*/
|
||||||
|
val TextSecondaryLight = Color(0xFF333333) // 用于普通内容
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 浅色模式下次要标题颜色:#7F7F7F
|
||||||
|
* 适用场景:表单标题、提示标签等
|
||||||
|
*/
|
||||||
|
val TextSubtitleLight = Color(0xFF7F7F7F)
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 浅色模式下三级文字颜色:#B2B2B2
|
||||||
|
* 适用场景:辅助说明、标签文字
|
||||||
|
*/
|
||||||
|
val TextTertiaryLight = Color(0xFFB2B2B2) // 用于底部标签描述
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 浅色模式下四级文字颜色:#CCCCCC
|
||||||
|
* 适用场景:次要辅助信息、禁用状态文字
|
||||||
|
*/
|
||||||
|
val TextQuaternaryLight = Color(0xFFCCCCCC) // 用于辅助次要信息
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 按钮文字:#FFFFFF(两种模式一致)
|
||||||
|
*/
|
||||||
|
val TextWhite = Color(0xFFFFFFFF)
|
||||||
|
|
||||||
|
// 字体颜色 - 深色模式
|
||||||
|
/**
|
||||||
|
* 深色模式下主要文字颜色:#D1D1D1
|
||||||
|
* 适用场景:深色模式下的标题、重要文本内容
|
||||||
|
*/
|
||||||
|
val TextPrimaryDark = Color(0xFFD1D1D1) // 深色模式下的主要文字
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 深色模式下次要文字颜色:#A3A3A3
|
||||||
|
* 适用场景:深色模式下的正文内容、次要标题
|
||||||
|
*/
|
||||||
|
val TextSecondaryDark = Color(0xFFA3A3A3) // 深色模式下的次要文字
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 深色模式下次要标题颜色:#8C8C8C
|
||||||
|
* 适用场景:深色模式下的表单标题、提示标签等
|
||||||
|
*/
|
||||||
|
val TextSubtitleDark = Color(0xFF8C8C8C)
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 深色模式下三级文字颜色:#8D8D8D
|
||||||
|
* 适用场景:深色模式下的辅助说明、标签文字
|
||||||
|
*/
|
||||||
|
val TextTertiaryDark = Color(0xFF8D8D8D) // 深色模式下的三级文字
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 深色模式下四级文字颜色:#5E5E5E
|
||||||
|
* 适用场景:深色模式下的次要辅助信息、禁用状态文字
|
||||||
|
*/
|
||||||
|
val TextQuaternaryDark = Color(0xFF5E5E5E) // 深色模式下的四级文字
|
||||||
|
|
||||||
|
// 背景色 - 浅色模式
|
||||||
|
/**
|
||||||
|
* 浅色模式下页面背景色:#F1F4FA
|
||||||
|
* 适用场景:应用整体背景、页面底色
|
||||||
|
*/
|
||||||
|
val BgGreyLight = Color(0xFFF1F4FA) // 页面背景底色
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 浅色模式下白色背景:#FFFFFF
|
||||||
|
* 适用场景:卡片、弹窗等内容区域背景
|
||||||
|
*/
|
||||||
|
val BgWhiteLight = Color(0xFFFFFFFF) // 白色背景
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 浅色模式下内容模块背景色:#F8F8F8
|
||||||
|
* 适用场景:次级内容区域、列表项底色
|
||||||
|
*/
|
||||||
|
val BgContentLight = Color(0xFFF8F8F8) // 内容模块底色
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 浅色模式下红色背景:#FF2B2B(5%透明度)
|
||||||
|
* 适用场景:红色主题的轻量化背景、提示区域
|
||||||
|
*/
|
||||||
|
val BgRedLight = Color(0x0DFF2B2B) // 红色背景 5% 透明度
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 浅色模式下黄色背景:#FFB703(10%透明度)
|
||||||
|
* 适用场景:黄色主题的轻量化背景、警告区域
|
||||||
|
*/
|
||||||
|
val BgYellowLight = Color(0x1AFFB703) // 黄色背景 10% 透明度
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 浅色模式下紫色背景:#6831FF(10%透明度)
|
||||||
|
* 适用场景:紫色主题的轻量化背景、特殊区域
|
||||||
|
*/
|
||||||
|
val BgPurpleLight = Color(0x1A6831FF) // 紫色背景 10% 透明度
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 浅色模式下绿色背景:#09BE4F(5%透明度)
|
||||||
|
* 适用场景:绿色主题的轻量化背景、成功提示区域
|
||||||
|
*/
|
||||||
|
val BgGreenLight = Color(0x0D09BE4F) // 绿色背景 5% 透明度
|
||||||
|
|
||||||
|
// 背景色 - 深色模式
|
||||||
|
/**
|
||||||
|
* 深色模式下页面背景色:#111111
|
||||||
|
* 适用场景:深色模式下的应用整体背景、页面底色
|
||||||
|
*/
|
||||||
|
val BgGreyDark = Color(0xFF111111) // 深色模式下的页面背景底色
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 深色模式下白色背景:#1B1B1B
|
||||||
|
* 适用场景:深色模式下的卡片、弹窗等内容区域背景
|
||||||
|
*/
|
||||||
|
val BgWhiteDark = Color(0xFF1B1B1B) // 深色模式下的白色背景
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 深色模式下内容模块背景色:#222222
|
||||||
|
* 适用场景:深色模式下的次级内容区域、列表项底色
|
||||||
|
*/
|
||||||
|
val BgContentDark = Color(0xFF222222) // 深色模式下的内容模块底色
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 深色模式下红色背景:#222222
|
||||||
|
*/
|
||||||
|
val BgRedDark = Color(0xFF222222)
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 深色模式下黄色背景:#222222
|
||||||
|
*/
|
||||||
|
val BgYellowDark = Color(0xFF222222)
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 深色模式下紫色背景:#222222
|
||||||
|
*/
|
||||||
|
val BgPurpleDark = Color(0xFF222222)
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 深色模式下绿色背景:#222222
|
||||||
|
*/
|
||||||
|
val BgGreenDark = Color(0xFF222222)
|
||||||
|
|
||||||
|
// 遮罩颜色
|
||||||
|
/**
|
||||||
|
* 浅色模式下遮罩颜色:60%透明度黑色
|
||||||
|
* 适用场景:弹窗背景、加载状态遮罩
|
||||||
|
*/
|
||||||
|
val MaskLight = Color(0x99000000) // rgba(0, 0, 0, 0.6) - 浅色模式
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 深色模式下遮罩颜色:60%透明度黑色
|
||||||
|
* 适用场景:深色模式下的弹窗背景、加载状态遮罩
|
||||||
|
*/
|
||||||
|
val MaskDark = Color(0x99000000) // rgba(0, 0, 0, 0.6) - 深色模式
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 浅色模式下按压状态颜色:20%透明度黑色
|
||||||
|
* 适用场景:浅色模式下的按钮、卡片等组件的点击反馈
|
||||||
|
*/
|
||||||
|
val PressLight = Color(0x33000000) // rgba(0, 0, 0, 0.2) - 浅色模式点击
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 深色模式下按压状态颜色:20%透明度白色
|
||||||
|
* 适用场景:深色模式下的按钮、卡片等组件的点击反馈
|
||||||
|
*/
|
||||||
|
val PressDark = Color(0x33FFFFFF) // rgba(255, 255, 255, .2) - 深色模式点击
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 浅色模式下轻量按压状态颜色:5%透明度黑色
|
||||||
|
* 适用场景:弱态组件、背景较浅的点击反馈
|
||||||
|
*/
|
||||||
|
val PressLightSoft = Color(0x0D000000) // rgba(0, 0, 0, 0.05)
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 深色模式下轻量按压状态颜色:10%透明度白色
|
||||||
|
* 适用场景:弱态组件、背景较暗的点击反馈
|
||||||
|
*/
|
||||||
|
val PressDarkSoft = Color(0x1AFFFFFF) // rgba(255, 255, 255, 0.1)
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 浅色模式下阴影颜色:#020426(5%透明度)
|
||||||
|
*/
|
||||||
|
val ShadowLight = Color(0x0D020426)
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 深色模式下阴影颜色:#111111(50%透明度)
|
||||||
|
*/
|
||||||
|
val ShadowDark = Color(0x80111111)
|
||||||
|
|
||||||
|
// 边框颜色
|
||||||
|
/**
|
||||||
|
* 浅色模式下边框颜色:#EEEEEE
|
||||||
|
* 适用场景:分割线、边框、描边等
|
||||||
|
*/
|
||||||
|
val BorderLight = Color(0xFFEEEEEE) // 浅色模式边框
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 深色模式下边框颜色:#242424
|
||||||
|
* 适用场景:深色模式下的分割线、边框、描边等
|
||||||
|
*/
|
||||||
|
val BorderDark = Color(0xFF242424) // 深色模式边框
|
||||||
|
|
||||||
|
// 渐变色起点和终点颜色
|
||||||
|
/**
|
||||||
|
* 主色渐变起点:#465CFF
|
||||||
|
* 适用场景:与主色渐变终点配合使用,用于渐变按钮、背景等
|
||||||
|
*/
|
||||||
|
val GradientPrimaryStart = Color(0xFF465CFF) // 主色渐变起点
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 主色渐变终点:#6831FF
|
||||||
|
* 适用场景:与主色渐变起点配合使用,用于渐变按钮、背景等
|
||||||
|
*/
|
||||||
|
val GradientPrimaryEnd = Color(0xFF6831FF) // 主色渐变终点
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 红色渐变起点:#FD8C8C
|
||||||
|
* 适用场景:与红色渐变终点配合使用,用于警告类渐变效果
|
||||||
|
*/
|
||||||
|
val GradientRedStart = Color(0xFFFD8C8C) // 红色渐变起点
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 红色渐变终点:#FF2B2B
|
||||||
|
* 适用场景:与红色渐变起点配合使用,用于警告类渐变效果
|
||||||
|
*/
|
||||||
|
val GradientRedEnd = Color(0xFFFF2B2B) // 红色渐变终点
|
||||||
@@ -0,0 +1,83 @@
|
|||||||
|
package com.joker.kit.core.designsystem.theme
|
||||||
|
|
||||||
|
import androidx.compose.foundation.shape.RoundedCornerShape
|
||||||
|
import androidx.compose.material3.Shapes
|
||||||
|
import androidx.compose.ui.unit.dp
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 圆角规范
|
||||||
|
*/
|
||||||
|
|
||||||
|
// 标准圆角数值定义
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 超小圆角数值:4dp
|
||||||
|
*/
|
||||||
|
val RadiusXSmall = 4.dp
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 小圆角数值:8dp
|
||||||
|
*/
|
||||||
|
val RadiusSmall = 8.dp
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 中圆角数值:12dp
|
||||||
|
*/
|
||||||
|
val RadiusMedium = 12.dp
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 大圆角数值:16dp
|
||||||
|
*/
|
||||||
|
val RadiusLarge = 16.dp
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 超大圆角数值:24dp
|
||||||
|
*/
|
||||||
|
val RadiusExtraLarge = 24.dp
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 超小圆角:4dp
|
||||||
|
* 适用场景:极小的UI元素,如图标按钮
|
||||||
|
*/
|
||||||
|
val ShapeXSmall = RoundedCornerShape(RadiusXSmall) // 超小圆角 8px
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 小圆角:8dp
|
||||||
|
* 适用场景:常规卡片、按钮等小型UI元素的圆角
|
||||||
|
*/
|
||||||
|
val ShapeSmall = RoundedCornerShape(RadiusSmall) // 小圆角 16px
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 中圆角:12dp
|
||||||
|
* 适用场景:中型容器、对话框等组件的圆角
|
||||||
|
*/
|
||||||
|
val ShapeMedium = RoundedCornerShape(RadiusMedium) // 中圆角 24px
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 大圆角:16dp
|
||||||
|
* 适用场景:分类列表等组件
|
||||||
|
*/
|
||||||
|
val ShapeLarge = RoundedCornerShape(RadiusLarge) // 大圆角 32px
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 超大圆角:24dp
|
||||||
|
* 适用场景:大型卡片、底部弹窗等较大UI元素的圆角
|
||||||
|
*/
|
||||||
|
val ShapeExtraLarge = RoundedCornerShape(RadiusExtraLarge) // 超大圆角 48px
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 圆形
|
||||||
|
* 适用场景:头像、图标按钮等需要完全圆形的组件
|
||||||
|
*/
|
||||||
|
val ShapeCircle = RoundedCornerShape(percent = 50)
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Material3 Shapes配置
|
||||||
|
* 将自定义圆角规范应用于Material3设计系统
|
||||||
|
*/
|
||||||
|
val AppShapes = Shapes(
|
||||||
|
small = ShapeSmall,
|
||||||
|
medium = ShapeMedium,
|
||||||
|
large = ShapeExtraLarge,
|
||||||
|
extraLarge = ShapeExtraLarge
|
||||||
|
)
|
||||||
117
app/src/main/java/com/joker/kit/core/designsystem/theme/Size.kt
Normal file
117
app/src/main/java/com/joker/kit/core/designsystem/theme/Size.kt
Normal file
@@ -0,0 +1,117 @@
|
|||||||
|
package com.joker.kit.core.designsystem.theme
|
||||||
|
|
||||||
|
import androidx.compose.ui.unit.dp
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 布局间距规范
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 超大垂直间距:32dp
|
||||||
|
* 适用场景:页面块与块之间的大间距,如不同功能模块之间的分隔
|
||||||
|
*/
|
||||||
|
val SpaceVerticalXXLarge = 32.dp
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 特大垂直间距:24dp
|
||||||
|
* 适用场景:大模块内部的分隔,如卡片组之间的间距
|
||||||
|
*/
|
||||||
|
val SpaceVerticalXLarge = 24.dp
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 大垂直间距:16dp
|
||||||
|
* 适用场景:卡片内部主要内容块之间的间距
|
||||||
|
*/
|
||||||
|
val SpaceVerticalLarge = 16.dp
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 中等垂直间距:12dp
|
||||||
|
* 适用场景:内容区域的常规间距,如列表项之间的间距
|
||||||
|
*/
|
||||||
|
val SpaceVerticalMedium = 12.dp
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 小垂直间距:8dp
|
||||||
|
* 适用场景:紧凑布局中的间距,如图标与文字之间
|
||||||
|
*/
|
||||||
|
val SpaceVerticalSmall = 8.dp
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 超小垂直间距:4dp
|
||||||
|
* 适用场景:最小的垂直间隔,如紧凑排列的元素间距
|
||||||
|
*/
|
||||||
|
val SpaceVerticalXSmall = 4.dp
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 超大水平间距:32dp
|
||||||
|
* 适用场景:页面左右边距,大型容器的内边距
|
||||||
|
*/
|
||||||
|
val SpaceHorizontalXXLarge = 32.dp
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 特大水平间距:24dp
|
||||||
|
* 适用场景:大型容器内部的水平分隔
|
||||||
|
*/
|
||||||
|
val SpaceHorizontalXLarge = 24.dp
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 大水平间距:16dp
|
||||||
|
* 适用场景:常规容器的左右边距,如卡片的内边距
|
||||||
|
*/
|
||||||
|
val SpaceHorizontalLarge = 16.dp
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 中等水平间距:12dp
|
||||||
|
* 适用场景:中等容器的水平间距,如列表项的左右间距
|
||||||
|
*/
|
||||||
|
val SpaceHorizontalMedium = 12.dp
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 小水平间距:8dp
|
||||||
|
* 适用场景:紧凑布局的水平间距,如图标与文字之间
|
||||||
|
*/
|
||||||
|
val SpaceHorizontalSmall = 8.dp
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 超小平间间距:4dp
|
||||||
|
* 适用场景:最小的平间间隔,如紧凑排列的元素间距
|
||||||
|
*/
|
||||||
|
val SpaceHorizontalXSmall = 4.dp
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 常用于内边距的值
|
||||||
|
* 大内边距:16dp
|
||||||
|
* 适用场景:卡片、对话框等容器的内边距
|
||||||
|
*/
|
||||||
|
val SpacePaddingLarge = 16.dp
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 中等内边距:12dp
|
||||||
|
* 适用场景:按钮、输入框等中型组件的内边距
|
||||||
|
*/
|
||||||
|
val SpacePaddingMedium = 12.dp
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 小内边距:8dp
|
||||||
|
* 适用场景:紧凑型组件的内边距,如小型按钮
|
||||||
|
*/
|
||||||
|
val SpacePaddingSmall = 8.dp
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 超小内边距:4dp
|
||||||
|
* 适用场景:最小的内边距,如标签、徽章等小组件
|
||||||
|
*/
|
||||||
|
val SpacePaddingXSmall = 4.dp
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 其他常用尺寸
|
||||||
|
* 分割线高度:0.5dp
|
||||||
|
* 适用场景:列表项之间的分割线、边框线等
|
||||||
|
*/
|
||||||
|
val SpaceDivider = 0.5.dp // 分割线高度
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 指示器高度:2dp
|
||||||
|
* 适用场景:选中指示器、进度条等
|
||||||
|
*/
|
||||||
|
val SpaceIndicator = 2.dp // 指示器高度
|
||||||
155
app/src/main/java/com/joker/kit/core/designsystem/theme/Theme.kt
Normal file
155
app/src/main/java/com/joker/kit/core/designsystem/theme/Theme.kt
Normal file
@@ -0,0 +1,155 @@
|
|||||||
|
package com.joker.kit.core.designsystem.theme
|
||||||
|
|
||||||
|
import android.os.Build
|
||||||
|
import androidx.compose.foundation.isSystemInDarkTheme
|
||||||
|
import androidx.compose.material3.MaterialTheme
|
||||||
|
import androidx.compose.material3.darkColorScheme
|
||||||
|
import androidx.compose.material3.dynamicDarkColorScheme
|
||||||
|
import androidx.compose.material3.dynamicLightColorScheme
|
||||||
|
import androidx.compose.material3.lightColorScheme
|
||||||
|
import androidx.compose.runtime.Composable
|
||||||
|
import androidx.compose.ui.platform.LocalContext
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 深色主题配色方案
|
||||||
|
* 定义MaterialTheme中深色模式下的各种颜色
|
||||||
|
*/
|
||||||
|
private val DarkColorScheme = darkColorScheme(
|
||||||
|
primary = PrimaryDark,
|
||||||
|
onPrimary = TextWhite,
|
||||||
|
primaryContainer = PrimaryDark,
|
||||||
|
onPrimaryContainer = TextWhite,
|
||||||
|
inversePrimary = PrimaryLight,
|
||||||
|
secondary = ColorPurpleDark,
|
||||||
|
onSecondary = TextWhite,
|
||||||
|
secondaryContainer = ColorPurpleDark,
|
||||||
|
onSecondaryContainer = TextWhite,
|
||||||
|
tertiary = ColorSuccessDark,
|
||||||
|
onTertiary = TextWhite,
|
||||||
|
tertiaryContainer = ColorSuccessDark,
|
||||||
|
onTertiaryContainer = TextWhite,
|
||||||
|
background = BgGreyDark,
|
||||||
|
onBackground = TextPrimaryDark,
|
||||||
|
surface = BgWhiteDark,
|
||||||
|
onSurface = TextPrimaryDark,
|
||||||
|
surfaceVariant = BgContentDark,
|
||||||
|
onSurfaceVariant = TextSecondaryDark,
|
||||||
|
surfaceTint = PrimaryDark,
|
||||||
|
inverseSurface = BgGreyLight,
|
||||||
|
inverseOnSurface = TextPrimaryLight,
|
||||||
|
error = ColorDangerDark,
|
||||||
|
onError = TextWhite,
|
||||||
|
errorContainer = BgRedDark,
|
||||||
|
onErrorContainer = ColorDangerDark,
|
||||||
|
outline = BorderDark,
|
||||||
|
outlineVariant = BorderDark,
|
||||||
|
scrim = MaskDark,
|
||||||
|
surfaceBright = BgWhiteDark,
|
||||||
|
surfaceContainer = BgWhiteDark,
|
||||||
|
surfaceContainerHigh = BgWhiteDark,
|
||||||
|
surfaceContainerHighest = BgWhiteDark,
|
||||||
|
surfaceContainerLow = BgContentDark,
|
||||||
|
surfaceContainerLowest = BgGreyDark,
|
||||||
|
surfaceDim = BgGreyDark,
|
||||||
|
primaryFixed = PrimaryDark,
|
||||||
|
primaryFixedDim = PrimaryDark,
|
||||||
|
onPrimaryFixed = TextWhite,
|
||||||
|
onPrimaryFixedVariant = TextWhite,
|
||||||
|
secondaryFixed = ColorPurpleDark,
|
||||||
|
secondaryFixedDim = ColorPurpleDark,
|
||||||
|
onSecondaryFixed = TextWhite,
|
||||||
|
onSecondaryFixedVariant = TextWhite,
|
||||||
|
tertiaryFixed = ColorSuccessDark,
|
||||||
|
tertiaryFixedDim = ColorSuccessDark,
|
||||||
|
onTertiaryFixed = TextWhite,
|
||||||
|
onTertiaryFixedVariant = TextWhite
|
||||||
|
)
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 浅色主题配色方案
|
||||||
|
* 定义MaterialTheme中浅色模式下的各种颜色
|
||||||
|
*/
|
||||||
|
private val LightColorScheme = lightColorScheme(
|
||||||
|
primary = PrimaryLight,
|
||||||
|
onPrimary = TextWhite,
|
||||||
|
primaryContainer = PrimaryLight,
|
||||||
|
onPrimaryContainer = TextWhite,
|
||||||
|
inversePrimary = PrimaryDark,
|
||||||
|
secondary = ColorPurple,
|
||||||
|
onSecondary = TextWhite,
|
||||||
|
secondaryContainer = ColorPurple,
|
||||||
|
onSecondaryContainer = TextWhite,
|
||||||
|
tertiary = ColorSuccess,
|
||||||
|
onTertiary = TextWhite,
|
||||||
|
tertiaryContainer = ColorSuccess,
|
||||||
|
onTertiaryContainer = TextWhite,
|
||||||
|
background = BgGreyLight,
|
||||||
|
onBackground = TextPrimaryLight,
|
||||||
|
surface = BgWhiteLight,
|
||||||
|
onSurface = TextPrimaryLight,
|
||||||
|
surfaceVariant = BgContentLight,
|
||||||
|
onSurfaceVariant = TextSecondaryLight,
|
||||||
|
surfaceTint = PrimaryLight,
|
||||||
|
inverseSurface = BgGreyDark,
|
||||||
|
inverseOnSurface = TextPrimaryDark,
|
||||||
|
error = ColorDanger,
|
||||||
|
onError = TextWhite,
|
||||||
|
errorContainer = BgRedLight,
|
||||||
|
onErrorContainer = ColorDanger,
|
||||||
|
outline = BorderLight,
|
||||||
|
outlineVariant = BorderLight,
|
||||||
|
scrim = MaskLight,
|
||||||
|
surfaceBright = BgWhiteLight,
|
||||||
|
surfaceContainer = BgWhiteLight,
|
||||||
|
surfaceContainerHigh = BgWhiteLight,
|
||||||
|
surfaceContainerHighest = BgWhiteLight,
|
||||||
|
surfaceContainerLow = BgContentLight,
|
||||||
|
surfaceContainerLowest = BgGreyLight,
|
||||||
|
surfaceDim = BgGreyLight,
|
||||||
|
primaryFixed = PrimaryLight,
|
||||||
|
primaryFixedDim = PrimaryLight,
|
||||||
|
onPrimaryFixed = TextWhite,
|
||||||
|
onPrimaryFixedVariant = TextWhite,
|
||||||
|
secondaryFixed = ColorPurple,
|
||||||
|
secondaryFixedDim = ColorPurple,
|
||||||
|
onSecondaryFixed = TextWhite,
|
||||||
|
onSecondaryFixedVariant = TextWhite,
|
||||||
|
tertiaryFixed = ColorSuccess,
|
||||||
|
tertiaryFixedDim = ColorSuccess,
|
||||||
|
onTertiaryFixed = TextWhite,
|
||||||
|
onTertiaryFixedVariant = TextWhite
|
||||||
|
)
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 应用主题 Composable 函数
|
||||||
|
* 根据系统设置决定使用深色或浅色主题,并应用所有设计系统元素
|
||||||
|
*
|
||||||
|
* @param darkTheme 是否使用深色主题,默认跟随系统设置
|
||||||
|
* @param dynamicColor 是否使用动态颜色(Android 12+特性),默认关闭
|
||||||
|
* @param content 需要应用主题的内容
|
||||||
|
* @author Joker.X
|
||||||
|
*/
|
||||||
|
@Composable
|
||||||
|
fun AppTheme(
|
||||||
|
darkTheme: Boolean = isSystemInDarkTheme(),
|
||||||
|
// Dynamic color is available on Android 12+
|
||||||
|
dynamicColor: Boolean = false,
|
||||||
|
content: @Composable () -> Unit
|
||||||
|
) {
|
||||||
|
val colorScheme = when {
|
||||||
|
dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
|
||||||
|
val context = LocalContext.current
|
||||||
|
if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
|
||||||
|
}
|
||||||
|
|
||||||
|
darkTheme -> DarkColorScheme
|
||||||
|
else -> LightColorScheme
|
||||||
|
}
|
||||||
|
|
||||||
|
MaterialTheme(
|
||||||
|
colorScheme = colorScheme,
|
||||||
|
typography = Typography,
|
||||||
|
shapes = AppShapes,
|
||||||
|
content = content
|
||||||
|
)
|
||||||
|
}
|
||||||
194
app/src/main/java/com/joker/kit/core/designsystem/theme/Type.kt
Normal file
194
app/src/main/java/com/joker/kit/core/designsystem/theme/Type.kt
Normal file
@@ -0,0 +1,194 @@
|
|||||||
|
package com.joker.kit.core.designsystem.theme
|
||||||
|
|
||||||
|
import androidx.compose.material3.Typography
|
||||||
|
import androidx.compose.ui.text.TextStyle
|
||||||
|
import androidx.compose.ui.text.font.FontFamily
|
||||||
|
import androidx.compose.ui.text.font.FontWeight
|
||||||
|
import androidx.compose.ui.unit.sp
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 字体规范
|
||||||
|
* 1px = 0.5sp 转换结果,未提供的尺寸按层级递减补齐
|
||||||
|
*/
|
||||||
|
val Typography = Typography(
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 中粗体 · 22sp / 31sp
|
||||||
|
* 使用场景:超大标题,文章标题
|
||||||
|
*/
|
||||||
|
displayLarge = TextStyle(
|
||||||
|
fontFamily = FontFamily.Default,
|
||||||
|
fontWeight = FontWeight.SemiBold, // 中粗体
|
||||||
|
fontSize = 22.sp,
|
||||||
|
lineHeight = 31.sp,
|
||||||
|
letterSpacing = 0.sp
|
||||||
|
),
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 中粗体 · 18sp / 27sp
|
||||||
|
* 使用场景:大标题
|
||||||
|
*/
|
||||||
|
displayMedium = TextStyle(
|
||||||
|
fontFamily = FontFamily.Default,
|
||||||
|
fontWeight = FontWeight.SemiBold, // 中粗体
|
||||||
|
fontSize = 18.sp,
|
||||||
|
lineHeight = 27.sp,
|
||||||
|
letterSpacing = 0.sp
|
||||||
|
),
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 中粗体 · 16sp / 24sp
|
||||||
|
* 使用场景:展示级文案(中等长度)
|
||||||
|
*/
|
||||||
|
displaySmall = TextStyle(
|
||||||
|
fontFamily = FontFamily.Default,
|
||||||
|
fontWeight = FontWeight.SemiBold,
|
||||||
|
fontSize = 16.sp,
|
||||||
|
lineHeight = 24.sp,
|
||||||
|
letterSpacing = 0.sp
|
||||||
|
),
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 中黑体 · 16sp / 24sp
|
||||||
|
* 使用场景:二级标题、导航栏、列表、段落标题、按钮文字
|
||||||
|
*/
|
||||||
|
headlineLarge = TextStyle(
|
||||||
|
fontFamily = FontFamily.Default,
|
||||||
|
fontWeight = FontWeight.Medium, // 中黑体
|
||||||
|
fontSize = 16.sp,
|
||||||
|
lineHeight = 24.sp,
|
||||||
|
letterSpacing = 0.sp
|
||||||
|
),
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 中黑体 · 13sp / 20sp
|
||||||
|
* 使用场景:信息分组小标题
|
||||||
|
*/
|
||||||
|
headlineSmall = TextStyle(
|
||||||
|
fontFamily = FontFamily.Default,
|
||||||
|
fontWeight = FontWeight.Medium,
|
||||||
|
fontSize = 13.sp,
|
||||||
|
lineHeight = 20.sp,
|
||||||
|
letterSpacing = 0.sp
|
||||||
|
),
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 中黑体 · 14sp / 22sp
|
||||||
|
* 使用场景:类别名称
|
||||||
|
*/
|
||||||
|
headlineMedium = TextStyle(
|
||||||
|
fontFamily = FontFamily.Default,
|
||||||
|
fontWeight = FontWeight.Medium, // 中黑体
|
||||||
|
fontSize = 14.sp,
|
||||||
|
lineHeight = 22.sp,
|
||||||
|
letterSpacing = 0.sp
|
||||||
|
),
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 中黑体 · 16sp / 20sp
|
||||||
|
* 使用场景:模块标题、弹窗标题
|
||||||
|
*/
|
||||||
|
titleLarge = TextStyle(
|
||||||
|
fontFamily = FontFamily.Default,
|
||||||
|
fontWeight = FontWeight.Medium,
|
||||||
|
fontSize = 16.sp,
|
||||||
|
lineHeight = 20.sp,
|
||||||
|
letterSpacing = 0.sp
|
||||||
|
),
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 中黑体 · 14sp / 20sp
|
||||||
|
* 使用场景:列表项标题、辅助性标题
|
||||||
|
*/
|
||||||
|
titleMedium = TextStyle(
|
||||||
|
fontFamily = FontFamily.Default,
|
||||||
|
fontWeight = FontWeight.Medium,
|
||||||
|
fontSize = 14.sp,
|
||||||
|
lineHeight = 20.sp,
|
||||||
|
letterSpacing = 0.sp
|
||||||
|
),
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 中黑体 · 12sp / 18sp
|
||||||
|
* 使用场景:段落内小标题、二级描述
|
||||||
|
*/
|
||||||
|
titleSmall = TextStyle(
|
||||||
|
fontFamily = FontFamily.Default,
|
||||||
|
fontWeight = FontWeight.Medium,
|
||||||
|
fontSize = 12.sp,
|
||||||
|
lineHeight = 18.sp,
|
||||||
|
letterSpacing = 0.sp
|
||||||
|
),
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 常规体 · 14sp / 22sp
|
||||||
|
* 使用场景:正文内容、段落文字
|
||||||
|
*/
|
||||||
|
bodyLarge = TextStyle(
|
||||||
|
fontFamily = FontFamily.Default,
|
||||||
|
fontWeight = FontWeight.Normal, // 常规体
|
||||||
|
fontSize = 14.sp,
|
||||||
|
lineHeight = 22.sp,
|
||||||
|
letterSpacing = 0.sp
|
||||||
|
),
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 常规体 · 12sp / 18sp
|
||||||
|
* 使用场景:底部导航栏文字、辅助性文字、标签文字
|
||||||
|
*/
|
||||||
|
bodyMedium = TextStyle(
|
||||||
|
fontFamily = FontFamily.Default,
|
||||||
|
fontWeight = FontWeight.Normal, // 常规体
|
||||||
|
fontSize = 12.sp,
|
||||||
|
lineHeight = 18.sp,
|
||||||
|
letterSpacing = 0.sp
|
||||||
|
),
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 常规体 · 11sp / 16sp
|
||||||
|
* 使用场景:次级正文、辅助段落
|
||||||
|
*/
|
||||||
|
bodySmall = TextStyle(
|
||||||
|
fontFamily = FontFamily.Default,
|
||||||
|
fontWeight = FontWeight.Normal,
|
||||||
|
fontSize = 11.sp,
|
||||||
|
lineHeight = 16.sp,
|
||||||
|
letterSpacing = 0.sp
|
||||||
|
),
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 中黑体 · 12sp / 16sp
|
||||||
|
* 使用场景:按钮、标签等操作文字
|
||||||
|
*/
|
||||||
|
labelLarge = TextStyle(
|
||||||
|
fontFamily = FontFamily.Default,
|
||||||
|
fontWeight = FontWeight.Medium,
|
||||||
|
fontSize = 12.sp,
|
||||||
|
lineHeight = 16.sp,
|
||||||
|
letterSpacing = 0.1.sp
|
||||||
|
),
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 中黑体 · 11sp / 16sp
|
||||||
|
* 使用场景:辅助标签、徽标说明
|
||||||
|
*/
|
||||||
|
labelMedium = TextStyle(
|
||||||
|
fontFamily = FontFamily.Default,
|
||||||
|
fontWeight = FontWeight.Medium,
|
||||||
|
fontSize = 11.sp,
|
||||||
|
lineHeight = 16.sp,
|
||||||
|
letterSpacing = 0.1.sp
|
||||||
|
),
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 中黑体 · 10sp / 14sp
|
||||||
|
* 使用场景:最小标签、角标
|
||||||
|
*/
|
||||||
|
labelSmall = TextStyle(
|
||||||
|
fontFamily = FontFamily.Default,
|
||||||
|
fontWeight = FontWeight.Medium,
|
||||||
|
fontSize = 10.sp,
|
||||||
|
lineHeight = 14.sp,
|
||||||
|
letterSpacing = 0.1.sp
|
||||||
|
)
|
||||||
|
)
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
package com.joker.kit.ui.theme
|
|
||||||
|
|
||||||
import androidx.compose.ui.graphics.Color
|
|
||||||
|
|
||||||
val Purple80 = Color(0xFFD0BCFF)
|
|
||||||
val PurpleGrey80 = Color(0xFFCCC2DC)
|
|
||||||
val Pink80 = Color(0xFFEFB8C8)
|
|
||||||
|
|
||||||
val Purple40 = Color(0xFF6650a4)
|
|
||||||
val PurpleGrey40 = Color(0xFF625b71)
|
|
||||||
val Pink40 = Color(0xFF7D5260)
|
|
||||||
@@ -1,58 +0,0 @@
|
|||||||
package com.joker.kit.ui.theme
|
|
||||||
|
|
||||||
import android.app.Activity
|
|
||||||
import android.os.Build
|
|
||||||
import androidx.compose.foundation.isSystemInDarkTheme
|
|
||||||
import androidx.compose.material3.MaterialTheme
|
|
||||||
import androidx.compose.material3.darkColorScheme
|
|
||||||
import androidx.compose.material3.dynamicDarkColorScheme
|
|
||||||
import androidx.compose.material3.dynamicLightColorScheme
|
|
||||||
import androidx.compose.material3.lightColorScheme
|
|
||||||
import androidx.compose.runtime.Composable
|
|
||||||
import androidx.compose.ui.platform.LocalContext
|
|
||||||
|
|
||||||
private val DarkColorScheme = darkColorScheme(
|
|
||||||
primary = Purple80,
|
|
||||||
secondary = PurpleGrey80,
|
|
||||||
tertiary = Pink80
|
|
||||||
)
|
|
||||||
|
|
||||||
private val LightColorScheme = lightColorScheme(
|
|
||||||
primary = Purple40,
|
|
||||||
secondary = PurpleGrey40,
|
|
||||||
tertiary = Pink40
|
|
||||||
|
|
||||||
/* Other default colors to override
|
|
||||||
background = Color(0xFFFFFBFE),
|
|
||||||
surface = Color(0xFFFFFBFE),
|
|
||||||
onPrimary = Color.White,
|
|
||||||
onSecondary = Color.White,
|
|
||||||
onTertiary = Color.White,
|
|
||||||
onBackground = Color(0xFF1C1B1F),
|
|
||||||
onSurface = Color(0xFF1C1B1F),
|
|
||||||
*/
|
|
||||||
)
|
|
||||||
|
|
||||||
@Composable
|
|
||||||
fun AndroidProjectComposeTheme(
|
|
||||||
darkTheme: Boolean = isSystemInDarkTheme(),
|
|
||||||
// Dynamic color is available on Android 12+
|
|
||||||
dynamicColor: Boolean = true,
|
|
||||||
content: @Composable () -> Unit
|
|
||||||
) {
|
|
||||||
val colorScheme = when {
|
|
||||||
dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
|
|
||||||
val context = LocalContext.current
|
|
||||||
if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
|
|
||||||
}
|
|
||||||
|
|
||||||
darkTheme -> DarkColorScheme
|
|
||||||
else -> LightColorScheme
|
|
||||||
}
|
|
||||||
|
|
||||||
MaterialTheme(
|
|
||||||
colorScheme = colorScheme,
|
|
||||||
typography = Typography,
|
|
||||||
content = content
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@@ -1,34 +0,0 @@
|
|||||||
package com.joker.kit.ui.theme
|
|
||||||
|
|
||||||
import androidx.compose.material3.Typography
|
|
||||||
import androidx.compose.ui.text.TextStyle
|
|
||||||
import androidx.compose.ui.text.font.FontFamily
|
|
||||||
import androidx.compose.ui.text.font.FontWeight
|
|
||||||
import androidx.compose.ui.unit.sp
|
|
||||||
|
|
||||||
// Set of Material typography styles to start with
|
|
||||||
val Typography = Typography(
|
|
||||||
bodyLarge = TextStyle(
|
|
||||||
fontFamily = FontFamily.Default,
|
|
||||||
fontWeight = FontWeight.Normal,
|
|
||||||
fontSize = 16.sp,
|
|
||||||
lineHeight = 24.sp,
|
|
||||||
letterSpacing = 0.5.sp
|
|
||||||
)
|
|
||||||
/* Other default text styles to override
|
|
||||||
titleLarge = TextStyle(
|
|
||||||
fontFamily = FontFamily.Default,
|
|
||||||
fontWeight = FontWeight.Normal,
|
|
||||||
fontSize = 22.sp,
|
|
||||||
lineHeight = 28.sp,
|
|
||||||
letterSpacing = 0.sp
|
|
||||||
),
|
|
||||||
labelSmall = TextStyle(
|
|
||||||
fontFamily = FontFamily.Default,
|
|
||||||
fontWeight = FontWeight.Medium,
|
|
||||||
fontSize = 11.sp,
|
|
||||||
lineHeight = 16.sp,
|
|
||||||
letterSpacing = 0.5.sp
|
|
||||||
)
|
|
||||||
*/
|
|
||||||
)
|
|
||||||
Reference in New Issue
Block a user