Compose中的Button

2022-06-20 本文已影响0人提丶米

参考地址：developer.android.google.cn/jetpack/com…

image.png

Button 直接可以查看源码看看它都有哪些属性

@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,//按钮内容的padding
    content: @Composable RowScope.() -> Unit //按钮的内容
)

Button我们最熟悉的估计就是点击事件和文本内容也就是如下的代码

Button(
    //点击事件
    onClick = {
        Toast.makeText(context, "点击了按钮", Toast.LENGTH_SHORT).show()
    }
) {
    //设置按钮的文本
    Text(text = "按钮的文本")
}

enabled: Boolean = true,//按钮是否可点击，可以和后面colors联系在一起，设置其可点击和不可点击下的按钮背景颜色和文本颜色
interactionSource表示的是按钮的交互流其类型是MutableInteractionSource，如果要观察交互并且自定义按钮在不同交互中的外观、行为，则可以创建并传递按钮记住的MutableInteractionSource。
elevation 用于解析按钮在不同状态下的高度，类型为ButtonElevation，它还可以控制按钮下方的阴影大小。我们可以通过实现接口的方式也可以直接使用默认值
ButtonDefaults.elevation(
3.dp, 7.dp, 0.dp
)来直接设置

@Stable
interface ButtonElevation {
    /**
     * Represents the elevation used in a button, depending on [enabled] and
     * [interactionSource].
     *
     * @param enabled whether the button is enabled
     * @param interactionSource the [InteractionSource] for this button
     */
    @Composable
    fun elevation(enabled: Boolean, interactionSource: InteractionSource): State<Dp>
}

@Composable
fun elevation(
    defaultElevation: Dp = 2.dp, //默认高度
    pressedElevation: Dp = 8.dp, //按下的高度
    disabledElevation: Dp = 0.dp,//禁用的高度
    hoveredElevation: Dp = 4.dp, //悬停的高度
    focusedElevation: Dp = 4.dp, //获取焦点的高度
): ButtonElevation {
    return remember(
        defaultElevation,
        pressedElevation,
        disabledElevation,
        hoveredElevation,
        focusedElevation
    ) {
        DefaultButtonElevation(
            defaultElevation = defaultElevation,
            pressedElevation = pressedElevation,
            disabledElevation = disabledElevation,
            hoveredElevation = hoveredElevation,
            focusedElevation = focusedElevation
        )
    }
}

border参数类型为BorderStroke 默认值为null 主要是用来绘制按钮的边框。第一个参数是宽度，第二个参数是颜色

@Stable
fun BorderStroke(width: Dp, color: Color) = BorderStroke(width, SolidColor(color))

@Composable
fun TestButtonBorder() {
    val context = LocalContext.current
    Button(
        //点击事件
        onClick = {
            Toast.makeText(context, "点击了按钮", Toast.LENGTH_SHORT).show()
        },
        //边框，边框宽度和边框颜色
        border = BorderStroke(1.dp, color = Color.Magenta),
    ) {
        //设置按钮的文本
        Text(text = "测试Broder")
    }
}

shape类似于我们在drawable中定义的shape，我们看看它的源码

/**
 * 创建四个角的圆角形状，大小相同，size—使用像素大小
 */
fun RoundedCornerShape(size: Float) = RoundedCornerShape(CornerSize(size))
/**
 * 创建四个角的圆角形状，大小相同，size—dp为单位
 */
fun RoundedCornerShape(size: Dp) = RoundedCornerShape(CornerSize(size))
/**
 * 创建四个角的圆角形状，大小相同，percent—使用百分比表示大小
 */
fun RoundedCornerShape(percent: Int) =
    RoundedCornerShape(CornerSize(percent))
/**
 * 很明显是以dp为单位
 */
fun RoundedCornerShape(
    topStart: Dp = 0.dp,
    topEnd: Dp = 0.dp,
    bottomEnd: Dp = 0.dp,
    bottomStart: Dp = 0.dp
) = RoundedCornerShape(
    topStart = CornerSize(topStart),
    topEnd = CornerSize(topEnd),
    bottomEnd = CornerSize(bottomEnd),
    bottomStart = CornerSize(bottomStart)
)
/**
 *  以像素为单位定义的RoundedCornerShape
 */
fun RoundedCornerShape(
    topStart: Float = 0.0f,
    topEnd: Float = 0.0f,
    bottomEnd: Float = 0.0f,
    bottomStart: Float = 0.0f
) = RoundedCornerShape(
    topStart = CornerSize(topStart),
    topEnd = CornerSize(topEnd),
    bottomEnd = CornerSize(bottomEnd),
    bottomStart = CornerSize(bottomStart)
)
/**
 *  RoundedCornerShape，大小以形状较小边的百分比定义。
 *  topStartPercent -上起始角半径作为小边的百分比，范围为0 - 100。
 *  topEndPercent -顶端角半径作为小边的百分比，范围为0 - 100。
 *  bottom endpercent -底角半径作为小边的百分比，范围为0 - 100。bottom 
 *  startpercent -底部起始角半径作为较小边的百分比，范围为0 - 100。
 */
fun RoundedCornerShape(
    /*@IntRange(from = 0, to = 100)*/
    topStartPercent: Int = 0,
    /*@IntRange(from = 0, to = 100)*/
    topEndPercent: Int = 0,
    /*@IntRange(from = 0, to = 100)*/
    bottomEndPercent: Int = 0,
    /*@IntRange(from = 0, to = 100)*/
    bottomStartPercent: Int = 0
) = RoundedCornerShape(
    topStart = CornerSize(topStartPercent),
    topEnd = CornerSize(topEndPercent),
    bottomEnd = CornerSize(bottomEndPercent),
    bottomStart = CornerSize(bottomStartPercent)
)

我们比较常用的就是dp为单位的，如下

@Composable
fun TestButtonShape() {
    val context = LocalContext.current
    Button(
        //点击事件
        onClick = {
            Toast.makeText(context, "点击了按钮", Toast.LENGTH_SHORT).show()
        },
        //定义按钮的形状和阴影如RoundedCornerShape 圆角
        shape = RoundedCornerShape(10.dp),
    ) {
        //设置按钮的文本
        Text(text = "测试Shape")
    }
}

colors自然就是按钮的颜色，但是指的是不同状态下的颜色，查看ButtonDefaults下的源码

@Composable
fun buttonColors(
    backgroundColor: Color = MaterialTheme.colors.primary,//背景色，正常状态下
    contentColor: Color = contentColorFor(backgroundColor),//正常下内容颜色（感兴趣的可以试试设置Text中的颜色，在设置这里的颜色）
    disabledBackgroundColor: Color = MaterialTheme.colors.onSurface.copy(alpha = 0.12f)
        .compositeOver(MaterialTheme.colors.surface),//不可用时的背景颜色
    disabledContentColor: Color = MaterialTheme.colors.onSurface
        .copy(alpha = ContentAlpha.disabled)//不可用时的内容颜色
): ButtonColors = DefaultButtonColors(
    backgroundColor = backgroundColor,
    contentColor = contentColor,
    disabledBackgroundColor = disabledBackgroundColor,
    disabledContentColor = disabledContentColor
)

当我们切换enabled的值的时候就可以看到按钮颜色相应的变化

@Composable
fun TestButtonColors() {
    val context = LocalContext.current
    Button(
        //点击事件
        onClick = {
            Toast.makeText(context, "点击了按钮", Toast.LENGTH_SHORT).show()
        },
        //是否可点击 可改变此状态控制按钮的背景色和文字颜色
        enabled = true,
        //用来设置按钮不同状态下的颜色
        colors = ButtonDefaults.buttonColors(
            backgroundColor = Color.Red,
            contentColor = Color.Green,
            //按钮不可点击的背景颜色
            disabledBackgroundColor = Color.Yellow,
            //按钮不可点击的文本颜色
            disabledContentColor = Color.Cyan
        ),
    ) {
        //设置按钮的文本
        Text(text = "测试Colors")
    }
}

contentPadding 容器和控件之间的间距，参数类型为PaddingValues，依旧老规矩看看它的源码。


/**
 * The default content padding used by [Button]
 */
val ContentPadding = PaddingValues(
    start = ButtonHorizontalPadding,//左边距
    top = ButtonVerticalPadding,    //上边距
    end = ButtonHorizontalPadding,  //右边距
    bottom = ButtonVerticalPadding  //下边距
)

Compose提供了3个设置参数的方法，可以看到都调用的是一个方法，只不过是传入参数不同

@Stable
fun PaddingValues(all: Dp): PaddingValues = PaddingValuesImpl(all, all, all, all)
@Stable
fun PaddingValues(horizontal: Dp = 0.dp, vertical: Dp = 0.dp): PaddingValues =
    PaddingValuesImpl(horizontal, vertical, horizontal, vertical)
@Stable
fun PaddingValues(
    start: Dp = 0.dp,
    top: Dp = 0.dp,
    end: Dp = 0.dp,
    bottom: Dp = 0.dp
): PaddingValues = PaddingValuesImpl(start, top, end, bottom)

Compose中的Button

猜你喜欢

热点阅读