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")
}

对应显示效果为:

image.png

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

这里说下重要参数:

onClick

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

modifier

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

enabled

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

elevation

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

ButtonDefaults.elevation(defaultElevation,pressedElevation,disabledElevation)
  • defaultElevation表示默认的阴影
  • pressedElevation表示按下时的阴影
  • disabledElevation表示未启用时候的阴影

对应构造函数如下:

9FB4128C-2644-4fd2-A22B-62756614A29A.png
可以看到官方默认参数大小依次为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")
    }
}

对应效果为:

image.png

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 = "绝对切角")
    }
}

对应效果图为:

image.png

border

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

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

使用方式:

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

对应的效果为:

image.png

(默认可点击在不修改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的边框 ")
}

image.png

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的边框 ")
}

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

image.png

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")
    }
}

对应显示为:

image.png

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

GitHub 加速计划 / compose / compose
33.27 K
5.15 K
下载
compose - Docker Compose是一个用于定义和运行多容器Docker应用程序的工具,通过Compose文件格式简化应用部署过程。
最近提交(Master分支:2 个月前 )
501b5acd Add `jhrotko` to Core Maintainers. Signed-off-by: Laura Brehm <laurabrehm@hey.com> 4 天前
f51bc4cd Signed-off-by: Guillaume Lours <705411+glours@users.noreply.github.com> 4 天前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