Modificadores en Jetpack Compose

Uso de modificadores

Modificadores de Compose

Lista de modificadores de Compose

Vídeo sobre modificadores:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            JetpackComposeTutorialTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    //Greeting("Android")
                    MyComponent()
                }
            }
        }
    }
}

// Tutorial 2
// https://www.youtube.com/watch?v=GOQVWaG7fCU&list=PLNdFk2_brsRclwvl8ruCo_q36jVbXcCCx&index=2&pp=iAQB
@Composable
fun MyComponent() {
    Row(modifier = Modifier
        .background (MaterialTheme.colorScheme.background)
        .padding(8.dp)
    ) {
        MyImage()
        MyTexts()
    }
}

@Composable
fun MyImage() {
    Image(
        painterResource(R.drawable.ic_launcher_foreground),
        "Imagen de prueba",
        //modifier = Modifier.background(Color.Gray).clip(CircleShape)
        modifier = Modifier
            .size(64.dp)
            .clip(CircleShape)
            //.background(Color.Gray)
            .background(MaterialTheme.colorScheme.primary)
    )
}

@Composable
fun MyTexts() {
    Column(modifier = Modifier.padding(start = 8.dp)) {
        MyText (
            "Hola Jetpack Compose!",
            //MaterialTheme.colors.primaryVariant,
            MaterialTheme.colorScheme.primary,
            MaterialTheme.typography.headlineLarge
        )
        Spacer (modifier = Modifier.height(16.dp))
        MyText (
            "Preparado?",
            // En colors crear val White = Color.White y val Black = Color.Black
            // Añadir onBackground = White al tema oscuro y onBackground = Black al tema claro
            MaterialTheme.colorScheme.onBackground,
            MaterialTheme.typography.headlineMedium
        )
    }
}

@Composable
fun MyText(text: String, color: Color, style: TextStyle) {
    Text (text, color = color, style = style)
}

@Preview
@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
@Composable
fun PreviewComponent() {
    JetpackComposeTutorialTheme() {
        MyComponent()
    }
}

Más información:

Modifiers: Personaliza cualquier vista en Jetpack Compose