Jetpack：007-各种各样的Button

原创

已于 2023-10-15 08:40:53 修改 · 389 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#android #移动开发 #Jetpack #compose #Button

于 2023-10-14 22:28:57 首次发布

本文主要介绍Jetpack中Button组件，它是常用的触发用户点击事件的组件。详细阐述了多种Button的使用方法，如Button、IconButton等，还说明了其参数作用及与其他组件的组合方式。通过示例代码展示用法，并可动态修改按钮颜色，最后对内容进行了总结。

文章目录

1. 概念介绍
2. 使用方法
3. 示例代码
4. 内容总结

我们在上一章回中介绍了Jetpack中输入框相关的内容，本章回中将要介绍 Button。闲话休提，让我们一起Talk Android Jetpack吧！

1. 概念介绍

我们在本章回中介绍的Button是指按钮，它是程序中常用的组件，它主要用来触发用户的点击事件，jetpack中提供了各种各样的Button,我们在本章回中将详细介绍这些Button的种类和使用方法。

2. 使用方法

2.1 Button

这个是最常用的按钮，它表示带有背景色的按钮，它通过Button可组合函数实现，该函数中常用的参数如下：

border参数：主要用来控制Button的边框；
colors参数：主要用来控制Button的背景色，文字颜色；
onClick参数：它是方法类型，主要用来响应Button的点击事件；

除了参数外，Button还可以通过尾部的lambda来组合其它组件，比如在尾部组合Text()可以给Button添加文字，组合Icon可以给Button添加图标。我们将在后面的小节中通过示例代码来演示它们的组合方法，同时也会演示如何使用上面介绍过的参数。

2.2 IconButton

该Button表示带有图标的按钮，按钮没有边框和背景色，它通过IconButton()可组合函数实现，该函数的参数和Button中的参数类似，因此不再介绍了。它可以组合Text()或者Icon()实现带文本或者图标的按钮，不过Text和Icon只能组合其中的一个函数，不能同时组合两个函数。

2.3 ElevatedButton

该Button表示没有边框但是有背景色的按钮，它通过ElevatedButton()可组合函数实现，该函数的参数和Button中的参数类似，因此不再介绍了。它可以组合Text()实现带文本的按钮。

2.4 OutlinedButton

该Button表示有边框但是没有背景色的按钮，它通过OutlinedButton()可组合函数实现，该函数的参数和Button中的参数类似，因此不再介绍了。它可以组合Text()实现带文本的按钮，它的效果和ElevatedButton()函数实现的按钮效果正好相反。

2.5 TextButton

该Button表示没有边框和背景色的按钮，它通过TextButton()可组合函数实现，该函数的参数和Button中的参数类似，因此不再介绍了。它可以组合Text()实现带文本的按钮。它的效果和文本类似，只是可以响应点击事件。

2.6 FloatingActionButton

该Button表示悬浮按钮，它不但有边框和背景色，还有阴影效果，它通过FloatingActionButton()可组合函数实现，该函数的参数和Button中的参数类似，因此不再介绍了。它可以组合Text()实现带文本的悬浮按钮。

还有一个ExtendedFloatingActionButton()函数也可以实现悬浮按钮，它可以同时组合Text和Icon两个函数，进而实现带有图标和文本的悬浮按钮。

3. 示例代码

Column(
    horizontalAlignment = Alignment.CenterHorizontally,
    verticalArrangement = Arrangement.SpaceBetween,
    modifier = Modifier.fillMaxWidth()
) {
   
   

    val interactionSource = remember {
   
   
        MutableInteractionSource()
    }