From cefa8f94bc8ad8039e6b774e979a7cb81fcdf7ac Mon Sep 17 00:00:00 2001 From: cgspine Date: Wed, 29 Dec 2021 15:54:16 +0800 Subject: [PATCH] feat: QMUIItem --- .../com/qmuiteam/compose/modal/QMUIModal.kt | 5 +- .../com/qmuiteam/compose/ui/DefaultConfig.kt | 3 + .../qmuiteam/compose/ui/QMUIListCommonItem.kt | 144 ++++++++++++++++++ .../qmuidemo/fragment/QDDialogFragment.kt | 81 ++++++---- 4 files changed, 204 insertions(+), 29 deletions(-) create mode 100644 compose/src/main/java/com/qmuiteam/compose/ui/QMUIListCommonItem.kt diff --git a/compose/src/main/java/com/qmuiteam/compose/modal/QMUIModal.kt b/compose/src/main/java/com/qmuiteam/compose/modal/QMUIModal.kt index 6d6e3d90..c8ecc441 100644 --- a/compose/src/main/java/com/qmuiteam/compose/modal/QMUIModal.kt +++ b/compose/src/main/java/com/qmuiteam/compose/modal/QMUIModal.kt @@ -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 ) diff --git a/compose/src/main/java/com/qmuiteam/compose/ui/DefaultConfig.kt b/compose/src/main/java/com/qmuiteam/compose/ui/DefaultConfig.kt index 57e3f53f..3a46d1fd 100644 --- a/compose/src/main/java/com/qmuiteam/compose/ui/DefaultConfig.kt +++ b/compose/src/main/java/com/qmuiteam/compose/ui/DefaultConfig.kt @@ -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) diff --git a/compose/src/main/java/com/qmuiteam/compose/ui/QMUIListCommonItem.kt b/compose/src/main/java/com/qmuiteam/compose/ui/QMUIListCommonItem.kt new file mode 100644 index 00000000..0c456854 --- /dev/null +++ b/compose/src/main/java/com/qmuiteam/compose/ui/QMUIListCommonItem.kt @@ -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() + } +} \ No newline at end of file diff --git a/qmuidemo/src/main/java/com/qmuiteam/qmuidemo/fragment/QDDialogFragment.kt b/qmuidemo/src/main/java/com/qmuiteam/qmuidemo/fragment/QDDialogFragment.kt index 0c492f73..16a8257e 100644 --- a/qmuidemo/src/main/java/com/qmuiteam/qmuidemo/fragment/QDDialogFragment.kt +++ b/qmuidemo/src/main/java/com/qmuiteam/qmuidemo/fragment/QDDialogFragment.kt @@ -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() + } } } }