如何在 jetpack compose 中正確使用自定義 AlertDialog？

Question

我有TeamCard顯示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)  

我無法正確設置它，請建議我更好的方法。

此外，每次我單擊特定的團隊卡片時，警報都會顯示與其關聯的鏈接。

Answer 1

您存儲一個簡單的布爾值，指示警報當前是否打開。 如果您需要顯示特定的 URL，這些信息是不夠的。

相反，存儲所選命令的可選 URL 並在它不為空時顯示警報。

我還建議您避免像現在一樣重復代碼。 而不是把多的Column -s在Row和手動元素填充它們，你可以使用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
        }
    }
}