时间戳

首页 > 解决方案 > 如何在jetpack compose中正确使用自定义AlertDialog？

android - 如何在jetpack compose中正确使用自定义AlertDialog？

问题描述

我有TeamCard它只显示队名。

@Composable
fun TeamCard(team: Teams , openLink :()-> Unit) {
    Box(
        contentAlignment = Alignment.Center,
        modifier = Modifier
            ..
            .clickable { openLink()}
    ) {
        Row(
           ..
        ) {
           ..
        }
    }
}

我们有一个TeamScreen所有团队都在展示的地方

@Composable
fun TeamsScreen() {

    val openDialog = remember { mutableStateOf(false) }

    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(color = darkBackground),
        contentAlignment = Alignment.Center
    ) {

        AppDialog( link = "https://www.fcbarcelona.com/en/ ", dialogState = openDialog.value)
        Image(.. )
       Row(..) {
        Column(
                         verticalArrangement = Arrangement.spacedBy(20.dp)
            ) {
                TeamCard(team = allTeamsLists[0]){openDialog.value = true }
                TeamCard(team = allTeamsLists[1]){ openDialog.value = true}
                TeamCard(team = allTeamsLists[2]){ openDialog.value = true}
            }
             Column(
            verticalArrangement = Arrangement.spacedBy(20.dp)
            ) {
                TeamCard(team = allTeamsLists[3]){}
                TeamCard(team = allTeamsLists[4]){}
            }
        }
    }
}

现在，当我想单击任何一个时TeamCard，应该有一个带有链接和十字按钮的自定义AlertDialog弹出窗口以将其关闭。

@Composable
fun AppDialog(
    link: String,
    modifier: Modifier = Modifier,
    dialogState: Boolean = false,
    onDialogPositiveButtonClicked: (() -> Unit)? = null,
    onDialogStateChange: ((Boolean) -> Unit)? = null,
    onDismissRequest: (() -> Unit)? = null,
) {

    val buttonPaddingAll = 8.dp
    val dialogShape = RoundedCornerShape(16.dp)
    val context = LocalContext.current

    if (dialogState) {
        AlertDialog(
            onDismissRequest = {
                Toast.makeText(context, "outside dialog is clicked ", Toast.LENGTH_SHORT).show()
                onDialogStateChange?.invoke(true)
                onDismissRequest?.invoke()
            },
            title = null,
            text = null,
            buttons = {


                Row(
                    modifier = Modifier.padding(all = buttonPaddingAll),
                    horizontalArrangement = Arrangement.Center
                ) {
                    TextButton(
                        modifier = Modifier,
                        onClick = {
                            Toast.makeText(context, "link  is clicked ", Toast.LENGTH_SHORT).show()

                            //Open link to web
                        }
                    ) {
                        Text(text = link, color = MaterialTheme.colors.onSurface)
                    }
                    Icon(
                        imageVector = Icons.Default.Add.also { rotationMatrix(45f) },
                        contentDescription = null,
                        modifier = Modifier
                            .rotate(45f)
                            .clickable {
                                Toast.makeText(context, "cancle is clicked ", Toast.LENGTH_SHORT).show()
                                !dialogState
                            },
                        tint = Color.Black.copy(alpha = 0.8f)
                    )

                }

            },
            properties = DialogProperties(dismissOnBackPress = true, dismissOnClickOutside = true),
            modifier = modifier,
            shape = dialogShape
        )
    }
}

并allTeamsLists有一个所有团队链接和团队名称关联示例的列表。

Teams( R.drawable.logo_1, "Real Madrid" , R.drawable.player1, "https://www.realmadrid.com/ " , R.drawable.blue_hands)

我无法正确设置它，请建议我更好的方法。

此外，每次我单击特定的团队卡时，都会显示与其关联的链接的警报。

标签： androidkotlinandroid-alertdialogandroid-jetpack-compose

解决方案

您存储一个简单的布尔值，指示警报当前是否打开。如果您需要显示特定的 URL，这些信息是不够的。

相反，存储所选命令的可选 URL 并在它不为空时显示警报。

我还建议您避免像现在一样重复代码。无需将多个Column-s 放入 aRow并手动填充它们，您可以使用LazyVerticalGrid：

val dialogUrl by remember { mutableStateOf<String?>(null) }
if (dialogUrl != null) {
    AppDialog(
        dialogUrl,
        onDismissRequest = { 
            dialogUrl = null 
        },
    )
} 
LazyVerticalGrid(
    cells = GridCells.Fixed(3),
    verticalArrangement = Arrangement.spacedBy(20.dp),
) {
    items(allTeamsLists) { team ->
        TeamCard(team = team){
            dialogUrl = team.url
        }
    }
}

推荐阅读