JetPack Compose之Button使用指南

Jetpack Compose系列(8) - Button

跟View体系一样，Compose通过Button来显示按钮状态及响应相关事件等。官方表示其默认遵从Material Design设计理念。

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun Button(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    elevation: ButtonElevation? = ButtonDefaults.elevation(),
    shape: Shape = MaterialTheme.shapes.small,
    border: BorderStroke? = null,
    colors: ButtonColors = ButtonDefaults.buttonColors(),
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
    content: @Composable RowScope.() -> Unit
)

除此之外，官方还封装了其他类型Button组件供我们使用，如：IconButton、TextButton、OutlinedButton、IconToggleButton。

根据Button构造函数参数，我们可以写一个最简单Button，如下：

Button(onClick = {}){
    Icon(imageVector = Icons.Default.Search, contentDescription = null)
    Text(text = "最简单Button")
}

对应显示效果为：

代码中可以看到响应点击事件回调为第一个参数，Text作为Button中的子组件，默认文本横向排列。在这里，Button可以看做是一个布局控件,设置文字也就是往里面添加一个Text组件。这种构造使得我们在自定义Button上面会方便许多（相较于传统的View体系而言）。在上述代码的Button组件中，传入了两个组件，效果显示为水平横向，类似于Row，默认添加控件都是横向水平排列。

这里说下重要参数：

onClick

点击事件，接收一个函数处理点击逻辑

modifier

修饰符，之前文章已讲过，对齐各属性不做赘述。（点我）

enabled

按钮是否可用(在不修改colors属性的情况下，不可用默认是灰色，可用默认是蓝色)

elevation

阴影，Button的阴影有默认参数，我们也可以通过修改ButtonDefaults.elevation参数来修改阴影。

ButtonDefaults.elevation(defaultElevation,pressedElevation,disabledElevation)

• defaultElevation表示默认的阴影
• pressedElevation表示按下时的阴影
• disabledElevation表示未启用时候的阴影

对应构造函数如下：

可以看到官方默认参数大小依次为2.dp，8.dp，0.dp。这里我们进行些许修改观察其效果：

Column() {
    Button(onClick = { println("点击了按钮") },
        elevation = elevation(4.dp,10.dp,0.dp))
    {
        Icon(imageVector = Icons.Default.Search, contentDescription = null)
        Text(text = "最简单Button")
    }
    Spacer(modifier = Modifier.height(20.dp))
    Button(onClick = { println("点击了按钮") },
        enabled = false,
        elevation = elevation(0.dp))
    {
        Icon(imageVector = Icons.Default.Search, contentDescription = null)
        Text(text = "不可用的Button")
    }
}

对应效果为：

shape

即形状，官方默认提供了以下四种：

· RoundedCornerShape 圆角形状

· CutCornerShape 切角形状

· AbsoluteRoundedCornerShape 绝对圆角形状

· AbsoluteCutCornerShape 绝对切角形状

其中圆角和绝对圆角差距并不明显，就现在为止还没发现明显区别。上述四种形状在声明对象实例时，可传入参数是一样的，例如：

RoundedCornerShape(100.dp) //设置100dp的圆角
RoundedCornerShape(topStart = 5.dp,topEnd = 6.dp,bottomEnd = 7.dp,bottomStart = 8.dp)

其对应的四个参数见名知意：

· topStart 左上角

· topEnd 右上角

· bottomStart 左下角

· bottomEnd 右下角

其各个形状实例如下：

Column() {
    Button(onClick = {},
    shape = RoundedCornerShape(10.dp,10.dp,10.dp,10.dp))
    {
        Text(text = "10dp的圆角")
    }
    Spacer(modifier = Modifier.height(10.dp))
    Button(onClick = {},
        shape = CutCornerShape(10.dp,10.dp,10.dp,10.dp))
    {
        Text(text = "10dp的切角")
    }
    Spacer(modifier = Modifier.height(10.dp))
    Button(onClick = {},
        shape = AbsoluteRoundedCornerShape(10.dp,0.dp,31.dp,6.dp)
    )
    {
        Text(text = "10dp的绝对圆角..........")
    }
    Spacer(modifier = Modifier.height(10.dp))
    Button(onClick = {},
        shape = AbsoluteCutCornerShape(10.dp,0.dp,10.dp,10.dp)
    )
    {
        Text(text = "绝对切角")
    }
}

