GithubStar/QMUI_Android
1
0
Fork 0
mirror of https://github.com/Tencent/QMUI_Android.git synced 2026-10-18 13:11:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: QMUIDialog, QMUIItem

Browse Source
This commit is contained in:
cgspine
2022-01-12 11:58:22 +08:00
parent 1edc80bd01
commit 950af79fc4
13 changed files with 238 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
compose/src/main/java/com/qmuiteam/compose/ex/DrawScopeEx.kt
+45
View File
@@ -0,0 +1,45 @@
package com.qmuiteam.compose.ex
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.unit.Dp
import androidx.compose.ui.unit.dp
import com.qmuiteam.compose.ui.qmuiSeparatorColor
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
)
}
compose/src/main/java/com/qmuiteam/compose/modal/QMUIDialog.kt
+28 -4
View File
@@ -6,6 +6,10 @@ import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.collectIsPressedAsState
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.LazyListScope
import androidx.compose.foundation.lazy.LazyListState
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
@@ -23,6 +27,7 @@ import androidx.compose.ui.unit.TextUnit
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.qmuiteam.compose.ui.qmuiCommonHorSpace
import com.qmuiteam.compose.ui.qmuiDialogVerEdgeProtectionMargin
import com.qmuiteam.compose.ui.qmuiPrimaryColor
val DefaultDialogPaddingHor = 20.dp
@@ -32,7 +37,7 @@ val DefaultDialogPaddingHor = 20.dp
fun QMUIDialog(
modal: QMUIModal,
horEdge: Dp = qmuiCommonHorSpace,
verEdge: Dp = 20.dp,
verEdge: Dp = qmuiDialogVerEdgeProtectionMargin,
widthLimit: Dp = 360.dp,
radius: Dp = 2.dp,
background: Color = Color.White,
@@ -93,6 +98,25 @@ fun QMUIDialogMsg(
}
}
@Composable
fun QMUIDialogList(
modal: QMUIModal,
maxHeight: Dp = Dp.Unspecified,
state: LazyListState = rememberLazyListState(),
contentPadding: PaddingValues = PaddingValues(vertical = 8.dp),
children: LazyListScope.() -> Unit
) {
LazyColumn(
state = state,
modifier = Modifier
.fillMaxWidth()
.heightIn(0.dp, maxHeight),
contentPadding = contentPadding
) {
children()
}
}
@Composable
fun QMUIDialogTitle(
text: String,
@@ -161,7 +185,7 @@ fun QMUIDialogAction(
color: Color = qmuiPrimaryColor,
fontWeight: FontWeight? = FontWeight.Bold,
fontFamily: FontFamily? = null,
paddingVer:Dp = 9.dp,
paddingVer: Dp = 9.dp,
paddingHor: Dp = 14.dp,
enabled: Boolean = true,
onClick: () -> Unit
@@ -194,8 +218,8 @@ fun View.qmuiDialog(
maskCancellable: Boolean = true,
modalHostProvider: ModalHostProvider = DefaultModalHostProvider,
animationDurationMillis: Int = 300,
horEdge: Dp = 20.dp,
verEdge: Dp = 20.dp,
horEdge: Dp = qmuiCommonHorSpace,
verEdge: Dp = qmuiDialogVerEdgeProtectionMargin,
widthLimit: Dp = 360.dp,
radius: Dp = 12.dp,
background: Color = Color.White,
compose/src/main/java/com/qmuiteam/compose/ui/DefaultConfig.kt
+3
View File
@@ -17,4 +17,7 @@ val qmuiCommonHorSpace = 20.dp
val qmuiScrollAlphaChangeMaxOffset = 20.dp
val qmuiDialogVerEdgeProtectionMargin = 44.dp
compose/src/main/java/com/qmuiteam/compose/ui/QMUIIcon.kt
+57
View File
@@ -0,0 +1,57 @@
package com.qmuiteam.compose.ui
import androidx.compose.foundation.Image
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.res.painterResource
import com.qmuiteam.compose.R
@Composable
fun QMUIChevronIcon(tint: Color? = null) {
Image(
painter = painterResource(id = R.drawable.ic_qmui_chevron),
contentDescription = "",
colorFilter = tint?.let { ColorFilter.tint(it) }
)
}
enum class CheckStatus {
none, partial, checked
}
@Composable
fun QMUICheckBox(
status: CheckStatus = CheckStatus.none,
isEnabled: Boolean = true,
tint: Color?
) {
val icon = when (status) {
CheckStatus.checked -> R.drawable.ic_qmui_checkbox_checked
CheckStatus.partial -> R.drawable.ic_qmui_checkbox_partial
else -> R.drawable.ic_qmui_checkbox_normal
}
Image(
painter = painterResource(id = icon),
contentDescription = "",
colorFilter = tint?.let { ColorFilter.tint(it) },
modifier = Modifier.let {
if (isEnabled) {
it
} else {
it.alpha(0.5f)
}
}
)
}
@Composable
fun QMUIMarkIcon(tint: Color? = null) {
Image(
painter = painterResource(id = R.drawable.ic_qmui_mark),
contentDescription = "",
colorFilter = tint?.let { ColorFilter.tint(it) }
)
}
compose/src/main/java/com/qmuiteam/compose/ui/QMUIListCommonItem.kt → compose/src/main/java/com/qmuiteam/compose/ui/QMUIItem.kt
+2 -52
View File
@@ -12,10 +12,7 @@ import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawBehind
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
@@ -24,53 +21,6 @@ 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(
@@ -93,7 +43,7 @@ fun QMUIItem(
paddingHor: Dp = qmuiCommonHorSpace,
paddingVer: Dp = 12.dp,
gapBetweenTitleAndDetail: Dp = 4.dp,
accessory: QMUIItemAccessory? = null,
accessory: @Composable (RowScope.() -> Unit)? = null,
drawBehind: (DrawScope.() -> Unit)? = null,
onClick: (() -> Unit)? = null
) {
@@ -139,6 +89,6 @@ fun QMUIItem(
}
}
accessory?.Compose()
accessory?.invoke(this)
}
}
compose/src/main/java/com/qmuiteam/compose/ui/QMUITopBar.kt
+1 -3
View File
@@ -10,8 +10,6 @@ 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.alpha
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.graphics.*
import androidx.compose.ui.layout.*
import androidx.compose.ui.platform.InspectorInfo
@@ -89,7 +87,7 @@ open class QMUITopBarBackIconItem(
enable: Boolean = true,
onClick: () -> Unit
) : QMUITopBarIconItem(
R.drawable.qmui_icon_topbar_back,
R.drawable.ic_qmui_topbar_back,
"返回",
tint,
pressAlpha,
compose/src/main/res/drawable/ic_qmui_checkbox_checked.xml
+12
View File
@@ -0,0 +1,12 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="18dp"
android:height="18dp"
android:viewportWidth="18"
android:viewportHeight="18">
<path
android:pathData="M9,18C13.9706,18 18,13.9706 18,9C18,4.0294 13.9706,0 9,0C4.0294,0 0,4.0294 0,9C0,13.9706 4.0294,18 9,18ZM4,8L14,8L14,10L4,10L4,8Z"
android:strokeWidth="1"
android:fillColor="#FF00A8E1"
android:fillType="evenOdd"
android:strokeColor="#00000000"/>
</vector>
compose/src/main/res/drawable/ic_qmui_checkbox_normal.xml
+12
View File
@@ -0,0 +1,12 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="18dp"
android:height="18dp"
android:viewportWidth="18"
android:viewportHeight="18">
<path
android:pathData="M9,0C13.9706,0 18,4.0294 18,9C18,13.9706 13.9706,18 9,18C4.0294,18 0,13.9706 0,9C0,4.0294 4.0294,0 9,0ZM9,1.5C4.8579,1.5 1.5,4.8579 1.5,9C1.5,13.1421 4.8579,16.5 9,16.5C13.1421,16.5 16.5,13.1421 16.5,9C16.5,4.8579 13.1421,1.5 9,1.5Z"
android:strokeWidth="1"
android:fillColor="#CCCCCC"
android:fillType="nonZero"
android:strokeColor="#00000000"/>
</vector>
compose/src/main/res/drawable/ic_qmui_checkbox_partial.xml
+12
View File
@@ -0,0 +1,12 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="18dp"
android:height="18dp"
android:viewportWidth="18"
android:viewportHeight="18">
<path
android:pathData="M9,0C13.9706,0 18,4.0294 18,9C18,13.9706 13.9706,18 9,18C4.0294,18 0,13.9706 0,9C0,4.0294 4.0294,0 9,0ZM12,6L7.5,10.5L6,9L4.5,10.5L7.5,13.5L13.5,7.5L12,6Z"
android:strokeWidth="1"
android:fillColor="#FF00A8E1"
android:fillType="evenOdd"
android:strokeColor="#00000000"/>
</vector>
compose/src/main/res/drawable/ic_qmui_chevron.xml
+12
View File
@@ -0,0 +1,12 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="6dp"
android:height="9dp"
android:viewportWidth="6"
android:viewportHeight="9">
<path
android:pathData="M3.11747,4.5l-3.11747,3.5109l1.14712,0.9891l3.99574,-4.5l-3.99574,-4.5l-1.14712,0.9891z"
android:strokeWidth="1"
android:fillColor="#666666"
android:fillType="nonZero"
android:strokeColor="#00000000"/>
</vector>
compose/src/main/res/drawable/ic_qmui_mark.xml
+12
View File
@@ -0,0 +1,12 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="12dp"
android:height="12dp"
android:viewportWidth="12"
android:viewportHeight="12">
<path
android:pathData="M0,7l1.5,-1.5l2.5,2.5l6,-6l1.5,1.5l-7.5,7.5z"
android:strokeWidth="1"
android:fillColor="#FF00A8E1"
android:fillType="evenOdd"
android:strokeColor="#00000000"/>
</vector>
compose/src/main/res/drawable/qmui_icon_topbar_back.xml → compose/src/main/res/drawable/ic_qmui_topbar_back.xml
View File
qmuidemo/src/main/java/com/qmuiteam/qmuidemo/fragment/QDDialogFragment.kt
+42 -35
View File
@@ -2,18 +2,17 @@ package com.qmuiteam.qmuidemo.fragment
import android.widget.Toast
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
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
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalView
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.qmuiteam.compose.modal.QMUIDialogList
import com.qmuiteam.compose.modal.QMUIDialogMsg
import com.qmuiteam.compose.modal.QMUIModalAction
import com.qmuiteam.compose.modal.qmuiDialog
@@ -27,7 +26,7 @@ import com.qmuiteam.qmuidemo.lib.annotation.Widget
@Widget(widgetClass = QMUIDialog::class, iconRes = R.mipmap.icon_grid_dialog)
@LatestVisitRecord
class QDDialogFragment(): ComposeBaseFragment() {
class QDDialogFragment() : ComposeBaseFragment() {
@Composable
override fun PageContent() {
@@ -37,13 +36,13 @@ class QDDialogFragment(): ComposeBaseFragment() {
scrollState = scrollState,
title = "QMUIDialog",
leftItems = arrayListOf(
QMUITopBarBackIconItem{
QMUITopBarBackIconItem {
popBackStack()
}
),
rightItems = arrayListOf(
QMUITopBarTextItem("Test"){
startFragment(QDAboutFragment())
QMUITopBarTextItem("Test") {
startFragment(QDAboutFragment())
}
)
)
@@ -54,38 +53,14 @@ class QDDialogFragment(): ComposeBaseFragment() {
.fillMaxWidth()
.weight(1f)
.background(Color.White)
){
) {
item {
QMUIItem(
title = "消息类型对话框",
drawBehind = {
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()
}
}
item {
QMUIItem(
title = "列表类型对话框"
){
) {
view.qmuiDialog { modal ->
QMUIDialogMsg(modal,
"这是标题",
@@ -105,6 +80,38 @@ class QDDialogFragment(): ComposeBaseFragment() {
}.show()
}
}
item {
QMUIItem(
title = "列表类型对话框"
) {
view.qmuiDialog { modal ->
QMUIDialogList(modal, maxHeight = 500.dp) {
items(200){ index ->
QMUIItem(title = "第${index + 1}项") {
Toast.makeText(view.context, "你点了第${index + 1}项", Toast.LENGTH_SHORT).show()
}
}
}
}.show()
}
}
item {
QMUIItem(
title = "输入类型对话框"
) {
view.qmuiDialog { modal ->
QMUIDialogList(modal, maxHeight = 500.dp) {
items(200){ index ->
QMUIItem(title = "第${index + 1}项") {
Toast.makeText(view.context, "你点了第${index + 1}项", Toast.LENGTH_SHORT).show()
}
}
}
}.show()
}
}
}
}
}