Jetpack compose——基础控件

338 阅读11分钟

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 类型资源的方法。类似的方法还有 stringResourcecolorResourceintegerResource等。需要注意的是 Image 如果要实现类似于 ImageViewscaleType 的效果需要 alignmentcontentScale 属性配合。

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 中,进度条有两个控件,分别是 LinearProgressIndicatorCircularProgressIndicator。它们的全部属性介绍如下:

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中
)

ColumnRow 相反,它会将子元素垂直排列。等同于垂直方向的 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 中,LazyColumnLazyRow 等同于传统布局中的 RecyclerViewLazyColumn 用于垂直滚动的列表,类似垂直方向的 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 // 具体的内容
) 

参考