kotlin 按钮未在Jetpack Compose中 Package 盒内的内容

e7arh2l6  于 2023-08-06  发布在  Kotlin
关注(0)|答案(3)|浏览(97)

为什么每次我在按钮上添加图标时,按钮的宽度似乎都延伸到屏幕的边缘,而不是围绕其内容?

Box(
    contentAlignment = Alignment.Center
) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .align(Alignment.CenterStart)
    ) {
        Spacer(modifier = Modifier.width(5.dp))
        Icon(
            imageVector = Icons.Default.VerticalAlignTop,
            modifier = Modifier
                .size(18.dp),
            contentDescription = "drawable_icons",
            tint = Color.Unspecified
        )
    }
    Text(
        modifier = Modifier.align(Alignment.Center),
        text = stringResource(id = R.string.back_to_top),
        textAlign = TextAlign.Center,
    )
}

字符串


的数据

FunnySaltyFish的建议


ie3xauqp

ie3xauqp1#

此外,如果你想写一个Button,我建议你直接使用Button Composable。它提供对辅助功能模式的支持。

Button(
        modifier = Modifier
            .padding(8.dp),
        onClick = { }
    ) {
        // all the content below will be wrapped in a Row
        Icon(
            imageVector = Icons.Default.ArrowDropDown,
            modifier = Modifier
                .size(18.dp),
            contentDescription = "drawable_icons",
            tint = Color.Unspecified
        )
        Spacer(modifier = Modifier.width(5.dp))
        Text("Back To Top")
    }

字符串

xam8gpfp

xam8gpfp2#

在您的代码中,您将fillMaxWidth设置为Row,因此它将填充空间。

Row(
        modifier = Modifier
            .fillMaxWidth() // remove this line
            .align(Alignment.CenterStart)
    )

字符串
把它拿开。

bpzcxfmw

bpzcxfmw3#

您的Text()Row()都是内部可组合函数Box()
Text() Package 在Row()中,而不是Box()

Box(
    contentAlignment = Alignment.Center
) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .align(Alignment.CenterStart)
    ) {
        Spacer(modifier = Modifier.width(5.dp))
        Icon(
            imageVector = Icons.Default.VerticalAlignTop,
            modifier = Modifier
                .size(18.dp),
            contentDescription = "drawable_icons",
            tint = Color.Unspecified
        )
    } // Here is little mistake we need to put this after text
    Text(
        modifier = Modifier.align(Alignment.Center),
        text = stringResource(id = R.string.back_to_top),
        textAlign = TextAlign.Center,
    )
}

字符串

Box(
        contentAlignment = Alignment.Center
    ) {
        Row(
            modifier = Modifier
                .align(Alignment.CenterStart)
        ) {
            Spacer(modifier = Modifier.width(5.dp))
            Icon(
                imageVector = Icons.Default.ExitToApp,
                modifier = Modifier
                    .size(18.dp),
                contentDescription = "drawable_icons",
                tint = Color.Unspecified
            )

            Spacer(modifier = Modifier.width(5.dp)) // For Spacing 5 dp

            Text(
                modifier = Modifier,
                text = stringResource(id = R.string.challenges),
                textAlign = TextAlign.Center,
            )
        }
        
    }

相关问题