Jetpack Compose -FloatingActionButton

FloatingActionButton

@OptIn(markerClass = [ExperimentalMaterialApi])
@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: () -> Unit
): @OptIn(markerClass = [ExperimentalMaterialApi]) @Composable Unit

1. 概述

​​Material Design floating action button​​

一个 ​​FloatActionButton​​（FAB）代表一个屏幕的主要行为。

​​FAB​​ 通常和一个 ​​Icon​​ 一起使用

import androidx.compose.material.FloatingActionButton
import androidx.compose.material.Icon

FloatingActionButton(onClick = { /*do something*/ }) {
    Icon(Icons.Filled.Favorite, contentDescription = "Localized description")
}

除了普通的 FAB 之外，Compose 也提供了带有文字扩展的 FAB， ​​ExtendedFloatingActionButton​​

package com.example.composestudy

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.collectIsPressedAsState

import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape

import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite

import androidx.compose.runtime.*
import androidx.compose.ui.tooling.preview.Preview


import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.SpanStyle
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.withStyle
import androidx.compose.ui.unit.dp

import com.example.composestudy.ui.theme.ComposestudyTheme


class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposestudyTheme {
                FloatingActionButtonDemo()
            }
        }
    }
}

data class ButtonState(var text: String, var textColor: Color, var buttonColor: Color)


@Composable
fun ButtonDemo() {
    // 获取按钮的状态
    val interactionState = remember { MutableInteractionSource() }

// 使用 Kotlin 的解构方法
    val (text, textColor, buttonColor) = when {
        interactionState.collectIsPressedAsState().value  -> ButtonState("按钮1", Color.Red, Color.Black)
        else -> ButtonState( "按钮", Color.White, Color.Red)
    }
    Button(
        onClick = { /*TODO*/ },
        interactionSource = interactionState,
        elevation = null,
        shape = RoundedCornerShape(50),
        colors = ButtonDefaults.buttonColors(
            backgroundColor = buttonColor,
        ),
        modifier = Modifier.width(IntrinsicSize.Min).height(IntrinsicSize.Min)
    ) {
        Text(
            text = text, color = textColor
        )
    }
}
@Composable
fun FloatingActionButtonDemo() {
    ExtendedFloatingActionButton(
        icon = { Icon(Icons.Filled.Favorite, contentDescription = null) },
        text = { Text("收藏") },
        onClick = { /*do something*/ }
    )
}


@Preview(name = "Light Mode")

@Composable
fun PreviewMessageCard() {
    ComposestudyTheme {

        FloatingActionButtonDemo()
    }
}