当前位置：首页 > news >正文

Compose笔记(四十一)--ExtendedFloatingActionButton

news 2025/8/4 10:55:43

这一节主要了解一下Compose中的ExtendedFloatingActionButton，在Jetpack Compose中，ExtendedFloatingActionButton是一种扩展式浮动操作按钮，相比普通FloatingActionButton增加了文本标签，适合需要更明确说明的主要操作（如 “创建”“保存” 等）。它通常用于页面底部中央，兼具视觉突出性和操作明确性。现简单总结:

API:
onClick：用户点击按钮时触发的回调函数，类型为()->Unit。
icon：按钮左侧的图标，类型为 @Composable ()->Unit，通常使用Icon组件。
text：按钮右侧的文本，类型为 @Composable ()->Unit，通常使用Text组件。
modifier：用于修饰按钮的布局属性（如大小、边距等），类型为 Modifier。
shape：按钮的形状，默认是圆角矩形，可通过Shape类型自定义。
backgroundColor：按钮的背景颜色，类型为Color，默认使用主题色。
contentColor：按钮内容的颜色（如图标和文本），类型为Color，默认根据背景色自动计算。
elevation：按钮的阴影效果，类型为Dp，默认使用FloatingActionButtonDefaults.elevation()。

场景
1.页面级核心操作
当页面存在一个最主要的操作（如创建、添加、提交等），且需要通过文本明确告知用户该操作的含义时，适合使用ExtendedFloatingActionButton
2.需引导用户注意的高频操作
对于用户需要高频触发但易被忽略的操作，ExtendedFloatingActionButton的“文本+图标+悬浮样式”组合能更有效地吸引注意力，同时通过文本降低理解成本。
3.与上下文关联的动态操作
结合状态变化动态调整文本和图标，适用于操作含义随页面状态改变的场景，通过文本实时反馈当前可执行的操作。

栗子:

import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Send
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp@Composable
fun SubmitFabExample() {val listState = rememberLazyListState()val isExpanded by remember {derivedStateOf {listState.isScrollInProgress.not() || listState.firstVisibleItemIndex == 0}}Scaffold(floatingActionButton = {ExtendedFloatingActionButton(text = { Text("提交表单") },icon = { Icon(Icons.Default.Send, contentDescription = "提交") },onClick = { /* 提交逻辑 */ },expanded = isExpanded, elevation = FloatingActionButtonDefaults.elevation(defaultElevation = 8.dp,pressedElevation = 12.dp),modifier = Modifier.padding(horizontal = 16.dp))}) { innerPadding ->LazyColumn(state = listState,modifier = Modifier.padding(innerPadding),contentPadding = PaddingValues(16.dp)) {items(50) { index ->Text(text = "表单项目 $index",modifier = Modifier.padding(vertical = 8.dp),style = MaterialTheme.typography.bodyLarge)}}}
}

import androidx.compose.animation.AnimatedContent
import androidx.compose.animation.ExperimentalAnimationApi
import androidx.compose.animation.SizeTransform
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.slideInHorizontally
import androidx.compose.animation.slideOutHorizontally
import androidx.compose.animation.with
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Check
import androidx.compose.material.icons.filled.Edit
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp@OptIn(ExperimentalAnimationApi::class)
@Composable
fun ExtendedFabExample() {var isEditing by remember { mutableStateOf(false) }var inputText by remember { mutableStateOf("") }Scaffold(floatingActionButton = {ExtendedFloatingActionButton(text = {AnimatedContent(targetState = isEditing,transitionSpec = {slideInHorizontally { it } + fadeIn() withslideOutHorizontally { -it } + fadeOut()}) { editing ->Text(if (editing) "保存" else "编辑")}},icon = {AnimatedContent(targetState = isEditing,transitionSpec = {fadeIn() + slideInHorizontally() withfadeOut() + slideOutHorizontally() usingSizeTransform(clip = false)}) { editing ->Icon(
//                            imageVector = if (editing) Icons.Default.Search else Icons.Default.Edit,imageVector = if (editing) Icons.Filled.Check else Icons.Default.Edit,contentDescription = if (editing) "保存" else "编辑")}},onClick = {if (isEditing) {// 保存逻辑：这里可以添加数据持久化操作}isEditing = !isEditing},containerColor = if (isEditing) {MaterialTheme.colorScheme.secondaryContainer} else {MaterialTheme.colorScheme.primary},contentColor = if (isEditing) {MaterialTheme.colorScheme.onSecondaryContainer} else {MaterialTheme.colorScheme.onPrimary},modifier = Modifier.padding(16.dp))},floatingActionButtonPosition = FabPosition.Center) { innerPadding ->Box(modifier = Modifier.fillMaxSize().padding(innerPadding).padding(16.dp),contentAlignment = Alignment.Center) {OutlinedTextField(value = inputText,onValueChange = { inputText = it },label = { Text("请输入内容") },enabled = isEditing, modifier = Modifier.fillMaxWidth(0.8f))}}
}

注意:
1 布局空间占用
ExtendedFloatingActionButton宽度动态扩展，需确保父布局有足够空间避免遮挡内容。
若空间不足，建议用普通FloatingActionButton或通过Modifier.widthIn限制最大宽度。
2 主题一致性
按钮颜色应与应用主题保持一致，可通过MaterialTheme.colors引用主题色。
3 动画与状态管理
若需实现展开/折叠动画（如点击按钮后显示更多操作），需结合AnimatedVisibility或自定义状态管理。
4 依赖版本兼容性
ExtendedFloatingActionButton是Material3组件，需确保依赖版本≥1.1.0。

查看全文

http://www.xdnf.cn/news/1237357.html