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()
    }
}