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是一个悬浮按钮，可以带有图标和文字