diff --git a/compose/src/main/java/com/qmuiteam/compose/modal/QMUIDialog.kt b/compose/src/main/java/com/qmuiteam/compose/modal/QMUIDialog.kt index 26fda810..71efc2ef 100644 --- a/compose/src/main/java/com/qmuiteam/compose/modal/QMUIDialog.kt +++ b/compose/src/main/java/com/qmuiteam/compose/modal/QMUIDialog.kt @@ -1,17 +1,17 @@ package com.qmuiteam.compose.modal import android.view.View +import androidx.compose.foundation.Image +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.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.lazy.* import androidx.compose.foundation.shape.RoundedCornerShape 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 @@ -19,6 +19,8 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.draw.alpha import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.ColorFilter +import androidx.compose.ui.res.painterResource import androidx.compose.ui.text.font.FontFamily import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.style.TextAlign @@ -26,9 +28,8 @@ import androidx.compose.ui.unit.Dp 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 +import com.qmuiteam.compose.R +import com.qmuiteam.compose.ui.* val DefaultDialogPaddingHor = 20.dp @@ -69,6 +70,29 @@ fun QMUIDialog( } } +@Composable +fun QMUIDialogActions( + modal: QMUIModal, + actions: List +){ + Row( + modifier = Modifier + .fillMaxWidth() + .padding(start = 6.dp, end = 6.dp, bottom = 8.dp), + horizontalArrangement = Arrangement.End + ) { + actions.forEach { + QMUIDialogAction( + text = it.text, + enabled = it.enabled, + color = it.color + ) { + it.onClick(modal) + } + } + } +} + @Composable fun QMUIDialogMsg( modal: QMUIModal, @@ -79,22 +103,7 @@ fun QMUIDialogMsg( Column { QMUIDialogTitle(title) QMUIDialogMsgContent(content) - Row( - modifier = Modifier - .fillMaxWidth() - .padding(start = 6.dp, end = 6.dp, bottom = 8.dp), - horizontalArrangement = Arrangement.End - ) { - actions.forEach { - QMUIDialogAction( - text = it.text, - enabled = it.enabled, - color = it.color - ) { - it.onClick(modal) - } - } - } + QMUIDialogActions(modal, actions) } } @@ -104,7 +113,7 @@ fun QMUIDialogList( maxHeight: Dp = Dp.Unspecified, state: LazyListState = rememberLazyListState(), contentPadding: PaddingValues = PaddingValues(vertical = 8.dp), - children: LazyListScope.() -> Unit + children: LazyListScope.(QMUIModal) -> Unit ) { LazyColumn( state = state, @@ -113,7 +122,107 @@ fun QMUIDialogList( .heightIn(0.dp, maxHeight), contentPadding = contentPadding ) { - children() + children(modal) + } +} + +@Composable +fun QMUIDialogMarkList( + modal: QMUIModal, + list: List, + markIndex: Int, + state: LazyListState = rememberLazyListState(markIndex), + maxHeight: Dp = Dp.Unspecified, + itemIndication: Indication = rememberRipple(color = qmuiIndicationColor), + itemTextSize: TextUnit = 17.sp, + itemTextColor: Color = qmuiTextMainColor, + itemTextFontWeight: FontWeight = FontWeight.Medium, + itemTextFontFamily: FontFamily? = null, + itemMarkTintColor: Color = qmuiPrimaryColor, + contentPadding: PaddingValues = PaddingValues(vertical = 8.dp), + onItemClick: (modal: QMUIModal, index: Int) -> Unit +) { + QMUIDialogList(modal, maxHeight, state, contentPadding) { + itemsIndexed(list) { index, item -> + QMUIItem( + title = item, + indication = itemIndication, + titleOnlyFontSize = itemTextSize, + titleColor = itemTextColor, + titleFontSize = itemTextSize, + titleFontWeight = itemTextFontWeight, + titleFontFamily = itemTextFontFamily, + accessory = { + if (markIndex == index) { + Image( + painter = painterResource(id = R.drawable.ic_qmui_mark), + contentDescription = "", + colorFilter = ColorFilter.tint(itemMarkTintColor) + ) + } + } + ) { + onItemClick(modal, index) + } + } + } +} + + +@Composable +fun QMUIDialogMutiCheckList( + modal: QMUIModal, + list: List, + checked: Set, + disabled: Set = emptySet(), + disableAlpha: Float = 0.5f, + state: LazyListState = rememberLazyListState(0), + maxHeight: Dp = Dp.Unspecified, + itemIndication: Indication = rememberRipple(color = qmuiIndicationColor), + itemTextSize: TextUnit = 17.sp, + itemTextColor: Color = qmuiTextMainColor, + itemTextFontWeight: FontWeight = FontWeight.Medium, + itemTextFontFamily: FontFamily? = null, + itemCheckNormalTint: Color = qmuiSeparatorColor, + itemCheckCheckedTint: Color = qmuiPrimaryColor, + contentPadding: PaddingValues = PaddingValues(vertical = 8.dp), + onItemClick: (modal: QMUIModal, index: Int) -> Unit +) { + QMUIDialogList(modal, maxHeight, state, contentPadding) { + itemsIndexed(list) { index, item -> + val isDisabled = disabled.contains(index) + val onClick: (() -> Unit)? = if(isDisabled) null else { + { + onItemClick(modal, index) + } + } + QMUIItem( + title = item, + indication = itemIndication, + titleOnlyFontSize = itemTextSize, + titleColor = itemTextColor, + titleFontSize = itemTextSize, + titleFontWeight = itemTextFontWeight, + titleFontFamily = itemTextFontFamily, + alpha = if(isDisabled) disableAlpha else 1f, + accessory = { + if (checked.contains(index)) { + Image( + painter = painterResource(id = R.drawable.ic_qmui_checkbox_checked), + contentDescription = "", + colorFilter = ColorFilter.tint(itemCheckCheckedTint) + ) + } else { + Image( + painter = painterResource(id = R.drawable.ic_qmui_checkbox_normal), + contentDescription = "", + colorFilter = ColorFilter.tint(itemCheckNormalTint) + ) + } + }, + onClick = onClick + ) + } } } diff --git a/compose/src/main/java/com/qmuiteam/compose/ui/QMUIItem.kt b/compose/src/main/java/com/qmuiteam/compose/ui/QMUIItem.kt index a1801c90..9f7b758c 100644 --- a/compose/src/main/java/com/qmuiteam/compose/ui/QMUIItem.kt +++ b/compose/src/main/java/com/qmuiteam/compose/ui/QMUIItem.kt @@ -11,6 +11,7 @@ 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.drawBehind import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.drawscope.DrawScope @@ -26,6 +27,7 @@ import androidx.compose.ui.unit.sp fun QMUIItem( title: String, detail: String = "", + alpha: Float = 1f, background: Color = Color.Transparent, indication: Indication = rememberRipple(color = qmuiIndicationColor), titleFontSize: TextUnit = 16.sp, @@ -50,6 +52,7 @@ fun QMUIItem( Row(modifier = Modifier .fillMaxWidth() .defaultMinSize(minHeight = minHeight) + .alpha(alpha) .background(background) .drawBehind { drawBehind?.invoke(this) diff --git a/compose/src/main/res/drawable/ic_qmui_checkbox_checked.xml b/compose/src/main/res/drawable/ic_qmui_checkbox_checked.xml index 98f7472c..239aa91b 100644 --- a/compose/src/main/res/drawable/ic_qmui_checkbox_checked.xml +++ b/compose/src/main/res/drawable/ic_qmui_checkbox_checked.xml @@ -3,10 +3,10 @@ android:height="18dp" android:viewportWidth="18" android:viewportHeight="18"> - + diff --git a/compose/src/main/res/drawable/ic_qmui_checkbox_partial.xml b/compose/src/main/res/drawable/ic_qmui_checkbox_partial.xml index b84eef7d..1deba276 100644 --- a/compose/src/main/res/drawable/ic_qmui_checkbox_partial.xml +++ b/compose/src/main/res/drawable/ic_qmui_checkbox_partial.xml @@ -3,10 +3,10 @@ android:height="18dp" android:viewportWidth="18" android:viewportHeight="18"> - + 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 7cecf776..d3324f30 100644 --- a/qmuidemo/src/main/java/com/qmuiteam/qmuidemo/fragment/QDDialogFragment.kt +++ b/qmuidemo/src/main/java/com/qmuiteam/qmuidemo/fragment/QDDialogFragment.kt @@ -1,22 +1,35 @@ +/* + * Tencent is pleased to support the open source community by making QMUI_Android available. + * + * Copyright (C) 2017-2018 THL A29 Limited, a Tencent company. All rights reserved. + * + * Licensed under the MIT License (the "License"); you may not use this file except in + * compliance with the License. You may obtain a copy of the License at + * + * http://opensource.org/licenses/MIT + * + * Unless required by applicable law or agreed to in writing, software distributed under the License is + * distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, + * either express or implied. See the License for the specific language governing permissions and + * limitations under the License. + */ package com.qmuiteam.qmuidemo.fragment import android.widget.Toast import androidx.compose.foundation.background +import androidx.compose.foundation.layout.BoxWithConstraints 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.runtime.Composable +import androidx.compose.runtime.* import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.platform.LocalView import androidx.compose.ui.unit.dp import com.qmuiteam.compose.ex.drawBottomSeparator -import com.qmuiteam.compose.modal.QMUIDialogList -import com.qmuiteam.compose.modal.QMUIDialogMsg -import com.qmuiteam.compose.modal.QMUIModalAction -import com.qmuiteam.compose.modal.qmuiDialog +import com.qmuiteam.compose.modal.* import com.qmuiteam.compose.ui.* import com.qmuiteam.qmui.arch.annotation.LatestVisitRecord import com.qmuiteam.qmui.widget.dialog.QMUIDialog @@ -84,7 +97,10 @@ class QDDialogFragment() : ComposeBaseFragment() { item { QMUIItem( - title = "列表类型对话框" + title = "列表类型对话框", + drawBehind = { + drawBottomSeparator(insetStart = qmuiCommonHorSpace, insetEnd = qmuiCommonHorSpace) + } ) { view.qmuiDialog { modal -> QMUIDialogList(modal, maxHeight = 500.dp) { @@ -100,15 +116,81 @@ class QDDialogFragment() : ComposeBaseFragment() { item { QMUIItem( - title = "输入类型对话框" + title = "单选类型浮层", + drawBehind = { + drawBottomSeparator(insetStart = qmuiCommonHorSpace, insetEnd = qmuiCommonHorSpace) + } ) { 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() + val list = remember { + val items = arrayListOf() + for(i in 0 until 500){ + items.add("Item $i") + } + items + } + val markIndex by remember { + mutableStateOf(20) + } + QMUIDialogMarkList( + modal, + maxHeight = 500.dp, + list = list, + markIndex = markIndex + ) { modal, index -> + Toast.makeText(view.context, "你点了第${index + 1}项", Toast.LENGTH_SHORT).show() +// modal.dismiss() + } + }.show() + } + } + + item { + QMUIItem( + title = "多选类型浮层", + drawBehind = { + drawBottomSeparator(insetStart = qmuiCommonHorSpace, insetEnd = qmuiCommonHorSpace) + } + ) { + view.qmuiDialog { modal -> + val list = remember { + val items = arrayListOf() + for(i in 0 until 500){ + items.add("Item $i") + } + items + } + val checked = remember { + mutableStateListOf(0, 5, 10, 20) + } + val disable = remember { + mutableStateListOf(5, 10) + } + Column() { + QMUIDialogMutiCheckList( + modal, + maxHeight = 500.dp, + list = list, + checked = checked.toSet(), + disabled = disable.toSet() + ) { _, index -> + if(checked.contains(index)){ + checked.remove(index) + }else{ + checked.add(index) } } + QMUIDialogActions(modal = modal, actions = listOf( + QMUIModalAction("取 消") { + it.dismiss() + }, + QMUIModalAction("确 定") { + Toast + .makeText(view.context, "你选择了: ${checked.joinToString(",")}", Toast.LENGTH_SHORT) + .show() + it.dismiss() + } + )) } }.show() }