如何在 Jetpack Compose 中制作迷你工厂

Question

在 XML 中，我们可以制作 2 种尺寸（常规和 mini）的浮动操作按钮，如下所示

  <com.google.android.material.floatingactionbutton.FloatingActionButton
  ...
  app:fabSize="mini"/>

我的问题是如何在 Compose 中制作迷你晶圆厂作为 FloatingActionButton 实现如下（没有尺寸参数）

@Composable
fun FloatingActionButton(
    onClick: (() -> Unit)?,
    modifier: Modifier! = Modifier,
    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(),
    content: (@Composable () -> Unit)?
): Unit

Answer 1

正如您在 FAB 实现中看到的那样，它设置了默认大小。如果您想更改 FAB 大小，我认为唯一的方法是使用 Modifier.size(40.dp).

FloatingActionButton(
    modifier = Modifier.size(40.dp), // 40 is a mini-fab
    onClick = {  }
) {
    Icon(imageVector = Icons.Filled.Add, contentDescription = null)
}

Answer 2

如果你在项目中使用androidx.compose.material3，你可以使用SmallFloatingActionButton

@Composable
public fun SmallFloatingActionButton(
    onClick: () → Unit,
    modifier: Modifier,
    interactionSource: MutableInteractionSource,
    shape: Shape,
    containerColor: Color,
    contentColor: Color,
    elevation: FloatingActionButtonElevation,
    content: @Composable
() → Unit
): Unit

如何在 Jetpack Compose 中制作迷你工厂

How to make a mini fab in Jetpack Compose

android

floating-action-button

android-jetpack-compose