Compose | UI组件(五) | Button 按钮组件

---

前言

随着移动端的技术不断更新迭代，Compose也运用的越来越广泛，很多人都开始学习Compose

本文主要介绍Button的含义和基本用法

---

Button 是什么？

Button是按照Material Design风格来实现的，一个按钮组件

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun Button(onClick: () -> Unit,                         //点击事件modifier: Modifier = Modifier,               //修饰符enabled: Boolean = true,                     //是否启用shape: Shape = ButtonDefaults.shape,         //定义按钮形状和填充颜色colors: ButtonColors = ButtonDefaults.buttonColors(),           //按钮颜色elevation: ButtonElevation? = ButtonDefaults.buttonElevation(), //按钮阴影border: BorderStroke? = null,                                   //按钮边框contentPadding: PaddingValues = ButtonDefaults.ContentPadding,  //按钮间距interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, //监听组件状态的事件源content: @Composable RowScope.() -> Unit     //按钮的作用域
)

Button的创建

Button(onClick = {  }) {Text(text = "确认")
}

注：onClick 是必选项，用于响应用户点击事件，content 也是必选项，用于显示Button的UI

Button显示水平方向的UI

Button(onClick = {  }) {Icon(imageVector = Icons.TwoTone.Done,contentDescription = null,modifier = Modifier.size(ButtonDefaults.IconSize))Spacer(modifier = Modifier.size(ButtonDefaults.IconSpacing))Text(text = "确认")
}

注：content: @Composable RowScope.() -> Unit， RowScope 为水平方向作用域

IconButton是什么？

IconButton 是一个可点击的图标，一般都需要再IconButton组件提供一个图标组件

@Composable
fun IconButton(onClick: () -> Unit,              //点击事件modifier: Modifier = Modifier,    //修饰符enabled: Boolean = true,          //是否启用colors: IconButtonColors = IconButtonDefaults.iconButtonColors(), //图标按钮颜色interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },   //监听组件状态的事件源content: @Composable () -> Unit //作用域
)

IconButton是创建

IconButton(onClick = { },modifier = Modifier.size(16.dp)) {Icon(imageVector =Icons.Filled.Close,contentDescription = "关闭")
}

FloatingActionButton是什么？

FloatingActionButton是一个悬浮按钮，需要提供Icon组件

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun FloatingActionButton(onClick: () -> Unit,           //点击事件modifier: Modifier = Modifier, //修饰符shape: Shape = FloatingActionButtonDefaults.shape, //定义按钮形状和填充颜色containerColor: Color = FloatingActionButtonDefaults.containerColor, //按钮颜色contentColor: Color = contentColorFor(containerColor),      //图标颜色elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(),//阴影interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, //监听组件状态的事件源content: @Composable () -> Unit, //作用域
)

FloatingActionButton创建

FloatingActionButton(onClick = { }) {Icon(Icons.Filled.KeyboardArrowUp, contentDescription = null)
}

ExtendedFloatingActionButton是什么？

ExtendedFloatingActionButton是带有文字的悬浮框，和FloatingActionButton区别就是可以带有文字

ExtendedFloatingActionButton(onClick = { }, icon = { Icon( imageVector = Icons.Filled.Favorite, contentDescription = null)},text ={ Text(text = "添加到我喜欢")} 
)

---

总结

1. Button是一个按钮组件
2. IconButton是一个图标按钮组件
3. FloatingActionButton是一个悬浮按钮，可以带有图标
4. ExtendedFloatingActionButton是一个悬浮按钮，可以带有图标和文字