Text
compose 中的 Text
作用等同于 TextView
,可以用来显示文本。开发中的常用示例如下:
- 文字居中
Text(text = "hello world", modifier = Modifier
.clickable { } // 设置点击事件
.size(500.dp, 100.dp)
.background(Color.White)
.wrapContentSize(Alignment.Center)) // 顺序不能乱
在 Text
中没有 gravity
属性,需要使用 wrapContentSize(Alignment.Center)
方法来设置文字居中。
需要注意的是:compose 中调用方法的顺序不能乱
- 省略号
Text(text = "hello world hello world hello world hello world hello world", modifier = Modifier
.size(500.dp, 100.dp)
.background(Color.White)
.wrapContentSize(Alignment.Center),
maxLines = 1,
overflow = TextOverflow.Ellipsis)
在 Text
中可以使用 TextOverflow.Ellipsis
来实现向后省略的效果。但是目前没有 TextView
的向前省略或者中间省略的属性设置。
- 字间距和行间距
Text(text = "hello world \nhello world", modifier = Modifier
.size(500.dp, 100.dp)
.background(Color.White)
.wrapContentSize(Alignment.Center),
letterSpacing = 5.sp, //设置文字之间的间距
lineHeight = 1.5.em) // 设置行间距,em 是指相对字体大小
Text
的所有属性介绍如下:
fun Text(
text: String, // 这是要显示的文本内容,以字符串形式传入
modifier: Modifier = Modifier, // 一个Modifier对象,用于控制文本的外观和布局,例如设置大小、边距、点击事件等
color: Color = Color.Unspecified, // 文本的颜色
fontSize: TextUnit = TextUnit.Unspecified, // 用于设置绘制文本时使用的字号大小。可以传入特定的尺寸值,如 16.sp 等
fontStyle: FontStyle? = null, // 文本的字体样式变体,如斜体等
fontWeight: FontWeight? = null, // 文本的字体粗细,例如FontWeight.Bold表示粗体
fontFamily: FontFamily? = null, // 文本的字体系列,用于指定特定的字体
letterSpacing: TextUnit = TextUnit.Unspecified, // 文字之间的间距大小
textDecoration: TextDecoration? = null, // 文本的装饰,如下划线等
textAlign: TextAlign? = null, // 文本的对齐方式,如左对齐、居中、右对齐等,注意不等同于 gravity
lineHeight: TextUnit = TextUnit.Unspecified, // 文本段落的行高
overflow: TextOverflow = TextOverflow.Clip, // 用于控制当文本超出显示范围时的处理方式,默认为TextOverflow.Clip(裁剪)
softWrap: Boolean = true, // 决定文本是否在软换行处换行
maxLines: Int = Int.MAX_VALUE, // 最大行数
minLines: Int = 1, // 最少行数
onTextLayout: (TextLayoutResult) -> Unit = {}, // 当计算新的文本布局时执行的回调函数
style: TextStyle = LocalTextStyle.current // 文本样式
)
更多关于文字的介绍,可以看官方文档Compose 中的文字
Button
compose 中的 Button
作用等同于原生的 Button
,可以表示按钮。开发中的常用示例如下:
- 设置形状
Button(onClick = { 点击事件 },
shape = RoundedCornerShape(10.dp), // 设置形状为圆角矩形
modifier = Modifier.size(200.dp, 100.dp)) {
Text(text = "按钮") // 设置按钮中显示的内容
}
在Button
中,我们通过 shape
来设置按钮的形状。官方提供了四种shape,分别是:
- RoundedCornerShape 圆角形状·
- CutCornerShape 切角形状
- AbsoluteRoundedCornerShape 绝对圆角形状
- AbsoluteCutCornerShape 绝对切角形状
Button
中的全部属性介绍如下:
@Composable
fun Button(
onClick: () -> Unit, // 点击回调
modifier: Modifier = Modifier, // 用于控制按钮的外观和布局,例如设置大小、边距、点击效果等
enabled: Boolean = true, // 是否可用
shape: Shape = ButtonDefaults.shape, // 控制按钮的形状
colors: ButtonColors = ButtonDefaults.buttonColors(), //控制按钮在不同状态下的颜色
elevation: ButtonElevation? = ButtonDefaults.buttonElevation(), // 控制按钮在不同状态下的阴影效果
border: BorderStroke? = null, // 控制按钮的边框效果
contentPadding: PaddingValues = ButtonDefaults.ContentPadding, // 控制按钮内部文本与其他内容的间距
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, // 按钮的交互流,用来自定义事件
content: @Composable RowScope.() -> Unit // 设置按钮中显示的 compose UI
)
Image
compose 中的 Image
作用等同于原生的 ImageView
,表示图片控件。Image
的常用示例如下:
Image(painter = painterResource(id = R.drawable.test), // 设置图片资源
contentDescription = "",
alignment = Alignment.Center,
contentScale = ContentScale.Crop,
modifier = Modifier.size(200.dp).background(Color.White))
}
painterResource
是 compose 中用来获取除了 Drawable 类型资源的方法。类似的方法还有 stringResource
、colorResource
、integerResource
等。需要注意的是 Image
如果要实现类似于 ImageView
的 scaleType
的效果需要 alignment
和 contentScale
属性配合。
Image
所有的属性介绍如下:
fun Image(
bitmap: ImageBitmap, // 要显示的图像
contentDescription: String?, // 图片内容描述
modifier: Modifier = Modifier, // 控制图片的大小、间距等
alignment: Alignment = Alignment.Center, // 图片对齐方式
contentScale: ContentScale = ContentScale.Fit, // 当图片与Image控件大小不同时的缩放策略
alpha: Float = DefaultAlpha, // 图片的透明度
colorFilter: ColorFilter? = null, // 颜色滤镜
filterQuality: FilterQuality = DefaultFilterQuality // 图片缩放和显示时的采样算法
)
TextField
compose 中的 TextField
作用等同于原生的 EditText
,用来处理键盘输入。TextField
的所有属性介绍如下:
fun TextField(
value: String, // 当前显示在输入框的文本内容
onValueChange: (String) -> Unit, // 输入框文本更新回调
modifier: Modifier = Modifier, // 用于控制输入框的外观和布局,例如设置大小、边距、点击效果等
enabled: Boolean = true, // 是否可用
readOnly: Boolean = false, // 控制文本字段的可编辑状态。当为true时,文本字段不可被修改,但用户可以聚焦它并复制其中的文本。
textStyle: TextStyle = LocalTextStyle.current, // 文本样式
label: @Composable (() -> Unit)? = null, // 标签
placeholder: @Composable (() -> Unit)? = null, // 占位符,当文本字段获得焦点且输入文本为空时显示
leadingIcon: @Composable (() -> Unit)? = null, // 前置图标,显示在文本字段容器的开头
trailingIcon: @Composable (() -> Unit)? = null, // 后置图标,显示在文本字段容器的末尾
prefix: @Composable (() -> Unit)? = null, // 显示在输入文本的前面
suffix: @Composable (() -> Unit)? = null, // 显示在输入文本的后面
supportingText: @Composable (() -> Unit)? = null, // 显示在文本字段的下方
isError: Boolean = false, // 指示文本字段的当前值是否处于错误状态。如果设置为true,默认情况下标签、底部指示器和后置图标将以错误颜色显示
visualTransformation: VisualTransformation = VisualTransformation.None, // 用于转换输入文本的视觉表示。例如,可以使用PasswordVisualTransformation来创建密码文本字段。默认情况下,不进行视觉转换。
keyboardOptions: KeyboardOptions = KeyboardOptions.Default, // 软件键盘选项,包含配置如键盘类型和输入法动作等
keyboardActions: KeyboardActions = KeyboardActions.Default,// 当输入服务发出输入法动作时,相应的回调函数将被调用。注意,这个输入法动作可能与在`KeyboardOptions.imeAction`中指定的不同。
singleLine: Boolean = false, // 是否单行
maxLines: Int = if (singleLine) 1 else Int.MAX_VALUE, // 最大行数
minLines: Int = 1, // 最小行数
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, // 文本字段的交互流
shape: Shape = TextFieldDefaults.shape, // 文本字段容器的形状
colors: TextFieldColors = TextFieldDefaults.colors() // 定义文本在不同状态下的颜色
)
Checkbox
Checkbox
是 compose 中的复选框。代码示例如下:
// 定义一个状态变量来跟踪复选框的选中状态
var checkedState by remember {
mutableStateOf(false)
}
Checkbox(
checked = checkedState,
onCheckedChange = { isChecked ->
checkedState = isChecked
}
)
Checkbox
的所有属性介绍如下:
fun Checkbox(
checked: Boolean, // 是否被选中
onCheckedChange: ((Boolean) -> Unit)?, // 当复选框被点击时的回调
modifier: Modifier = Modifier, // 用于控制CheckBox的外观和布局,例如设置大小、边距、点击效果等
enabled: Boolean = true, // 是否可用
colors: CheckboxColors = CheckboxDefaults.colors(), // 设置复选框在不同状态下的颜色
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() } // 代表这个复选框的交互流
)
RadioButton
RadioButton
是单选按钮,全部属性介绍如下:
fun RadioButton(
selected: Boolean, // 表示单选按钮是否被选中
onClick: (() -> Unit)?, // 当单选按钮被点击时调用的回调函数
modifier: Modifier = Modifier, // 用于控制RadioButton的外观和布局,例如设置大小、边距、点击效果等
enabled: Boolean = true, // 是否可用
colors: RadioButtonColors = RadioButtonDefaults.colors(), // 定义单选框按钮在不同状态下的颜色
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() } // 单选框按钮的交互流
)
Switch
Switch
是开关控件,全部属性介绍如下:
fun Switch(
checked: Boolean, // 是否处于打开状态
onCheckedChange: ((Boolean) -> Unit)?, // 当开关被点击时的回调
modifier: Modifier = Modifier, // 用于控制Switch的外观和布局,例如设置大小、边距、点击效果等
thumbContent: (@Composable () -> Unit)? = null, // 开关的内部内容
enabled: Boolean = true, // 是否可用
colors: SwitchColors = SwitchDefaults.colors(), // 设置开关在不同状态下的颜色
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, // 开关的交互流
)
LinearProgressIndicator 和 CircularProgressIndicator
在 compose 中,进度条有两个控件,分别是 LinearProgressIndicator
和 CircularProgressIndicator
。它们的全部属性介绍如下:
fun LinearProgressIndicator(
modifier: Modifier = Modifier, // 用于控制LinearProgressIndicator的外观和布局,例如设置大小、边距、点击效果等
color: Color = ProgressIndicatorDefaults.linearColor, // 进度条的颜色
trackColor: Color = ProgressIndicatorDefaults.linearTrackColor, //进度轨道的颜色
strokeCap: StrokeCap = ProgressIndicatorDefaults.LinearStrokeCap, // 进度条两端的样式
)
fun CircularProgressIndicator(
modifier: Modifier = Modifier, // 用于控制CircularProgressIndicator的外观和布局,例如设置大小、边距、点击效果等
color: Color = ProgressIndicatorDefaults.circularColor, // 进度条的颜色
strokeWidth: Dp = ProgressIndicatorDefaults.CircularStrokeWidth,// 进度条线条宽度
trackColor: Color = ProgressIndicatorDefaults.circularTrackColor,// 进度条轨道颜色
strokeCap: StrokeCap = ProgressIndicatorDefaults.CircularIndeterminateStrokeCap,// 进度条两端样式
)
Row 和 Column
Row
可以将子元素水平排列,等同于水平方向的 LinearLayout
。所有属性如下所示:
inline fun Row(
modifier: Modifier = Modifier, // 用于控制Row的外观和布局,例如设置大小、边距、点击效果等
horizontalArrangement: Arrangement.Horizontal = Arrangement.Start, // 用于定义子元素在水平方向上的排列方式。可以是Arrangement.Start(从左侧开始排列)、Arrangement.End(从右侧开始排列)、Arrangement.Center(居中排列)等。通过这个属性可以控制子元素在水平方向上的对齐和间距
verticalAlignment: Alignment.Vertical = Alignment.Top, // 用于定义子元素在垂直方向上的对齐方式。可以是Alignment.Top(顶部对齐)、Alignment.Bottom(底部对齐)、Alignment.CenterVertically(垂直居中对齐)等。通过这个属性可以控制子元素在垂直方向上的位置
content: @Composable RowScope.() -> Unit // 一个可组合函数,用于定义Row中的子元素。在这个函数中,可以放置其他可组合函数或布局组件,它们将被水平排列在Row中
)
Column
与 Row
相反,它会将子元素垂直排列。等同于垂直方向的 LinearLayout
。所有属性如下所示:
inline fun Column(
modifier: Modifier = Modifier, // 用于控制Column的外观和布局,例如设置大小、边距、点击效果等
verticalArrangement: Arrangement.Vertical = Arrangement.Top,// 用于定义子元素在垂直方向上的排列方式。可以是Arrangement.Top(从顶部开始排列)、Arrangement.Bottom(从底部开始排列)、Arrangement.CenterVertically(垂直居中排列)等。通过这个属性可以控制子元素在垂直方向上的对齐和间距。
horizontalAlignment: Alignment.Horizontal = Alignment.Start, // 用于定义子元素在水平方向上的对齐方式。可以是Alignment.Start(左侧对齐)、Alignment.End(右侧对齐)、Alignment.CenterHorizontally(水平居中对齐)等。通过这个属性可以控制子元素在水平方向上的位置。
content: @Composable ColumnScope.() -> Unit // 一个可组合函数,用于定义Column中的子元素。在这个函数中,可以放置其他可组合函数或布局组件,它们将被垂直排列在Column中
)
Box
Box
组件类似于 FrameLayout
,它可以将多个子元素堆叠在一起。所有属性如下所示:
inline fun Box(
modifier: Modifier = Modifier, // 用于控制Box的外观和布局,例如设置大小、边距、点击效果等
contentAlignment: Alignment = Alignment.TopStart,// 用于定义Box内子元素的默认对齐方式。可以是Alignment.TopStart(顶部左对齐)、Alignment.Center(居中对齐)等不同的对齐方式。当子元素小于Box的大小时,子元素将根据这个对齐方式进行定位。对于单独指定子元素的对齐方式,可以使用BoxScope.align修饰符。
propagateMinConstraints: Boolean = false, // 一个布尔值,表示是否将传入的最小约束传播给内容。默认情况下为false。如果设置为true,则Box的最小尺寸约束也将应用于内容。例如,当Box有不能直接应用修饰符的内容,并且需要设置内容的最小尺寸时,将这个属性设置为true可能会很有用。否则,最小尺寸仅应用于Box本身。
content: @Composable BoxScope.() -> Unit // 一个可组合函数,用于定义Box中的内容。在这个函数中,可以放置其他可组合函数或布局组件,它们将被堆叠在Box中,按照组合的顺序排列。
)
LazyColumn 和 LazyRow
在 Jetpack Compose 中,LazyColumn
和 LazyRow
等同于传统布局中的 RecyclerView
。
LazyColumn
用于垂直滚动的列表,类似垂直方向的 RecyclerView
;LazyRow
用于水平滚动的列表,类似水平方向的 RecyclerView
。
代码示例如下:
LazyColumn {
item { // Item 函数用于定义显示的内容
Text(text = "This is a special item at the top", fontSize = 24.sp)
}
items(10) { index ->
if (index % 2 == 0) {
Text(text = "Even item $index", color = Color.Blue)
} else {
Text(text = "Odd item $index", color = Color.Red)
}
}
}
它们的所有属性介绍如下:
fun LazyColumn(
modifier: Modifier = Modifier,
state: LazyListState = rememberLazyListState(), // 用于控制和观察LazyColumn状态的对象
contentPadding: PaddingValues = PaddingValues(0.dp), // 为整个LazyColumn的内容添加内边距。与通过`modifier`设置的内边距有所不同,这个内边距是在内容被裁剪之后添加的
reverseLayout: Boolean = false, // 用于控制滚动和布局的方向是否反转
verticalArrangement: Arrangement.Vertical =
if (!reverseLayout) Arrangement.Top else Arrangement.Bottom, // 用于指定LazyColumn子项的垂直排列方式
horizontalAlignment: Alignment.Horizontal = Alignment.Start, // 水平对齐方式
flingBehavior: FlingBehavior = ScrollableDefaults.flingBehavior(), // 快速滚动(fling)行为的逻辑
userScrollEnabled: Boolean = true, // 是否允许用户滑动
content: LazyListScope.() -> Unit // 展示具体的内容
)
@Composable
fun LazyRow(
modifier: Modifier = Modifier,
state: LazyListState = rememberLazyListState(), // 用于控制和观察LazyRow状态的对象
contentPadding: PaddingValues = PaddingValues(0.dp),// 为整个LazyRow的内容添加内边距。与通过`modifier`设置的内边距有所不同,这个内边距是在内容被裁剪之后添加的
reverseLayout: Boolean = false,// 用于控制滚动和布局的方向是否反转
horizontalArrangement: Arrangement.Horizontal =
if (!reverseLayout) Arrangement.Start else Arrangement.End, // 用于指定LazyRow子项的水平排列方式
verticalAlignment: Alignment.Vertical = Alignment.Top, // 垂直对齐方式
flingBehavior: FlingBehavior = ScrollableDefaults.flingBehavior(), // 快速滚动(fling)行为的逻辑
userScrollEnabled: Boolean = true, // 是否允许用户滑动
content: LazyListScope.() -> Unit // 具体的内容
)