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 // 具体的内容
)
