Измените радиус границы OutlinedTextField

Можно ли изменить радиус границы OutlinedTextField. Я хочу добиться чего-то подобного

Я не могу использовать Modifier.border, потому что он просто рисует границу над меткой. Как это

А для OutlinedTextField нет параметра формы, как в TextField. И если я использую простое текстовое поле, у меня не может быть метки, отображаемой на верхней границе. Метка рисуется в текстовом поле.

3 ответа

Решение

Начиная с 1.0.0-beta09 вы можете использовать shape чтобы настроить форму границы:

      OutlinedTextField(
    value = text,
    onValueChange = {
        text = it
    },
    shape = RoundedCornerShape(12.dp)
)

Для этого можно использовать форму. пожалуйста, обратитесь к коду ниже

      OutlinedTextField(
                    value = email, onValueChange = {
                        email = it
                    },
                    label = {
                        Text(text = "Round corner", color = PrimaryColor)
                    },
                    shape = RoundedCornerShape(25.dp),

                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(horizontal = 20.dp)
                        .padding(top = 10.dp),
                    colors = TextFieldDefaults.outlinedTextFieldColors(
                        unfocusedBorderColor = PrimaryColor,
                        textColor = PrimaryColor),

См. Рекомендуемый способ создания таких настраиваемых Composable - скопировать исходную реализацию Composable и изменить ее в соответствии с вашими потребностями.

Ярлык: просто введите Buttonзатем Ctrl + щелчок по нему (в Android Studio). Это приведет вас к реализации. Он очень простой и маленький, поэтому просто скопируйте его. Внутри button использует поверхность для размещения элементов в rowcope, у которой есть параметр формы, или вы можете использовать для нее Modifier.clip(). Попробуйте сами.