对应效果图为：

border

即边框，使用BorderStroke对象，根据其构造函数可看出只需要传入两个参数，宽度及颜色。

BorderStroke(1.dp,color = Color.Blue)

使用方式：

Button(
    onClick = {},
    border = BorderStroke(width = 10.dp, color = Color.Red)
){
    Text(text = " 10dp的边框 ")
}

对应的效果为：

（默认可点击在不修改colors属性情况下就是蓝色，然后边框设置红色，这个图像可以理解吧）

colors

即颜色，官方提供四种设置方式：

· backgroundColor：设置背景颜色

· contentColor：设置内容颜色这里比如说是文本的颜色

· disabledBackgroundColor：enable等于false的时候的背景颜色

· disabledContentColor：enable等于false时候的内容的颜色

使用方式较简单，这里做简单示例：

Button(
    onClick = {},
    border = BorderStroke(width = 1.dp, color = Color.Red),
    colors = ButtonDefaults.buttonColors(
        backgroundColor = Color.Yellow,
        contentColor = Color.Green
    )
){
    Text(text = " 1dp的边框 ")
}

contentPadding

即内容内边距，其参数是一个PaddingValues对象，这个对象的构造方法如下：

· PaddingValues(all) ：所有边距

· PaddingValues(horizontal: Dp, vertical: Dp) ：横向边距，竖向边距

· PaddingValues(start: Dp = 0.dp,top: Dp = 0.dp,end: Dp = 0.dp,bottom: Dp = 0.dp) ：左、上、右、下边距

我们接着上述代码示例：

Button(
    onClick = {},
    border = BorderStroke(width = 1.dp, color = Color.Red),
    colors = ButtonDefaults.buttonColors(
        backgroundColor = Color.Yellow,
        contentColor = Color.Green
    ),
    contentPadding = (PaddingValues(10.dp,2.dp,1.dp,10.dp))
){
    Text(text = " 1dp的边框 ")
}

对应显示效果也在预料之中：

interactionSource

即状态变化，用来表示限制按钮的状态说明，类似于View体系中的Selector，对不同点击按压状态显示不一样。interactionSource只是一个接口，我们要使用其功能则需要使用其实现类MutableInteractionSource，这个类中提供了三个属性用来获取状态：

· collectIsPressedAsState 按压状态

· collectIsDraggedAsState 拖动状态

· collectIsFocusedAsState 焦点状态

示例如下：

val mInteractionSource = remember {
    MutableInteractionSource()
}

val pressState = mInteractionSource.collectIsPressedAsState()
//如果是按压状态则是圆角形状,否则则是切角形状
val showShape = if(pressState.value) RoundedCornerShape(10.dp) else CutCornerShape(10.dp)

Column(
    Modifier.padding(20.dp)
) {
    Button(
        onClick = {  },
        //设置我们定义的shape
        shape = showShape,
        //设置创建的MutableInteractionSource对象
        interactionSource = mInteractionSource
    ) {
        Text("点击变形")
    }
}

指定属性后，其作用与Selector一样，这里不再赘述。

IconButton

即图标按钮，可生成一个可点击且点击后默认会有水波纹的图标按钮，其余跟Button一致：

IconButton(onClick = {}) {
    Icon(Icons.Filled.Search, null)
}

其使用和其他设置上与Button没有区别，这里不再赘述。

OutlinedButton

即边框按钮、轮毂按钮。使用方式与Button一致，但默认显示效果不一样：

Column{
    Button(
        onClick = {  }
    ) {
        Text("Button")
    }
    Spacer(modifier = Modifier.height(10.dp))
    OutlinedButton(
        onClick = {  }
    ) {
        Text("OutlinedButton")
    }
}

对应显示为：

此控件其余参数和使用方法与Button一致，此处不再赘述。