En Android Jetpack Compose, se utiliza un TextField para recibir información del usuario en forma de texto. TextField cuando está enfocado o cuando se hace clic en él invoca un teclado virtual. En general, TextField se atribuye en gran medida a una mejor sensación y apariencia. Sin embargo, podemos usar un TextField predesarrollado, denominado BasicTextField , que no tiene atributos como los de un TextField normal.
Entonces, en este artículo, le mostraremos cómo puede implementar un BasicTextField que no tenga relleno en Android usando Jetpack Compose . Siga los pasos a continuación una vez que el IDE esté listo.
Implementación paso a paso
Paso 1: crea un nuevo proyecto en Android Studio
Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Al elegir la plantilla, seleccione Actividad de composición vacía . Si no encuentra esta plantilla, intente actualizar Android Studio a la última versión. Demostramos la aplicación en Kotlin , así que asegúrese de seleccionar Kotlin como idioma principal al crear un nuevo proyecto.
Paso 2: trabajar con el archivo MainActivity.kt
Vaya al archivo MainActivity.kt y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.kt . Se agregan comentarios dentro del código para comprender el código con más detalle.
Kotlin
package com.geeksforgeeks.jcbasictextfield
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
// Implementing a Scaffold Layout
Scaffold(
// Creating a Top Bar
topBar = { TopAppBar(title = { Text("GFG | Remove TextField Padding", color = Color.White) }, backgroundColor = Color(0xff0f9d58)) },
content = {
// Creating a Column View
Column(Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center) {
// Declaring variables for two TextField Values
var mInput1 by remember{ mutableStateOf("")}
var mInput2 by remember{ mutableStateOf("")}
// Creating a Regular TextField
Text("Padded TextField")
TextField(
value = mInput1,
onValueChange = { mInput1 = it }
)
// Adding a Space of 100dp
Spacer(modifier = Modifier.height(100.dp))
// Creating a Non-Padded/Basic TextField
Text("Non-Padded TextField")
BasicTextField(
value = mInput2,
onValueChange = { mInput2 = it }
)
}
}
)
}
}
}
Producción:
En la salida, puede ver dos TextFields. Hemos ingresado «hola, geek» en ambos campos de texto. El primero es el campo de texto regular que tiene relleno a su alrededor. En el segundo, no verá ningún relleno.
Publicación traducida automáticamente
Artículo escrito por aashaypawar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA