Scaffold en Jetpack Compose ( Kotlin )

scaffold_screen.kt

package com.example.jmsa.pantallas

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.AccountCircle
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.Check
import androidx.compose.material.icons.filled.Edit
import androidx.compose.material.icons.filled.ThumbUp
import androidx.compose.material3.AlertDialog
import androidx.compose.material3.BottomAppBar
import androidx.compose.material3.BottomAppBarDefaults
import androidx.compose.material3.CenterAlignedTopAppBar
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.ExtendedFloatingActionButton
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.FloatingActionButtonDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview

@Preview
@Composable
fun ScaffoldScreen() {
    ScaffoldPersonalizado()
}

@Composable
fun ScaffoldPersonalizado() {
    // topAppBar, bottomAppBar, FAB
    Scaffold (
        topBar = { CustomTopBar() },
        bottomBar = { CustomBottomBar() },
        floatingActionButton = { FAB() }
    ) { innerPadding ->
        Contenido(innerPadding)
    }
}


@Composable
fun Contenido(padding: PaddingValues) {
    Column (
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.fillMaxSize()
    ) {
        Text("contenido de la app")
    }
}


@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun CustomTopBar() {
    TopAppBar(
        title = {
            Text("Título  :D")
        },
        colors = TopAppBarDefaults.topAppBarColors(
            containerColor = Color.Red,
            titleContentColor = Color.White
        )
    )
}

@Composable
fun CustomBottomBar() {
    BottomAppBar (
        actions = {
            IconButton (onClick = { /* do something */ }) {
                Icon(Icons.Filled.Check, contentDescription = "Localized description")
            }
            IconButton(onClick = { /* do something */ }) {
                Icon(
                    Icons.Filled.Edit,
                    contentDescription = "Localized description",
                )
            }
            IconButton(onClick = {  }) {
                Icon(
                    Icons.Filled.AccountCircle,
                    contentDescription = "Localized description",
                )
            }
            IconButton(onClick = { /* do something */ }) {
                Icon(
                    Icons.Filled.ThumbUp,
                    contentDescription = "Localized description",
                )
            }
        },
        /*floatingActionButton = {
            FloatingActionButton (
                onClick = { /* do something */ },
                containerColor = BottomAppBarDefaults.bottomAppBarFabColor,
                elevation = FloatingActionButtonDefaults.bottomAppBarFabElevation()
            ) {
                Icon(Icons.Filled.Add, "Localized description")
            }
        }*/
    )
}



@Composable
fun FABGrande() {
    ExtendedFloatingActionButton (
        onClick = { },
        icon = { Icon(Icons.Filled.Edit, "Extended floating action button.") },
        text = { Text(text = "Redactar") },
    )

}



@Composable
fun FAB() {

    var mostrar by rememberSaveable { mutableStateOf(false) }

    FloatingActionButton(
        onClick = { mostrar = true },
    ) {
        Icon(
            Icons.Filled.Add,
            "Floating action button."
        )
    }

    Modal(
        mostrar,
        { mostrar = false }
    )
}


@Composable
fun Modal(
    mostrar: Boolean,
    funcionCerrar: () -> Unit
) {

    if (mostrar) {
        AlertDialog(
            title = {
                Text("Título del modal")
            },
            text = {
                Text("Hola :D soy una descripción")
            },
            onDismissRequest = {
                // cerrar
                funcionCerrar()
            },
            confirmButton = {
                TextButton (
                    onClick = {
                        // acción de confirmar
                    }
                ) {
                    Text("Confirmar")
                }
            },
            dismissButton = {
                TextButton(
                    onClick = {
                        // acción de cancelar
                        funcionCerrar()
                    }
                ) {
                    Text("Cancelar")
                }
            }
        )
    }

}