GithubStar/QMUI_Android
1
0
Fork 0
mirror of https://github.com/Tencent/QMUI_Android.git synced 2026-10-17 04:31:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: QMUIItem

Browse Source
This commit is contained in:
cgspine
2021-12-29 15:54:16 +08:00
parent 3f2de373a7
commit cefa8f94bc
4 changed files with 204 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
compose/src/main/java/com/qmuiteam/compose/modal/QMUIModal.kt
+3 -2
View File
@@ -12,6 +12,7 @@ import androidx.compose.runtime.DisposableEffectResult
import androidx.compose.runtime.remember
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalView
import com.qmuiteam.compose.ui.qmuiPrimaryColor
val DefaultMaskColor = Color.Black.copy(alpha = 0.5f)
@@ -19,8 +20,8 @@ private class ModalHolder(var current: QMUIModal? = null)
class QMUIModalAction(
val text: String,
val enabled: Boolean,
val color: Color,
val enabled: Boolean = true,
val color: Color = qmuiPrimaryColor,
val onClick: (QMUIModal) -> Unit
)
compose/src/main/java/com/qmuiteam/compose/ui/DefaultConfig.kt
+3
View File
@@ -5,6 +5,9 @@ import androidx.compose.ui.unit.dp
val qmuiPrimaryColor = Color(0xFF00A8E1)
val qmuiSeparatorColor = Color(0xFFCCCCCC)
val qmuiIndicationColor = Color(0xFF777777)
val qmuiTextMainColor = Color.Black
val qmuiTextDescColor = Color(0xFF666666)
compose/src/main/java/com/qmuiteam/compose/ui/QMUIListCommonItem.kt
+144
View File
@@ -0,0 +1,144 @@
package com.qmuiteam.compose.ui
import androidx.compose.foundation.Indication
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.*
import androidx.compose.material.Text
import androidx.compose.material.ripple.rememberRipple
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawWithContent
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.StrokeCap
import androidx.compose.ui.graphics.drawscope.DrawScope
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.TextUnit
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
interface QMUIItemAccessory {
@Composable
fun Compose()
}
class QMUIItemAccessoryChevron(val tint: Color) : QMUIItemAccessory {
@Composable
override fun Compose() {
}
}
fun DrawScope.drawTopSeparator(color: Color = qmuiSeparatorColor, insetStart: Dp = 0.dp, insetEnd: Dp = 0.dp) {
drawLine(
color = color,
start = Offset(insetStart.toPx(), 0f),
end = Offset(size.width - insetEnd.toPx(), 0f),
cap = StrokeCap.Square
)
}
fun DrawScope.drawBottomSeparator(color: Color = qmuiSeparatorColor, insetStart: Dp = 0.dp, insetEnd: Dp = 0.dp) {
drawLine(
color = color,
start = Offset(insetStart.toPx(), size.height),
end = Offset(size.width - insetEnd.toPx(), size.height),
cap = StrokeCap.Square
)
}
fun DrawScope.drawLeftSeparator(color: Color = qmuiSeparatorColor, insetStart: Dp = 0.dp, insetEnd: Dp = 0.dp) {
drawLine(
color = color,
start = Offset(0f, insetStart.toPx()),
end = Offset(0f, size.height - insetEnd.toPx()),
cap = StrokeCap.Square
)
}
fun DrawScope.drawRightSeparator(color: Color = qmuiSeparatorColor, insetStart: Dp = 0.dp, insetEnd: Dp = 0.dp) {
drawLine(
color = color,
start = Offset(size.width, insetStart.toPx()),
end = Offset(size.width, size.height - insetEnd.toPx()),
cap = StrokeCap.Square
)
}
@Composable
fun QMUIItem(
title: String,
detail: String = "",
background: Color = Color.Transparent,
indication: Indication = rememberRipple(color = qmuiIndicationColor),
titleFontSize: TextUnit = 16.sp,
titleOnlyFontSize: TextUnit = 17.sp,
titleColor: Color = qmuiTextMainColor,
titleFontWeight: FontWeight = FontWeight.Medium,
titleFontFamily: FontFamily? = null,
titleLineHeight: TextUnit = 20.sp,
detailFontSize: TextUnit = 12.sp,
detailColor: Color = qmuiTextDescColor,
detailFontWeight: FontWeight = FontWeight.Normal,
detailFontFamily: FontFamily? = null,
detailLineHeight: TextUnit = 17.sp,
minHeight: Dp = 56.dp,
paddingHor: Dp = qmuiCommonHorSpace,
paddingVer: Dp = 12.dp,
gapBetweenTitleAndDetail: Dp = 4.dp,
accessory: QMUIItemAccessory? = null,
onDrawOver: (DrawScope.() -> Unit)? = null,
onClick: (() -> Unit)? = null
) {
Row(modifier = Modifier
.fillMaxWidth()
.defaultMinSize(minHeight = minHeight)
.background(background)
.drawWithContent {
drawContent()
onDrawOver?.invoke(this)
}
.clickable(
enabled = onClick != null,
interactionSource = remember { MutableInteractionSource() },
indication = indication
) {
onClick?.invoke()
}
.padding(horizontal = paddingHor, vertical = paddingVer),
verticalAlignment = Alignment.CenterVertically
) {
Column(modifier = Modifier.weight(1f)) {
Text(
text = title,
color = titleColor,
modifier = Modifier.fillMaxWidth(),
fontSize = if (detail.isNotBlank()) titleFontSize else titleOnlyFontSize,
fontWeight = titleFontWeight,
fontFamily = titleFontFamily,
lineHeight = titleLineHeight
)
if (detail.isNotBlank()) {
Text(
text = detail,
color = detailColor,
modifier = Modifier
.fillMaxWidth()
.padding(top = gapBetweenTitleAndDetail),
fontSize = detailFontSize,
fontWeight = detailFontWeight,
fontFamily = detailFontFamily,
lineHeight = detailLineHeight
)
}
}
accessory?.Compose()
}
}
qmuidemo/src/main/java/com/qmuiteam/qmuidemo/fragment/QDDialogFragment.kt
+54 -27
View File
@@ -5,6 +5,8 @@ import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.foundation.rememberScrollState
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
@@ -15,9 +17,7 @@ import androidx.compose.ui.unit.sp
import com.qmuiteam.compose.modal.QMUIDialogMsg
import com.qmuiteam.compose.modal.QMUIModalAction
import com.qmuiteam.compose.modal.qmuiDialog
import com.qmuiteam.compose.ui.QMUITopBar
import com.qmuiteam.compose.ui.QMUITopBarBackIconItem
import com.qmuiteam.compose.ui.QMUITopBarTextItem
import com.qmuiteam.compose.ui.*
import com.qmuiteam.qmui.arch.annotation.LatestVisitRecord
import com.qmuiteam.qmui.widget.dialog.QMUIDialog
import com.qmuiteam.qmuidemo.R
@@ -32,7 +32,9 @@ class QDDialogFragment(): ComposeBaseFragment() {
@Composable
override fun PageContent() {
Column(modifier = Modifier.fillMaxSize()) {
QMUITopBar(
val scrollState = rememberLazyListState()
QMUITopBarWithLazyScrollState(
scrollState = scrollState,
title = "QMUIDialog",
leftItems = arrayListOf(
QMUITopBarBackIconItem{
@@ -47,36 +49,61 @@ class QDDialogFragment(): ComposeBaseFragment() {
)
val view = LocalView.current
LazyColumn(
state = scrollState,
modifier = Modifier
.fillMaxWidth()
.weight(1f)
.background(Color.White)
){
item {
Text(
text = "消息类型对话框",
modifier = Modifier.fillMaxWidth()
.height(48.dp)
.padding(horizontal = 16.dp)
.clickable {
view.qmuiDialog { modal ->
QMUIDialogMsg(modal,
"这是标题",
"这是一丢丢有趣但是没啥用的内容",
listOf(
QMUIModalAction("取 消", true, Color.Blue){
it.dismiss()
},
QMUIModalAction("确 定", true, Color.Blue){
Toast.makeText(view.context, "确定拉!!!", Toast.LENGTH_SHORT).show()
it.dismiss()
}
)
QMUIItem(
title = "消息类型对话框",
onDrawOver = {
drawBottomSeparator(insetStart = qmuiCommonHorSpace, insetEnd = qmuiCommonHorSpace)
}
){
view.qmuiDialog { modal ->
QMUIDialogMsg(modal,
"这是标题",
"这是一丢丢有趣但是没啥用的内容",
listOf(
QMUIModalAction("取 消") {
it.dismiss()
},
QMUIModalAction("确 定") {
Toast
.makeText(view.context, "确定啦!!!", Toast.LENGTH_SHORT)
.show()
it.dismiss()
}
)
}.show()
},
fontSize = 15.sp
)
)
}.show()
}
}
item {
QMUIItem(
title = "列表类型对话框"
){
view.qmuiDialog { modal ->
QMUIDialogMsg(modal,
"这是标题",
"这是一丢丢有趣但是没啥用的内容",
listOf(
QMUIModalAction("取 消") {
it.dismiss()
},
QMUIModalAction("确 定") {
Toast
.makeText(view.context, "确定啦!!!", Toast.LENGTH_SHORT)
.show()
it.dismiss()
}
)
)
}.show()
}
}
}
}