Jetpack Compose-Button

举报
坚果的博客 发表于 2022/05/28 13:51:28 2022/05/28
【摘要】 Button1. Button属性了解Button还是非常有必要的,@OptIn(ExperimentalMaterialApi::class)@Composablefun Button( onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, interactionSo...

Button

1. Button属性

了解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,
    content: @Composable RowScope.() -> Unit
)


ComposeButton 是基于 Material Design 理念设计的

2. 使用示例

2.1 基本使用

以下是简单创建一个默认的 Button 代码:

import androidx.compose.material.Button
import androidx.compose.material.Text
​
@Composable
fun ButtonDemo() {
    Button(
        onClick = { /*TODO*/ }
    ) {
        Text("确认")
    }
}


效果如图所示:

image-20220527133651313

也许您想添加图标在文字的旁边,也只需:

​
​
package com.example.composestudy
​
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
​
import androidx.compose.foundation.layout.*
​
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.runtime.*
import androidx.compose.ui.tooling.preview.Preview
​
​
import androidx.compose.ui.Modifier
​
import com.example.composestudy.ui.theme.ComposestudyTheme
​
​
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposestudyTheme {
                ButtonDemo()
            }
        }
    }
}
​
​
​
@Composable
fun ButtonDemo() {
    Button(onClick = { /*TODO*/ }) {
        Icon(
            // Material 库中的图标,有 Filled, Outlined, Rounded, Sharp, Two Tone 等
            Icons.Filled.Favorite,
            contentDescription = null,
            modifier = Modifier.size(ButtonDefaults.IconSize)
        )
        // 添加间隔
        Spacer(Modifier.size(ButtonDefaults.IconSpacing))
        Text("喜欢")
    }
}
​
@Preview(name = "Light Mode")
​
@Composable
fun PreviewMessageCard() {
    ComposestudyTheme {
        ButtonDemo()
    }
}

image-20220527133600904

2.2 不同点击状态下的按钮状态

创建 Data class 来记录不同状态下按钮的样式

data class ButtonState(var text: String, var textColor: Color, var buttonColor: Color)


使用 MutableInteractionSource() 获取状态,根据不同状态创建样式

// 获取按钮的状态
val interactionState = remember { MutableInteractionSource() }
​
// 使用 Kotlin 的解构方法
val (text, textColor, buttonColor) = when {
    interactionState.collectIsPressedAsState().value  -> ButtonState("Just Pressed", Color.Red, Color.Black)
    else -> ButtonState( "Just Button", Color.White, Color.Red)
}


Button 的实现

​
​
package com.example.composestudy
​
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.collectIsPressedAsState
​
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
​
import androidx.compose.material.*
​
import androidx.compose.runtime.*
import androidx.compose.ui.tooling.preview.Preview
​
​
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
​
import com.example.composestudy.ui.theme.ComposestudyTheme
​
​
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposestudyTheme {
                ButtonDemo()
            }
        }
    }
}
​
data class ButtonState(var text: String, var textColor: Color, var buttonColor: Color)
​
​
@Composable
fun ButtonDemo() {
    // 获取按钮的状态
    val interactionState = remember { MutableInteractionSource() }
​
// 使用 Kotlin 的解构方法
    val (text, textColor, buttonColor) = when {
        interactionState.collectIsPressedAsState().value  -> ButtonState("按钮1", Color.Red, Color.Black)
        else -> ButtonState( "按钮", Color.White, Color.Red)
    }
    Button(
        onClick = { /*TODO*/ },
        interactionSource = interactionState,
        elevation = null,
        shape = RoundedCornerShape(50),
        colors = ButtonDefaults.buttonColors(
            backgroundColor = buttonColor,
        ),
        modifier = Modifier.width(IntrinsicSize.Min).height(IntrinsicSize.Min)
    ) {
        Text(
            text = text, color = textColor
        )
    }
}
​
@Preview(name = "Light Mode")
​
@Composable
fun PreviewMessageCard() {
    ComposestudyTheme {
        ButtonDemo()
    }
}



更多

Button 参数详情

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200