Android中Compose系列之按钮Button

前言

Button是Compose中作为按钮提供交互的控件，它本身属性自带onClick的点击处理，不需要使用Modifiter中的点击功能，目前最新版默认按钮风格为Material风格的圆角，所以需要手动调节为矩形或更改圆角半径。

按钮的官方中文文档参考：https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary#button

一、Button的基本使用

1.Button

最常用的按钮，控件本身自带onClick,不需要Modifiter的点击事件，如果两者同时设置时，按钮自身的优先级更高，内容中设置的文字图形等会按照横向布局排列，注意设置颜色时容器的上色与内容的上色有所不同，下图为两种模式下各自设为红色的表现。

Button(//默认为material风格的圆角矩形onClick={//设置点击事件时做出的反应Log.i("MainActivity","ButtonSample: 按钮")},//可以按钮启用与未启用时的容器、内容等颜色colors=ButtonDefaults.buttonColors(contentColor=Color.Red),//展示内容的颜色modifier=Modifier.padding(10.dp),//内边距shape=RectangleShape//矩形，也可以设置为0dp的圆角RoundedCornerShape(0.dp){//当前作用域内为横向布局，呈现按钮中展示内容Icon(Icons.Filled.Favorite,//Material库中的图标contentDescription="实心爱心图案",//无障碍描述modifier=Modifier.size(ButtonDefaults.IconSize)//设置尺寸为默认按钮尺寸)Text("内容1")}

下图为下面三种按钮的变体所展示的效果：

2.扩展

TextButton

相当于带有点击事件的文本，系统封装了Text将点击事件添加进去，可以更方便给text设置点击事件，不再需要用Modifiter的点击功能。

TextButton(//带有点击事件的文本。等同于封装了Text，将点击事件功能添加上，因此，不需要modifier的点击功能onClick={}//点击事件逻辑){Text("封装了点击功能的文本")}

OutlinedButton

显示效果为带有主题颜色的边框+透明背景的按钮，当然也可以自己设置来改变这种效果，它的本意是用于次要操作的按钮，以便于跟主要按钮Button区分，避免一个页面按钮过多分散用户注意力，因此可以一个页面设置一个Button，其他用OutlinedButton来提供更好的体验

OutlinedButton(//带有主题颜色的边框+透明背景的按钮,常用于次要操作按钮，如一个页面中设置一个Button其他都OutLinedButton作为次要操作onClick={}//点击事件逻辑){Text("低视觉权重按钮")}

IconButton

用于展示图标的按钮，属于官方封装的便捷按钮，本质是通过Box布局进行的元素堆叠，因此，设置多个元素，会重叠在一起。

IconButton(//图标按钮 添加图标与文字后会重叠在一起enabled=false,//是否设置禁用onClick={//点击事件逻辑}){//以下内容会重叠在一起，通常只设置一个图案Icon(Icons.Filled.Favorite,//Material库中的图标contentDescription="实心爱心图案",//无障碍描述modifier=Modifier.size(ButtonDefaults.IconSize)//设置尺寸为默认按钮尺寸)Icon(Icons.Filled.AccountBox,//Material库中的图标contentDescription="实心爱心图案",//无障碍描述modifier=Modifier.size(ButtonDefaults.IconSize)//设置尺寸为默认按钮尺寸)Text("内容2")}

二、Button属性

@ComposablefunCustomButtonDemo(){// 1. 状态管理：监听按钮按下状态（基于interactionSource）valinteractionSource=remember{MutableInteractionSource()}//缓存 交互状态监听器valisPressedbyinteractionSource.collectIsPressedAsState()// 通过监听器获取当前按下状态valisEnabled=remember{mutableStateOf(true)}// 控制按钮启用/禁用// 2. 自定义按钮颜色：不同状态下的背景/内容色valbuttonColors=ButtonDefaults.buttonColors(containerColor=Color(0xFF6200EE),// 默认背景色（紫色）contentColor=Color.White,// 默认内容色（文字/图标）disabledContainerColor=Color.Gray.copy(0.5f),// 禁用时背景色disabledContentColor=Color.White.copy(0.7f)// 禁用时内容色)// 3. 自定义边框：1dp红色边框valcustomBorder=BorderStroke(1.dp,Color.Red)// 4. 自定义阴影：按下时增加阴影valcustomElevation=ButtonDefaults.buttonElevation(defaultElevation=4.dp,// 默认阴影pressedElevation=8.dp,// 按下时阴影disabledElevation=0.dp// 禁用时无阴影)// 5. 按钮主体（结合所有属性）Button(onClick={// 点击后切换为禁用状态，如果没有外部逻辑启用则不会再触发onclickisEnabled.value=!isEnabled.valueprintln("按钮被点击，当前启用状态：${isEnabled.value}")},modifier=Modifier.padding(horizontal=16.dp,vertical=8.dp)// 外部边距.width(200.dp),// 固定宽度enabled=isEnabled.value,// 是否禁用通过上面绑定启用状态来决定，也由点击事件所改变interactionSource=interactionSource,// 绑定缓存的交互状态源，感知上面设置的按下操作elevation=customElevation,// 自定义阴影shape=RoundedCornerShape(12.dp),// 自定义圆角（12dp）border=customBorder,// 自定义边框colors=buttonColors,// 自定义颜色contentPadding=PaddingValues(horizontal=20.dp,vertical=10.dp),// 自定义内边距content={// 按钮内部内容（RowScope，自动横向排列）Icon(imageVector=Icons.Filled.Check,contentDescription="确认",modifier=Modifier.size(ButtonDefaults.IconSize))// 图标与文字间距Spacer(modifier=Modifier.size(ButtonDefaults.IconSpacing))// 文字（结合按下状态动态修改）Text(text=if(isPressed)"按下中..."elseif(isEnabled.value)"点击切换禁用"else"已禁用",style=MaterialTheme.typography.labelLarge)})}