文章目录
Compose 简单组件
Text
Compose中的“TextView”。
在 Compose 中,Text 是遵循 Material Design 规范设计的上层文本组件,如果想脱离 Material Design 使用,也可以直接使用更底层的文本组件 BasicText。
Text属性
@Composable
fun Text(
text: String, // 文本
modifier: Modifier = Modifier, // 修饰符
color: Color = Color.Unspecified, // 文字颜色
fontSize: TextUnit = TextUnit.Unspecified, // 文字大小
fontStyle: FontStyle? = null, // 文字样式,如斜体
fontWeight: FontWeight? = null, // 文字粗细
fontFamily: FontFamily? = null, // 字体
letterSpacing: TextUnit = TextUnit.Unspecified, // 字间距
textDecoration: TextDecoration? = null, // 文字的装饰,如下划线
textAlign: TextAlign? = null, // 文字的对齐方式
lineHeight: TextUnit = TextUnit.Unspecified, // 行高
overflow: TextOverflow = TextOverflow.Clip, // 文字溢出处理
softWrap: Boolean = true, // 是否在换行处中断
maxLines: Int = Int.MAX_VALUE, // 最大行数
onTextLayout: (TextLayoutResult) -> Unit = {}, // 文字变化回调
style: TextStyle = LocalTextStyle.current // 样式配置,包含颜色、字体、行高等
)
使用
Text(
"hello compose", // 指定字符串
color = Color.Red,
fontSize = 16.sp,
fontStyle = FontStyle.Italic,
fontWeight = FontWeight.Bold
)
Text(
stringResource(id = R.string.app_text), // 指定字符串资源
color = Color.Blue,
fontFamily = FontFamily.Cursive
)
Text("下划线", textDecoration = TextDecoration.Underline)
Text("贯穿线", textDecoration = TextDecoration.LineThrough)
Text(
"猫和老鼠",
textAlign = TextAlign.Center,
modifier = Modifier
.width(250.dp) // 宽
.border(width = 1.dp, color = Color.Gray) // 边框
)
Text(
"床前明月光,疑似地上霜,举头望明月,低头思故乡",
lineHeight = 35.sp, // 行高
modifier = Modifier
.width(250.dp)
.drawBehind {
drawRoundRect(
color = Color.Red, style = Stroke(
width = 1.dp.toPx(),
pathEffect = PathEffect.dashPathEffect(floatArrayOf(10f, 10f), 0f)
)
)
},
)
Text(
"床前明月光,疑似地上霜,举头望明月,低头思故乡",
modifier = Modifier.width(250.dp),
maxLines = 1, // 最大行数
overflow = TextOverflow.Ellipsis // 溢出处理
)
AnnotatedString
AnnotatedString 支持在同一组Text中设置不同的样式。
SpanStyle
SpanStyle 应用于字符。
Text(buildAnnotatedString {
withStyle(style = SpanStyle(color = Color.Blue, fontWeight = FontWeight.Bold)) {
append("H")
}
append("ello")
withStyle(style = SpanStyle(color = Color.Red, fontWeight = FontWeight.Bold)) {
append("W")
}
append("orld")
})
ParagraphStyle
ParagraphStyle 应用于整个段落,属于容器。
Text(buildAnnotatedString {
withStyle(style = ParagraphStyle(lineHeight = 30.sp)) {
withStyle(style = SpanStyle(color = Color.Blue)) {
append("Hello")
append("\n")
}
withStyle(style = SpanStyle(color = Color.Red)) {
append("World")
append("\n")
}
append("Text")
}
})
SelectionContainer 和 DisableSelection
- SelectionContainer 用于文字选择。
- DisableSelection 用于禁止文字选择。
SelectionContainer(modifier = Modifier.fillMaxSize()) {
Column {
Text("床前明月光")
Text("疑是地下霜")
DisableSelection {
Text("hello")
Text("world")
}
Text("举头望明月")
Text("低头思故乡")
}
}
ClickableText
- ClickableText 用于可点击文本。
ClickableText(text = AnnotatedString("hello world"),
onClick = { offset ->
Log.e("TAG", "offset: ${offset}")
}
)
在Text中添加额外信息:
val annotatedString = buildAnnotatedString {
append("点击")
pushStringAnnotation(tag = "URL", annotation = "https://www.baidu.com/")
withStyle(style = SpanStyle(color = Color.Red, fontWeight = FontWeight.Bold)) {
append("Url")
}
pop()
}
ClickableText(text = annotatedString, style = TextStyle(fontSize = 30.sp), onClick = { offset ->
annotatedString.getStringAnnotations(tag = "URL", start = offset, end = offset)
.firstOrNull()?.let { annotation -> Log.e("TAG", annotation.item) }
})
TextField
Compose中的"EditText"。
TextField 组件是我们最常使用的文本输入框,它也遵循着 Material Design 设计准则。它也有一个低级别的底层组件,叫作BasicTextField。
TextField 有两种风格,一种为默认的 filled,另一种 OutlinedTextField。
TextField属性
@Composable
fun TextField(
value: String, // 文本内容
onValueChange: (String) -> Unit, // 文本内容变化回调
modifier: Modifier = Modifier, // 修饰符
enabled: Boolean = true, // 是否可点击
readOnly: Boolean = false, // 是否只读
textStyle: TextStyle = LocalTextStyle.current, // 文字样式
label: @Composable (() -> Unit)? = null, // 定义label组件
placeholder: @Composable (() -> Unit)? = null, // 定义placeholder组件
leadingIcon: @Composable (() -> Unit)? = null, // 定义前置图标
trailingIcon: @Composable (() -> Unit)? = null, // 定义后置图标
isError: Boolean = false, // 是否提示错误
visualTransformation: VisualTransformation = VisualTransformation.None, // 输入框的视觉,如PasswordVisualTransformation密码效果
keyboardOptions: KeyboardOptions = KeyboardOptions.Default, // 软键盘选项,类似于inputType
keyboardActions: KeyboardActions = KeyboardActions(), // IME动作
singleLine: Boolean = false, // 是否单行
maxLines: Int = Int.MAX_VALUE, // 支持最大行数
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, // 监听组件状态
shape: Shape =
MaterialTheme.shapes.small.copy(bottomEnd = ZeroCornerSize, bottomStart = ZeroCornerSize), // 输入框形状
colors: TextFieldColors = TextFieldDefaults.textFieldColors() // 不同状态下颜色组
)
使用
var name by remember { mutableStateOf("") }
var password by remember { mutableStateOf("") }
TextField(value = name, onValueChange = { name = it }, label = { Text("用户名") })
TextField(
value = password,
onValueChange = { password = it },
label = { Text("密码") },
visualTransformation = PasswordVisualTransformation()
)
其他属性使用:
var name by remember { mutableStateOf("") }
var password by remember { mutableStateOf("") }
TextField(
value = name,
onValueChange = { name = it },
label = { Text("用户名") },
leadingIcon = { Icon(Icons.Filled.AccountBox, null) }
)
TextField(
value = password,
onValueChange = { password = it },
label = { Text("密码") },
trailingIcon = {
IconButton(onClick = { }) {
Icon(Icons.Filled.Face, null)
}
},
visualTransformation = PasswordVisualTransformation()
)
OutlinedTextField
OutlinedTextField(
value = name,
onValueChange = { name = it },
label = { Text("用户名") },
leadingIcon = { Icon(Icons.Filled.AccountBox, null) }
)
OutlinedTextField(
value = password,
onValueChange = { password = it },
label = { Text("密码") },
trailingIcon = {
IconButton(onClick = { }) {
Icon(Icons.Filled.Face, null)
}
},
visualTransformation = PasswordVisualTransformation()
)
BasicTextField
BasicTextField属性
fun BasicTextField(
value: String,
onValueChange: (String) -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
readOnly: Boolean = false,
textStyle: TextStyle = TextStyle.Default,
keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
keyboardActions: KeyboardActions = KeyboardActions.Default,
singleLine: Boolean = false,
maxLines: Int = Int.MAX_VALUE,
visualTransformation: VisualTransformation = VisualTransformation.None,
onTextLayout: (TextLayoutResult) -> Unit = {},
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
cursorBrush: Brush = SolidColor(Color.Black), // 光标颜色
decorationBox: @Composable (innerTextField: @Composable () -> Unit) -> Unit =
@Composable { innerTextField -> innerTextField() } // 装饰
)
简单使用BasicTextField
val text = remember { mutableStateOf("hello") }
BasicTextField(
value = text.value,
onValueChange = { text.value = it },
decorationBox = { innerTextField ->
Column {
innerTextField()
Divider(
thickness = 2.dp,
modifier = Modifier
.fillMaxWidth()
.background(Color.Blue)
)
}
}
)
自定义样式
var searchText by remember { mutableStateOf("") }
Box(
modifier = Modifier
.fillMaxWidth()
.height(40.dp)
.background(Color(0xFFFF0000)),
contentAlignment = Alignment.Center
) {
BasicTextField(
value = searchText,
onValueChange = { searchText = it },
modifier = Modifier
.padding(horizontal = 10.dp)
.background(Color.White, CircleShape)
.height(30.dp)
.fillMaxWidth(),
decorationBox = { innerTextField ->
Row(
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier.padding(horizontal = 8.dp)
) {
Icon(imageVector = Icons.Filled.Search, contentDescription = null)
Box(
modifier = Modifier
.weight(1F)
.padding(horizontal = 5.dp),
contentAlignment = Alignment.CenterStart,
) {
if (searchText.isEmpty()) {
Text("请输入点东西看看", style = TextStyle(color = Color(0, 0, 0, 128)))
}
innerTextField()
}
if (searchText.isNotEmpty()) {
IconButton(
onClick = { searchText = "" },
modifier = Modifier.size(16.dp)
) {
Icon(imageVector = Icons.Filled.Close, contentDescription = null)
}
}
}
}
)
}
KeyboardOptions 键盘属性
class KeyboardOptions constructor(
// 大写选项:
// None 无大写,Characters 全部大写,Words 单词首字母大写,Sentences 句子首字母大写
val capitalization: KeyboardCapitalization = KeyboardCapitalization.None,
// 是否开启自动更正
val autoCorrect: Boolean = true,
// 键盘类型:
// Text 普通类型,Ascii ASCII字符类型,Number 数字类型,Phone 电话号码
// Uri URI类型,Email 邮件地址类型,Password 密码类型,NumberPassword 数字密码类型
val keyboardType: KeyboardType = KeyboardType.Text,
// IME动作
// Default 默认行为,None 不执行任何操作,默认为换行,Go 开始动作,Search 搜索动作
// Send 发送动作,Previous 上一个,Next 下一步,Done 完成
val imeAction: ImeAction = ImeAction.Default
)
val text = remember { mutableStateOf("hello") }
TextField(
value = text.value,
onValueChange = { text.value = it },
label = { Text("请输入") },
maxLines = 2,
textStyle = TextStyle(color = Color.Blue),
modifier = Modifier.padding(20.dp),
keyboardOptions = KeyboardOptions(
capitalization = KeyboardCapitalization.Characters,
keyboardType = KeyboardType.Email,
autoCorrect = true,
imeAction = ImeAction.Done
)
)
KeyboardActions IME动作
val context = LocalContext.current
val text = remember { mutableStateOf("hello") }
TextField(
value = text.value,
onValueChange = { text.value = it },
label = { Text("请输入") },
maxLines = 2,
textStyle = TextStyle(color = Color.Blue),
modifier = Modifier.padding(20.dp),
keyboardOptions = KeyboardOptions(
capitalization = KeyboardCapitalization.Characters,
keyboardType = KeyboardType.Email,
autoCorrect = true,
imeAction = ImeAction.Search
),
keyboardActions = KeyboardActions(onSearch = {
Toast.makeText(context, "${text.value} world", Toast.LENGTH_SHORT).show()
})
)
Icon
Icon属性
fun Icon(
imageVector: ImageVector, // 矢量图对象
contentDescription: String?,
modifier: Modifier = Modifier,
tint: Color = LocalContentColor.current.copy(alpha = LocalContentAlpha.current)
)
fun Icon(
bitmap: ImageBitmap, // 位图对象
contentDescription: String?,
modifier: Modifier = Modifier,
tint: Color = LocalContentColor.current.copy(alpha = LocalContentAlpha.current)
)
fun Icon(
painter: Painter, // 画笔,可以在Canvas上绘制
contentDescription: String?,
modifier: Modifier = Modifier,
tint: Color = LocalContentColor.current.copy(alpha = LocalContentAlpha.current)
)
使用
Icon(
imageVector = ImageVector.vectorResource(id = R.drawable.ic_search),
contentDescription = "矢量图资源"
)
Spacer(modifier = Modifier.height(10.dp))
Icon(
bitmap = ImageBitmap.imageResource(id = R.drawable.img),
contentDescription = "图片资源",
modifier = Modifier.size(100.dp, 100.dp)
)
Spacer(modifier = Modifier.height(10.dp))
Icon(
painter = painterResource(id = R.drawable.ic_search),
contentDescription = "任意类型图资源"
)
Icon五种类型
Icon(
imageVector = Icons.Filled.ShoppingCart,
contentDescription = "Filled"
)
Spacer(modifier = Modifier.height(10.dp))
Icon(
imageVector = Icons.Outlined.ShoppingCart,
contentDescription = "Outlined"
)
Spacer(modifier = Modifier.height(10.dp))
Icon(
imageVector = Icons.Rounded.ShoppingCart,
contentDescription = "Rounded"
)
Spacer(modifier = Modifier.height(10.dp))
Icon(
imageVector = Icons.Sharp.ShoppingCart,
contentDescription = "Sharp"
)
Spacer(modifier = Modifier.height(10.dp))
Icon(
imageVector = Icons.TwoTone.ShoppingCart,
contentDescription = "TwoTone"
)
Image
Compose中的”ImageView“。
和 Icon 一样支持三中图片类型。
Image属性
@Composable
fun Image(
painter: Painter,
contentDescription: String?, // 文字描述
modifier: Modifier = Modifier, // 修饰符
alignment: Alignment = Alignment.Center, // 对齐方式
contentScale: ContentScale = ContentScale.Fit, // 图片缩放模式
alpha: Float = DefaultAlpha, // 透明度
colorFilter: ColorFilter? = null // 修改图片
)
@Composable
fun Image(
bitmap: ImageBitmap, // 位图对象
contentDescription: String?,
modifier: Modifier = Modifier,
alignment: Alignment = Alignment.Center,
contentScale: ContentScale = ContentScale.Fit,
alpha: Float = DefaultAlpha,
colorFilter: ColorFilter? = null,
filterQuality: FilterQuality = DefaultFilterQuality
)
@Composable
fun Image(
imageVector: ImageVector, // 矢量图对象
contentDescription: String?,
modifier: Modifier = Modifier,
alignment: Alignment = Alignment.Center,
contentScale: ContentScale = ContentScale.Fit,
alpha: Float = DefaultAlpha,
colorFilter: ColorFilter? = null
)
使用
val context = LocalContext.current
val path = "${context.cacheDir}${File.separator}bg_banner.png"
val bitmap = BitmapFactory.decodeFile(path)
Image(bitmap = bitmap.asImageBitmap(), contentDescription = "位图")
Divider(modifier = Modifier.padding(vertical = 10.dp))
Image(painter = painterResource(id = R.drawable.img), contentDescription = "图片")
Divider(modifier = Modifier.padding(vertical = 10.dp))
Image(
imageVector = ImageVector.vectorResource(id = R.drawable.ic_search),
contentDescription = "矢量图"
)
ContentScale 缩放比
@Stable
interface ContentScale {
// 计算缩放因子
fun computeScaleFactor(srcSize: Size, dstSize: Size): ScaleFactor
companion object {
// 保持图片宽高比,使图片大于或等于目标尺寸
@Stable
val Crop
// 保持图片宽高比,使图片大于或等于目标尺寸
@Stable
val Fit
// 缩放图片并保持宽高比,使图片高度匹配目标尺寸
@Stable
val FillHeight
// 缩放图片并保持宽高比,使图片宽度匹配目标尺寸
@Stable
val FillWidth
// 如果图片大于目标,则缩放
@Stable
val Inside
// 不处理
@Stable
val None = FixedScale(1.0f)
// 横向和纵向缩放填充目标尺寸
@Stable
val FillBounds
}
}
Image(
painter = painterResource(id = R.drawable.a),
contentDescription = null,
contentScale = ContentScale.Crop,
modifier = Modifier.fillMaxSize(0.5F)
)
alpha 图片透明度
Image(
painter = painterResource(id = R.drawable.a),
contentDescription = null,
alpha = 0.5F
)
colorFilter 图片着色
@Immutable
class ColorFilter internal constructor(internal val nativeColorFilter: NativeColorFilter) {
companion object {
// 使用颜色滤镜
// 参数一:颜色值,参数二:混合模式
@Stable
fun tint(color: Color, blendMode: BlendMode = BlendMode.SrcIn): ColorFilter =
actualTintColorFilter(color, blendMode)
// 使用颜色矩阵,用于修改饱和度
@Stable
fun colorMatrix(colorMatrix: ColorMatrix): ColorFilter =
actualColorMatrixColorFilter(colorMatrix)
// 模拟灯光效果
@Stable
fun lighting(multiply: Color, add: Color): ColorFilter =
actualLightingColorFilter(multiply, add)
}
}
加载网络图片
添加依赖库:
coil是一个图片加载库,完全使用Kotlin编写,使用了Kotlin的协程,图片网络请求方式默认为OkHttp。其特点如下:足够快速,它在内存、图片存储、图片采样、Bitmap重用、暂停/取消下载等细节方面都做了大幅优化。
implementation "com.google.accompanist:accompanist-coil:0.15.0"
使用:
val painter = rememberImagePainter(
data = "https://www.baidu.com/img/flexible/logo/pc/result@2.png",
imageLoader = LocalImageLoader.current
)
Image(
painter = painter,
contentDescription = null,
modifier = Modifier.border(
1.dp,
Color.Red,
shape = RectangleShape
)
)
Button
Compose中的”Button“。
Button属性
@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(onClick = { }, shape = RoundedCornerShape(10.dp)) {
Text("按钮")
}
Spacer(Modifier.height(10.dp))
Button(onClick = { }, shape = RoundedCornerShape(10.dp)) {
Icon(
imageVector = Icons.Filled.Done,
contentDescription = null,
modifier = Modifier.size(ButtonDefaults.IconSize)
)
Spacer(Modifier.size(ButtonDefaults.IconSpacing))
Text("确定")
}
colors属性
colors就是用来设置按钮在不同状态下的颜色的。
Button(
onClick = { },
shape = RoundedCornerShape(10.dp),
colors = ButtonDefaults.buttonColors(
backgroundColor = Color.Red, // 背景颜色
contentColor = Color.Green, // 内容颜色
disabledBackgroundColor = Color.Blue, // 未启用时的背景颜色
disabledContentColor = Color.Gray // 未启用时的内容颜色
)
) {
Text("按钮")
}
contentPadding属性
contentPadding用于设置内容与容器间的距离。
Button(
onClick = { },
contentPadding = PaddingValues(20.dp, 10.dp)
) {
Text("按钮")
}
interactionSource属性
监听组件状态的事件源,通过它我们可以根据组件状态设置不同的样式,比如按钮按下时什么效果,正常时什么效果,类似传统视图中的Selector。
- interactionSource.collectIsPressedAsState()判断是否按下状态。
- interactionSource.collectIsFocusedAsState()判断是否获取焦点的状态。
- interactionSource.collectIsDraggedAsState()判断是否拖动。
如下例子,默认情况边框是绿色,当处于按下状态时边框变红色。
val interactionSource = remember { MutableInteractionSource() }
val pressState = interactionSource.collectIsPressedAsState() // 是否按下
val borderColor = if (pressState.value) Color.Red else Color.Green
Button(
onClick = { },
border = BorderStroke(2.dp, borderColor),
interactionSource = interactionSource
) {
Text("按钮")
}
IconButton 图标按钮
IconButton组件实际上只是Button组件的简单封装(一个可点击的图标),它一般用于应用栏中的导航或者其他行为。
IconButton(onClick = {}) {
Icon(Icons.Filled.Favorite, contentDescription = null)
}
FloatingActionButton 悬浮按钮
FloatingActionButton悬浮按钮(FAB)一般代表当前页面的主要行为。
FloatingActionButton(onClick = { }) {
Icon(Icons.Filled.ArrowBack, contentDescription = null)
}
ExtendedFloatingActionButton 文字扩展悬浮按钮
Compose也提供了带有文字扩展的FAB。
ExtendedFloatingActionButton(
text = { Text("hello world compose button") },
icon = { Icon(Icons.Filled.Favorite, null) },
onClick = { }
)
选择器组件
Checkbox
Checkbox 复选框。
Checkbox属性
@Composable
fun Checkbox(
checked: Boolean, // 是否被选中
onCheckedChange: ((Boolean) -> Unit)?, // 状态变化回调
modifier: Modifier = Modifier, // 修饰符
enabled: Boolean = true, // 是否启用
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
colors: CheckboxColors = CheckboxDefaults.colors() // 颜色组
)
使用
var checkedState by remember { mutableStateOf(false) }
Checkbox(
checked = checkedState,
onCheckedChange = { checkedState = it },
colors = CheckboxDefaults.colors(checkedColor = Color.Red)
)
val hobbyOptions = remember { mutableStateListOf(false, false, false) }
Row(verticalAlignment = Alignment.CenterVertically) {
Text("爱好: ")
Text("足球")
Checkbox(
checked = hobbyOptions[0],
onCheckedChange = { hobbyOptions[0] = it }
)
Text("篮球")
Checkbox(
checked = hobbyOptions[1],
onCheckedChange = { hobbyOptions[1] = it }
)
Text("乒乓球")
Checkbox(
checked = hobbyOptions[2],
onCheckedChange = { hobbyOptions[2] = it }
)
}
RadioButton
RadioButton 单选按钮。
var sexOption by remember { mutableStateOf(0) }
Row(verticalAlignment = Alignment.CenterVertically) {
Text("性别: ")
Text("男")
RadioButton(selected = sexOption == 0, onClick = { sexOption = 0 })
Text("女")
RadioButton(selected = sexOption == 1, onClick = { sexOption = 1 })
}
TriStateCheckbox
TriStateCheckbox 三态选择框。
// 子Checkbox状态
val (state, onStateChange) = remember { mutableStateOf(true) }
// 子Checkbox状态
val (state2, onStateChange2) = remember { mutableStateOf(true) }
// 父TriStateCheckbox状态
val parentState = remember(state, state2) {
if (state && state2) ToggleableState.On// 开
else if (!state && !state2) ToggleableState.Off // 关
else ToggleableState.Indeterminate // 不确定
}
val onParentClick = {
val s = parentState != ToggleableState.On
onStateChange(s)
onStateChange2(s)
}
TriStateCheckbox(
state = parentState,
onClick = onParentClick,
colors = CheckboxDefaults.colors(checkedColor = Color.Red)
)
Column(modifier = Modifier.padding(horizontal = 10.dp)) {
Checkbox(checked = state, onCheckedChange = onStateChange)
Checkbox(checked = state2, onCheckedChange = onStateChange2)
}
Switch
Switch 单选开关。
var checkedState by remember { mutableStateOf(true) }
Switch(
checked = checkedState,
onCheckedChange = { checkedState = it }
)
Slider
Slider 滑竿组件。
类似于Seekbar,适合做音量、亮度等。
var sliderPosition by remember { mutableStateOf(0F) }
val format = "%.1f"
Text("${String.format(format, sliderPosition * 100)}%")
Slider(value = sliderPosition, onValueChange = { sliderPosition = it })
CircularProgressIndicator & LinearProgressIndicator
Compose中的”ProgressBar“。
圆形进度条
简单使用:
CircularProgressIndicator()
使用属性:
CircularProgressIndicator(
modifier = Modifier.size(100.dp),
color = Color.Red,
strokeWidth = 10.dp
)
设置进度:
CircularProgressIndicator(
progress = 0.5F,
modifier = Modifier.size(100.dp),
color = Color.Red,
strokeWidth = 10.dp
)
条形进度条
简单使用:
LinearProgressIndicator()
设置进度:
LinearProgressIndicator(
progress = 0.5F,
color = Color.Red,
backgroundColor = Color.Blue
)
弹窗组件
Compose的对话框不像传统视图的对话框那样通过show()、dismiss()等命令式的方式显隐,它像不同的Composable组件一样,显示与否要看是否在重组中被执行,所以它的显示与否要依赖状态控制。Dialog和普通Composable组件的不同在于其底层需要依赖独立的Window进行显示。
Dialog属性
@Composable
fun Dialog(
onDismissRequest: () -> Unit, // 隐藏时回调
properties: DialogProperties = DialogProperties(), // 属性设置
content: @Composable () -> Unit // 内容
)
AlertDialog
AlertDialog组件是Dialog组件的更高级别的封装,同时遵守着Material Design设计标准。
val showAlertDialog = remember { mutableStateOf(false) }
@Composable
fun MyAlertDialog(showAlertDialog: MutableState<Boolean>) {
if (showAlertDialog.value) {
AlertDialog(
onDismissRequest = { showAlertDialog.value = false },
title = { Text("标题") },
text = { Text("这是一些内容") },
confirmButton = {
TextButton(onClick = { showAlertDialog.value = false }) {
Text("同意")
}
},
dismissButton = {
TextButton(onClick = { showAlertDialog.value = false }) {
Text("取消")
}
}
)
}
}
Dialog
val showDialog = remember { mutableStateOf(false) }
@Composable
fun MyDialog(showDialog: MutableState<Boolean>) {
if (showDialog.value) {
Dialog(
onDismissRequest = { showDialog.value = false },
properties = DialogProperties(
dismissOnBackPress = true,
dismissOnClickOutside = true
)
) {
Surface(
modifier = Modifier
.wrapContentHeight()
.fillMaxWidth(),
color = Color.White,
shape = RoundedCornerShape(10.dp)
) {
Column(
modifier = Modifier.fillMaxWidth(),
horizontalAlignment = Alignment.CenterHorizontally
) {
Text("标题", fontSize = 24.sp, modifier = Modifier.padding(vertical = 10.dp))
Text("这是一些内容", fontSize = 16.sp)
TextButton(onClick = { showDialog.value = false }) {
Text("确定", color = Color.Red)
}
}
}
}
}
}