Jetpack Compose：Textfield 和 FAB 不使用全宽

Question

我正在尝试使用 Jetpack Compose 将 TextField 和 FAB 放入 bottomBar 中。我用一个盒子包裹了两个，盒子有修饰符“fillMaxWidth”。

但是这两个控件没有使用全角。

有谁知道如何解决这个问题？

这是我的代码：

    @Composable
    fun ChatView() {
        Scaffold(
            topBar= { ChannelButton() },
            bottomBar = { ChatBox() },
            modifier = Modifier
                .padding(10.dp)
        ) {
            ChatList()
        }
    }
@Composable
fun ChatBox() {
    Box(modifier = Modifier
        .background(DiscordDarkGray)
        .fillMaxWidth()
    ){
        Column(modifier = Modifier
            .padding(10.dp)
            .fillMaxWidth()) {
            HorizontalCenteredRow(modifier = Modifier
                .fillMaxWidth()) {
                val textState = remember { mutableStateOf(TextFieldValue()) }
                TextField(
                    value = textState.value,
                    onValueChange = { textState.value = it }
                )
                Spacer(modifier = Modifier.width(10.dp))
                FloatingIconActionButton (
                    icon = Icons.Default.Send,
                    onClick = { /*TODO*/ },
                    backgroundColor = DiscordBlue
                )
            }
            Spacer(modifier = Modifier.height(60.dp))
        }
    }
}

这是 HorizontalCenteredRow 的代码：

@Composable
fun HorizontalCenteredRow(
    modifier: Modifier = Modifier,
    content: @Composable RowScope.() -> Unit
) {
    Row(
        modifier = modifier
            .wrapContentSize(Alignment.Center),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.Center,
        content = content
    )
}

这里是 FAB 的代码：

@Composable
fun FloatingIconActionButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    shape: Shape = MaterialTheme.shapes.small.copy(CornerSize(percent = 50)),
    backgroundColor: Color = MaterialTheme.colors.secondary,
    contentColor: Color = contentColorFor(backgroundColor),
    elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(),
    icon: ImageVector = Icons.Default.QuestionAnswer,
    iconContentDescription: String = "",
) {
    Surface(
        modifier = modifier.let {
            if (enabled) {
                it.clickable(
                    onClick = onClick,
                    role = Role.Button,
                    interactionSource = interactionSource,
                    indication = null
                )
            } else it
        },
        shape = shape,
        color = backgroundColor,
        contentColor = contentColor,
        elevation = elevation.elevation(interactionSource).value
    ) {
        CompositionLocalProvider(LocalContentAlpha provides contentColor.alpha) {
            ProvideTextStyle(MaterialTheme.typography.button) {
                Box(
                    modifier = Modifier
                        .defaultMinSize(minWidth = FabSize, minHeight = FabSize)
                        .indication(interactionSource, rememberRipple()),
                    contentAlignment = Alignment.Center
                ) {
                    Icon(
                        icon,
                        iconContentDescription,
                        tint = if (enabled) {
                            colors().onPrimary
                        } else {
                            colors().onPrimary.transparentize(.6f)
                        }
                    )
                }
            }
        }
    }
}

Answer 1

正在使用

   HorizontalCenteredRow(
          modifier = Modifier.fillMaxWidth()

Row填满了所有space，但不代表children占据了整个space。
如果您想用 children 填充所有 space，您必须更改它们的默认尺寸。
例如，您可以将 modifier = Modifier.weight(1f) 应用于 TextField.

类似于：

        HorizontalCenteredRow(modifier = Modifier
            .fillMaxWidth()) {
            val textState = remember { mutableStateOf(TextFieldValue()) }
            TextField(
                value = textState.value,
                onValueChange = { textState.value = it },
                modifier = Modifier.weight(1f)
            )

Jetpack Compose：Textfield 和 FAB 不使用全宽

Jetpack Compose: Textfield and FAB not using full width

android

kotlin

android-studio

android-jetpack-compose