Estructurando una interfaz con columnas y filas con Jetpack Compose en Android | Operating systems, scripting, PowerShell and security

Android, Kotlin

package com.example.myapplication

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApp()
        }
    }
}

@Composable
fun MyApp() {
    Surface(modifier = Modifier.fillMaxSize()) {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(16.dp)
        ) {
            // Column
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(150.dp)
                    .background(Color.Gray)
                    .padding(16.dp)
            ) {
                Text(text = "Elemento 1", color = Color.White)
                Text(text = "Elemento 2", color = Color.White)
                Text(text = "Elemento 3", color = Color.White)
            }

            Spacer(modifier = Modifier.height(16.dp))

            // Row
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(100.dp)
                    .background(Color.LightGray)
                    .padding(16.dp),
                horizontalArrangement = Arrangement.SpaceEvenly
            ) {
                Box(
                    modifier = Modifier
                        .size(50.dp)
                        .background(Color.Green, shape = CircleShape)
                )
                Box(
                    modifier = Modifier
                        .size(50.dp)
                        .background(Color.Blue, shape = CircleShape)
                )
                Box(
                    modifier = Modifier
                        .size(50.dp)
                        .background(Color.Red, shape = CircleShape)
                )
            }
        }
    }
}

@Preview
@Composable
fun PreviewMyApp() {
    MyApp()
}

package com.example.myapplication

import android.os.Bundle

import androidx.activity.ComponentActivity

import androidx.activity.compose.setContent

import androidx.compose.foundation.background

import androidx.compose.foundation.layout.*

import androidx.compose.foundation.shape.CircleShape

import androidx.compose.material3.*

import androidx.compose.runtime.Composable

import androidx.compose.ui.Modifier

import androidx.compose.ui.graphics.Color

import androidx.compose.ui.tooling.preview.Preview

import androidx.compose.ui.unit.dp

class MainActivity : ComponentActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContent {

MyApp()

}

@Composable

fun MyApp() {

Surface(modifier = Modifier.fillMaxSize()) {

Column(

modifier = Modifier

.fillMaxSize()

.padding(16.dp)

) {

// Column

Column(

modifier = Modifier

.fillMaxWidth()

.height(150.dp)

.background(Color.Gray)

.padding(16.dp)

) {

Text(text = "Elemento 1", color = Color.White)

Text(text = "Elemento 2", color = Color.White)

Text(text = "Elemento 3", color = Color.White)

}

Spacer(modifier = Modifier.height(16.dp))

// Row

Row(

modifier = Modifier

.fillMaxWidth()

.height(100.dp)

.background(Color.LightGray)

.padding(16.dp),

horizontalArrangement = Arrangement.SpaceEvenly

) {

Box(

modifier = Modifier

.size(50.dp)

.background(Color.Green, shape = CircleShape)

)

Box(

modifier = Modifier

.size(50.dp)

.background(Color.Blue, shape = CircleShape)

)

Box(

modifier = Modifier

.size(50.dp)

.background(Color.Red, shape = CircleShape)

)

}

@Preview

@Composable

fun PreviewMyApp() {

MyApp()

}

Estructurando una interfaz con columnas y filas con Jetpack Compose en Android (Kotlin, Android)

LIBRO DE POWERSHELL

LO ÚLTIMO

VÍDEOS