As caixas de diálogo são pequenas janelas que levam o usuário a tomar uma decisão ou inserir informações adicionais. Elas não ocupam toda a tela e são normalmente usadas para eventos modais que exijam que usuários realizem uma ação antes de continuar.
package br.com.gilbercs.exdialog import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.foundation.background import androidx.compose.foundation.border import androidx.compose.foundation.layout.* import androidx.compose.foundation.shape.CircleShape import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.* import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Delete import androidx.compose.runtime.Composable import androidx.compose.runtime.MutableState import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import androidx.compose.ui.window.Dialog import br.com.gilbercs.exdialog.ui.theme.ExDialogTheme class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { ExDialogTheme { // A surface container using the 'background' color from the theme Surface( modifier = Modifier.fillMaxSize(), color = MaterialTheme.colors.background ) { val openDialog = remember { mutableStateOf(false) } OutlinedButton(onClick = { openDialog.value = true }) { Text(text = "Abrir Alert") } if(openDialog.value == true) { DeleteDialog(openDialog = openDialog, title = "OK") } } } } } } @Composable fun DeleteDialog( openDialog: MutableState<Boolean>, title: String){ val context = LocalContext.current Dialog(onDismissRequest = { openDialog.value}) { Surface( modifier = Modifier.fillMaxWidth(0.92f), color = Color.Transparent) { Box(modifier = Modifier.fillMaxWidth()) { //Text an Buttons Column( modifier = Modifier .padding(top = 30.dp) .fillMaxWidth() .background( color = Color.White, shape = RoundedCornerShape(percent = 10) ), horizontalAlignment = Alignment.CenterHorizontally ) { Spacer(modifier = Modifier.height(height = 50.dp)) Text( modifier = Modifier .fillMaxWidth() .padding(all = 12.dp), text = "Alert Dialog", fontSize = 24.sp, fontWeight = FontWeight.Bold, textAlign = TextAlign.Center) Spacer(modifier = Modifier.height(height = 18.dp)) //Buttons Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceAround) { OutlinedButton( onClick = { openDialog.value = false}, colors = ButtonDefaults.buttonColors( backgroundColor = Color.Red, ) ) { Text(text = "Cancelar", fontWeight = FontWeight.Bold, color = Color.White, fontSize = 18.sp) } OutlinedButton( onClick = { openDialog.value = false}, colors = ButtonDefaults.buttonColors( backgroundColor = MaterialTheme.colors.primaryVariant, )) { Text(text = "Confirmar", fontWeight = FontWeight.Bold, color = Color.White, fontSize = 18.sp) } } Spacer(modifier = Modifier.height(height = 18.dp * 2)) } //delete icon Icon( modifier = Modifier .size(70.dp) .background(color = Color.White, shape = CircleShape) .border(width = 2.dp, shape = CircleShape, color = Color.Red) .padding(all = 16.dp) .align(Alignment.TopCenter), imageVector = Icons.Default.Delete, contentDescription = "", tint = Color.Red) } } } }
Top comments (0)