Los botones de radio se utilizan para seleccionar solo una opción específica de la lista de varias opciones en una lista o cualquiera. Los botones de radio se utilizan en muchos lugares para seleccionar solo una opción de la lista de dos o más opciones. En este artículo, veremos la implementación de este botón de opción en Android usando Jetpack Compose .
Atributos del botón de opción
Atributo | Descripciones |
---|---|
seleccionado | este atributo se utiliza para seleccionar un botón de opción. |
al hacer clic | esto se usa cuando se hace clic en nuestro botón de radio. |
modificador | para agregar relleno a nuestros botones de radio. |
Implementación paso a paso
Paso 1: Crear un nuevo proyecto
Para crear un nuevo proyecto en la versión Canary de Android Studio, consulte Cómo crear un nuevo proyecto en la versión Canary de Android Studio con Jetpack Compose.
Paso 2: trabajar con el archivo MainActivity.kt
Vaya a la aplicación > java > el nombre del paquete de su aplicación y abra el archivo MainActivity.kt. Dentro de ese archivo, agregue el siguiente código. Se agregan comentarios dentro del código para comprender el código con más detalle.
Kotlin
import android.graphics.drawable.shapes.Shape import android.media.Image import android.os.Bundle import android.widget.Toast import androidx.appcompat.app.AppCompatActivity import androidx.compose.foundation.* import androidx.compose.foundation.Text import androidx.compose.foundation.layout.* import androidx.compose.foundation.selection.selectable import androidx.compose.foundation.shape.CircleShape import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.text.KeyboardOptions import androidx.compose.material.* import androidx.compose.material.Icon import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.AccountCircle import androidx.compose.material.icons.filled.Info import androidx.compose.material.icons.filled.Menu import androidx.compose.material.icons.filled.Phone import androidx.compose.runtime.* import androidx.compose.runtime.savedinstancestate.savedInstanceState import androidx.compose.ui.Alignment import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.platform.setContent import androidx.compose.ui.res.imageResource import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.example.gfgapp.ui.GFGAppTheme import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.SolidColor import androidx.compose.ui.platform.ContextAmbient import androidx.compose.ui.platform.testTag import androidx.compose.ui.res.colorResource import androidx.compose.ui.semantics.SemanticsProperties.ToggleableState import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.font.FontFamily import androidx.compose.ui.text.input.* import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.TextUnit class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { Column { // in below line we are calling // a radio button method. SimpleRadioButtonComponent() } } } } @Preview(showBackground = true) @Composable fun DefaultPreview() { GFGAppTheme { SimpleRadioButtonComponent(); } } @Composable fun SimpleRadioButtonComponent() { val radioOptions = listOf("DSA", "Java", "C++") val (selectedOption, onOptionSelected) = remember { mutableStateOf(radioOptions[2]) } Column( // we are using column to align our // imageview to center of the screen. modifier = Modifier.fillMaxWidth().fillMaxHeight(), // below line is used for // specifying vertical arrangement. verticalArrangement = Arrangement.Center, // below line is used for // specifying horizontal arrangement. horizontalAlignment = Alignment.CenterHorizontally, ) { // we are displaying all our // radio buttons in column. Column { // below line is use to set data to // each radio button in columns. radioOptions.forEach { text -> Row( Modifier // using modifier to add max // width to our radio button. .fillMaxWidth() // below method is use to add // selectable to our radio button. .selectable( // this method is called when // radio button is selected. selected = (text == selectedOption), // below method is called on // clicking of radio button. onClick = { onOptionSelected(text) } ) // below line is use to add // padding to radio button. .padding(horizontal = 16.dp) ) { // below line is use to get context. val context = ContextAmbient.current // below line is use to // generate radio button RadioButton( // inside this method we are // adding selected with a option. selected = (text == selectedOption),modifier = Modifier.padding(all = Dp(value = 8F)), onClick = { // inide on click method we are setting a // selected option of our radio buttons. onOptionSelected(text) // after clicking a radio button // we are displaying a toast message. Toast.makeText(context, text, Toast.LENGTH_LONG).show() } ) // below line is use to add // text to our radio buttons. Text( text = text, modifier = Modifier.padding(start = 16.dp) ) } } } } }
Ahora ejecute su aplicación y vea el resultado de la aplicación.
Producción:
Publicación traducida automáticamente
Artículo escrito por chaitanyamunje y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA