Redactar: elementos compuestos interactivos

1. Botón Botón

OutLinedButton tiene un borde exterior, TextButton es solo texto y IconButton es solo forma de icono.

Button(
    onClick = { }, //点击回调
    modifier = Modifier,
    enabled = true, //启用或禁用
    interactionSource = MutableInteractionSource(),
    elevation = ButtonDefaults.elevatedButtonElevation( //高度（阴影）
        defaultElevation = 10.dp,   //启用时
        pressedElevation = 0.dp,   //按下时
        focusedElevation = 10.dp,
        hoveredElevation = 10.dp,
        disabledElevation = 10.dp   //未启用时
    ),
    shape = ButtonDefaults.shape,    //形状
    border = BorderStroke(width = 1.dp, color = Color.Red), //边框线
    colors = ButtonDefaults.buttonColors(   //颜色（还有textButtonColors、outlineButtonColors）
        containerColor = Color.Yellow,  //启用状态下的背景色
        contentColor = Color.Red,   //启动状态下的文本色
        disabledContainerColor = Color.Black,   //禁用状态下的背景色
        disabledContentColor = Color.Green  //禁用状态下的文本色
    ),
    contentPadding = ButtonDefaults.ContentPadding,    //内容内间距
) {
    //子元素
}

Dos, el cuadro de entrada TextField

var str by remember{ mutableStateOf("123456") }
TextField(
    modifier = Modifier,
    value = str,
    onValueChange = { str = it },
    textStyle = LocalTextStyle.current, //设置文本样式
    label = { Text(text = "标签文本") },    //显示在输入框边框上的提示文本
    placeholder = { Text(text = "提示文本") },  //内容为空时的提示文本
    supportingText = { Text(text = "输入框下面显示的文本") },   //
    leadingIcon = { Icon(imageVector = Icons.Default.Home, contentDescription = null) }, //左边图标
    trailingIcon = { Icon(imageVector = Icons.Default.Star, contentDescription = null) }, //右边图标
    isError = false,
    enabled = true, //是否启用
    readOnly =  false,  //是否只读，不可编辑，可复制
    singleLine = false,  //单行（设为true会忽略maxLines）
    maxLines = 5,   //最大行数
    visualTransformation = VisualTransformation.None,
    //输入类型(Text、Number、Phone、Email、Password、NumberPassword)
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
    //键盘功能键监听
    keyboardActions = KeyboardActions(onDone = {}, onGo = {}, onNext = {}, onPrevious = {}, onSearch = {}, onSend = {}),
    shape = TextFieldDefaults.filledShape,
    colors = TextFieldDefaults.textFieldColors()
)

2.1 Ocultar visualización de contraseña

visualTransformation = (if (isPasswordInvisiable) VisualTransformation.None else PasswordVisualTransformation())

3. Cuadro de entrada OutlinedTextField con borde

El contenido que se puede configurar mediante código es el mismo que el de TextField.

Cuarto, el cuadro de entrada básico BasicTextField

Hay algunas configuraciones que se pueden establecer, lo cual es adecuado para la personalización.

BasicTextField(
    modifier = Modifier,
    value = str,
    onValueChange = { str = it },
    textStyle = LocalTextStyle.current, //设置文本样式
    enabled = true, //是否启用
    readOnly =  false,  //是否只读，不可编辑，可复制
    singleLine = false,  //单行（设为true会忽略maxLines）
    maxLines = 5,   //最大行数
    minLines = 1,   //最小行数
    visualTransformation = VisualTransformation.None,
    //输入类型(Text、Number、Phone、Email、Password、NumberPassword)
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
    //键盘功能键监听
    keyboardActions = KeyboardActions(onDone = {}, onGo = {}, onNext = {}, onPrevious = {}, onSearch = {}, onSend = {}),
)

Cinco, la barra de arrastre deslizante

var state by remember{ mutableStateOf(0.0F) }
Slider(
    value = state,   //当前值
    valueRange = 0F..100F,  //可选值范围（默认0F..1F）
    steps = 4,  //步频（默认0，设置了就中间只有这个值可选拖到）
    enabled = true, //是否禁用
    onValueChange = { float ->
        state = float
    }
)

 Sexto, la barra de arrastre de rango RangeSlider

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun Demo() {
    var state by remember{ mutableStateOf(5F..10F) }
    RangeSlider(
        value = state,  //注意值是一个范围
        valueRange = 0F..30F,   //可选值范围（默认0F..1F）
        steps = 3,  //步频（默认0，设置了就中间只有这个值可选拖到）
        onValueChange = {
            state = it
        }
    )
}

 Siete, casilla de verificación CheckBox

fun Show() {
    val dataist = listOf("香菜", "酱油", "陈醋", "葱花", "蒜泥", "辣椒")
    Demo(dataist)
}

@Composable
fun Demo(list: List<String>) {
    //根据选项列表，创建相同数量的布尔值集合
    val state = remember { list.map { false }.toMutableStateList() }
    //根据选项列表，创建相同数量的复选框
    Column {
        state.forEachIndexed { index, value ->
            Row {
                Checkbox(
                    modifier = Modifier,
                    checked = value,    //是否选中
                    enabled = true, //是否启用
                    colors = CheckboxDefaults.colors(),
                    onCheckedChange = { boolean ->    //点击回调
                        state[index] = boolean
                    }
                )
                Text(text = list[index], modifier = Modifier.align(Alignment.CenterVertically))
            }
        }
    }
    //log检查是否被改动
    val str = StringBuilder().apply {
        state.onEach { append("$it、")}
    }
    Log.e("-----------",  str.toString())
}

 8. Botón de radio

@Preview(showBackground = true)
@Composable
fun Show() {
    val dataist = listOf("香菜", "酱油", "陈醋", "葱花", "蒜泥", "辣椒")
    Demo(dataist)
}

@Composable
fun Demo(list: List<String>) {
    //记录当前被点击的索引(默认值设为0默认选中第一个，设为-1默认都不选中)
    var selectedIndex by remember { mutableStateOf(-1) }
    //根据选项列表，创建相同数量的单选框
    Column {
        list.forEachIndexed { index, _ ->
            Row {
                RadioButton(
                    modifier = Modifier,
                    selected = selectedIndex == index,   //是否选中
                    enabled = true, //是否启用
                    colors = RadioButtonDefaults.colors(),
                    onClick = {
                        selectedIndex = index
                        Log.e("-----------",  "点击的是第${index}个${list[index]}")
                    }
                )
                Text(text = list[index], modifier = Modifier.align(Alignment.CenterVertically))
            }
        }
    }
}

 Nueve, cambiar Cambiar

var state by remember { mutableStateOf(false) }
Switch(
    checked = state,    //控制开关
    onCheckedChange = { boolean ->  //点击事件
        state = boolean  //当进行切换操作时，更改状态
    },
    modifier = Modifier,
    thumbContent = null,
    enabled = true, //禁用（视觉和事件）
    colors = SwitchDefaults.colors(),   //不同状态下使用的颜色
//        interactionSource //可自定义不同状态下的外观和行为
)