feat: Dialog Check List.

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<QMUIModalAction>
+){
+    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<String>,
+    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<String>,
+    checked: Set<Int>,
+    disabled: Set<Int> = 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
+            )
+        }
     }
 }
 

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)

compose/src/main/res/drawable/ic_qmui_checkbox_checked.xml

@@ -3,10 +3,10 @@
     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"/>
+    <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_checkbox_partial.xml

@@ -3,10 +3,10 @@
     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"/>
+    <path
+        android:fillColor="#FF00A8E1"
+        android:fillType="evenOdd"
+        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:strokeColor="#00000000" />
 </vector>

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<String>()
+                                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<String>()
+                                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()
                     }