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)