Я хочу добавить плавающую кнопку действия с градиентным фоном в Jetpack Compose. Для этого у меня есть следующий фрагмент:

FloatingActionButton(
    onClick = {
        coroutineScope.safeLaunch {
            navController.navigate("AddTodoPage") {
                launchSingleTop = true
            }
        }
    },
    shape = RoundedCornerShape(14.dp),
    backgroundColor = Color.Transparent,
    modifier = Modifier
        .constrainAs(addFab) {
            bottom.linkTo(parent.bottom)
            end.linkTo(parent.end)
        }
        .offset(x = (-16).dp, y = (-24).dp)
        .background(
            brush = Brush.verticalGradient(
                colors = BluePinkGradient()
            ),
            shape = RoundedCornerShape(14.dp)
        )

) {
    Icon(
        painter = painterResource(id = R.drawable.ic_add),
        contentDescription = "Add icon",
        tint = Color.White
    )
}

fun BluePinkGradient(inverse: Boolean = false) = when (inverse) {
    true -> listOf(
        MutedBlue,
        MutedPink
    )
    false -> listOf(
        MutedPink,
        MutedBlue
    )
}
val MutedBlue = Color(0xFF26A69A)
val MutedPink = Color(0xFFEC407A)

Но на изображении ниже кнопка имеет оттенок «Беловатый» на значке плюса. Как я могу удалить этот оттенок или лучший способ установить градиент для фона FAB? Fab Image

1
Vicki Mes 13 Окт 2021 в 23:54

2 ответа

Лучший ответ

«Беловатый оттенок на значке плюса» является результатом параметра elevation. Вы можете обнулить его, но не похоже, что вам вообще нужен FAB.

Поскольку вам нужно так много настраивать кнопку, вы можете использовать IconButton:

IconButton(
    onClick = {
    },
    modifier = Modifier
        .background(
            brush = Brush.verticalGradient(
                colors = BluePinkGradient()
            ),
            shape = RoundedCornerShape(14.dp)
        )

) {
    Icon(
        painter = painterResource(id = R.drawable.ic_undo),
        contentDescription = "Add icon",
        tint = Color.White
    )
}

FloatingActionButton применяет только некоторые параметры Материала по умолчанию к контенту, это не делает его действительно плавающим, это нужно делать с контейнером.

0
Philip Dukhov 14 Окт 2021 в 09:14

Я разработал следующее решение, которое я подтвердил как работающее:

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun CrazyFloatingActionButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    shape: Shape = MaterialTheme.shapes.small.copy(CornerSize(percent = 50)),
    gradient: List<Color>,
    contentColor: Color = contentColorFor(gradient[0]),
    elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(),
    content: @Composable () -> Unit
) {
    Surface(
        modifier = modifier,
        shape = shape,
        contentColor = contentColor,
        elevation = elevation.elevation(interactionSource).value,
        onClick = onClick,
        role = Role.Button,
        interactionSource = interactionSource,
        indication = rememberRipple()
    ) {
        CompositionLocalProvider(LocalContentAlpha provides contentColor.alpha) {
            ProvideTextStyle(MaterialTheme.typography.button) {
                Box(
                    modifier = Modifier
                        .defaultMinSize(minWidth = 56.dp, minHeight = 56.dp)
                        .background(brush = Brush.verticalGradient(gradient)),
                    contentAlignment = Alignment.Center
                ) { content() }
            }
        }
    }
}

Просто добавьте Crazy к своему составному объекту, и все готово.

-1
Cody Gray 14 Окт 2021 в 09:00