Jetpack Compose 带有按钮的倾斜行

Question

我正在 Jetpack Compose 中开发一个 Android 应用程序，它基本上是一个大表单。我想用自定义按钮给它添加一点风格，但我真的不知道怎么做。

我想要达到的目标：

在该布局中，将有 2 个按钮，中间有一个 TextField。我怎样才能倾斜它们使其看起来像图像？

Answer 1

这就是我能够实现的。

您需要两个 IconButton 或 Image 来递增和递减 TextField 中数字的值。

利用Row水平排列元素。

声明一个 Int 以跟踪随 rememberSaveable 不断变化的值。

var numberValue: Int by rememberSaveable { mutableStateOf(15) }

现在终于所有元素都在一行中了。

    Row(
        Modifier.background(color = Color.LightGray),
        verticalAlignment = Alignment.CenterVertically
    ) {

        IconButton(onClick = { numberValue - 1 }) {
            Icon(
                imageVector = Icons.Rounded.KeyboardArrowDown,
                tint = Color.Black,
                contentDescription = null
            )
        }

        TextField(
            value = "$numberValue",
            onValueChange = {
                numberValue = it.toInt()
            },
            singleLine = true,
            keyboardOptions = KeyboardOptions(
                keyboardType = KeyboardType.Number,
            ),
            maxLines = 1,
            modifier = Modifier
                .width(60.dp)
                .background(Color.Gray, RectangleShape)
                .border(1.dp, Color.Gray, RectangleShape),

            )

        IconButton(onClick = { numberValue + 1 }) {
            Icon(
                imageVector = Icons.Rounded.KeyboardArrowUp,
                tint = Color.Black,
                contentDescription = null
            )
        }
    }

将我在两个 IconButton 中使用的图标替换为您的图标。了解 TextField .

中的所有属性

Answer 2

您可以像这样构建自定义形状：

class ParallelogramShape(private val angle: Float): Shape {
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density,
    ) = Outline.Generic(
        Path().apply {
            val width = size.width - size.height / tan(angle)
            moveTo(size.width - width, 0f)
            lineTo(size.width, 0f)
            lineTo(width, size.height)
            lineTo(0f, size.height)
            lineTo(size.width - width, 0f)
        }
    )
}

并像这样使用它：

val border = BorderStroke(1.dp, Color.Black)
val shape = ParallelogramShape(45f)
Row(
    verticalAlignment = Alignment.CenterVertically,
    modifier = Modifier
        .padding(10.dp)
        .border(border, shape = shape)
) {
    var counter by remember { mutableStateOf(10) }
    TextButton(
        onClick = { counter -= 1 },
        shape = shape,
        border = border,
        modifier = Modifier
            .height(45.dp)
            .width(100.dp)
    ) {
        Text("-")
    }
    Text(counter.toString())
    TextButton(
        onClick = { counter += 1 },
        shape = shape,
        border = border,
        modifier = Modifier
            .height(45.dp)
            .width(100.dp)
    ) {
        Text("+")
    }
}

结果：

Jetpack Compose 带有按钮的倾斜行

Jetpack Compose tilted row with buttons

android

kotlin

android-jetpack

android-jetpack-compose