标签: android-jetpack-compose-button

无法减少 OutlinedButton 中的巨大填充。尝试了 contentPadding、修饰符填充等。无法减少文本“apple”的填充。任何想法？我应该为此使用任何其他类型的组合组件吗？

OutlinedButton(     
    onClick = {},       
    border = BorderStroke(1.dp, Color.White),
    shape = RoundedCornerShape(12.dp),
    contentPadding = PaddingValues(0.dp),
    modifier = Modifier 
        .background(bgColor)
        .height(24.dp)      
        .padding(all = 0.dp),
    colors = ButtonDefaults.outlinedButtonColors(backgroundColor = bgColor)) {
        Text("apple",   
            color = Color.White,
            style = MaterialTheme.typography.body2,
            modifier = Modifier.height(10.dp).padding(vertical = 0.dp), //.background(bgColor),
        )               
    }

在 @liveAnyway 的回答（谢谢！）之后更新，这似乎有帮助。之后，我也删除了 OutlinedButton 的高度 - 理想情况下我希望它像“wrap-content”一样。进行更改后，我仍然可以看到填充。底线我不想指定任何绝对高度，以便它可以使用系统设置中的不同字体大小。

Row(modifier = Modifier.padding(vertical = 12.dp)) {
    OutlinedButton( 
        onClick = {}, 
        border = BorderStroke(1.dp, Color.White),
        shape = RoundedCornerShape(18.dp),
        contentPadding = PaddingValues(0.dp),
        modifier = Modifier
            .background(bgColor)
            .padding(all = …

如何更改单击时按钮的背景颜色？

我想创建一个按钮，其中只有文本和图标，所有背景和边框都是透明的。我创建了类似的东西：

OutlinedButton(
    colors = ButtonDefaults.buttonColors(backgroundColor = Color.Transparent),
    border = BorderStroke(0.dp, Color.Transparent),
    modifier = modifier,
    onClick = onClick
) {
    icon?.invoke()
    Text(
        text = value,
        fontSize = 12.sp
    )
}

一切都很好，但我丢失了默认颜色（应该是蓝色，并且我有黑色图标和文本）。如何从按钮中删除所有背景和边框但仍然具有主题颜色？

我正在尝试删除填充，TextButton但它不起作用。

TextButton(
    onClick = {},
    modifier = Modifier.padding(0.dp)
) {
    Text(
        " ${getString(R.string.terms_and_conditions)}",
        color = MaterialTheme.colors.primary,
        fontFamily = FontFamily(Font(R.font.poppins_regular)),
        fontSize = 10.sp,
    )
}

我也尝试过在属性中设置height和但填充仍然存在sizeModifier

我们如何在 jetpack compose 中实现这一点

我正在做这样的事情

Button(
    elevation = ButtonDefaults.elevation(
        defaultElevation = 0.dp,
        pressedElevation = 8.dp,
        disabledElevation = 0.dp
    ),
    onClick = { onClick },
    shape = RoundedCornerShape(28.dp),
    modifier = modifier
        .fillMaxWidth()
        .shadow(0.dp),
    contentPadding = PaddingValues(15.dp),
    colors = ButtonDefaults.buttonColors(backgroundColor = Color.White),
    border = BorderStroke(1.dp, Color.Grey)
) {
    Box(modifier = modifier.fillMaxWidth(),
        contentAlignment = Alignment.Center) {
        Icon(
            imageVector = imageVector,
            modifier = Modifier
                .size(18.dp),
            contentDescription = "drawable icons",
            tint = Color.Unspecified
        )
        Spacer(modifier = Modifier.width(10.dp))
        Text(
            text = buttonText,
            color = Color.Black,
            textAlign …

我试图将按钮的图标向左对齐并保持文本居中。有什么想法可以实现这一点吗？

我的可组合项：

  @Composable
  fun CustomButton() {
    MaterialTheme {
      OutlinedButton(
        onClick = {},
        modifier = Modifier
          .padding(12.dp),
        colors = ButtonDefaults.buttonColors(backgroundColor = Color.White),
        shape = RoundedCornerShape(4.dp)) {
          Icon(
            imageVector = Icons.Default.FavoriteBorder,
            contentDescription = null,
            modifier = Modifier.padding(start = 4.dp)
          )
          Text(text = "Like", color = Color.Grey)
      }
    }
  }

现在看起来是这样的：

我有录制语音的按钮，所以我希望它在用户按下它时开始录制，并在用户离开时停止录制

@Composable
fun Screen(){
   
   Button(){
      Text("record")
   }

}

我正在尝试构建以下组件，

以下是我的代码，

Button(onClick = { /*TODO*/ }, modifier = Modifier.fillMaxWidth()) {
    Image(painter = painterResource(id = R.drawable.ic_check_circle) , contentDescription = "")
    Text(text = "John Doe", textAlign = TextAlign.Start)
    Image(painter = painterResource(id = R.drawable.ic_arrow_forward), contentDescription = "",
        alignment = Alignment.TopEnd)
}

我正在 Jetpack Compose 中构建一个可重用的 Button 组件，它基本上是一个Row. 该按钮的左端应有文本，右端应有图标。这可以直接像这样工作：

@Composable
fun MyButton(
    text: String,
    modifier: Modifier = Modifier
) {
    Button(
        onClick = { /* */ },
        modifier = modifier
    ) { // RowScope
        Text(
            text = text
        )
        Spacer(modifier = Modifier.width(8.dp))
        Icon(
            painter = painterResource(
                id = android.R.drawable.ic_dialog_info
            ),
            contentDescription = null
        )
    }
}

但是，如果按钮应用固定宽度，则文本和图标将居中而不是在左/右端。

所以我尝试添加modifier = Modifier.weight(1F)到，Text以便它填满任何额外的空间。但这会导致没有固定宽度的按钮占用尽可能多的空间。

如何构建一个可在两种情况下工作的 Compose 组件：定义宽度时和换行到内容时？

我的屏幕布局：

@Composable
fun MyScreen() {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.fillMaxSize()
    ) …

由于某种原因，我无法更改按钮的波纹效果的颜色。我在这里做错了什么？

androidx.compose.material.Button(
    onClick = onClick,
    modifier = modifier
        .indication(
            interactionSource = interactionSource,
            indication = rememberRipple(color = Color.Red)
            )
        .navigationBarsPadding(),
    enabled = enabled,
    interactionSource = interactionSource,
    elevation = elevation,
    shape = RectangleShape,
    colors = ButtonDefaults.bottomColors(),
    contentPadding = PaddingValues(vertical = 4.dp),
    content = { Text(text) },
)