唯客微博客

专注于计算机，嵌入式领域的技术

0%

发表于 更新于 分类于

Jetpack Compose组件-平面(Surface)

平面(Surface)

将很多的组件摆放在这个平面之上，我们可以设置这个平面的边框，圆角，颜色等等。

Surface实际上是Box的重新包装。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
@Composable
fun Surface(
    // 修饰符
    modifier: Modifier = Modifier,
    // 形状
    shape: Shape = RectangleShape,
    // 颜色
    color: Color = MaterialTheme.colors.surface,
    // 内容颜色
    contentColor: Color = contentColorFor(color),
    // 边框
    border: BorderStroke? = null,
    // 高度(阴影)
    elevation: Dp = 0.dp,
    content: @Composable () -> Unit
): Unit

@ExperimentalMaterialApi
@Composable
fun Surface(
    // 是否选中
    selected: Boolean,
    // 点击回调
    onClick: () -> Unit,
    // 点击使能
    enabled: Boolean = true,
    // 点击状态源
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    // 其余参数参照上方第一个
): Unit

@ExperimentalMaterialApi
@Composable
fun Surface(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    // 选中使能
    enabled: Boolean = true,
    // 选中状态源
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    // 其余参数参照上方第一个
): Unit

@ExperimentalMaterialApi
@Composable
fun Surface(
    // 点击回调
    onClick: () -> Unit,
    // 点击使能
    enabled: Boolean = true,
    // 点击状态源
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    // 其余参数参照上方第一个
): Unit
阅读全文 »

发表于 更新于 分类于

Jetpack Compose组件-进度指示器(ProgressIndicator)

线性进度指示器(LinearProgressIndicator)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 等待条
@Composable
fun LinearProgressIndicator(
    // 修饰符
    modifier: Modifier = Modifier,
    // 进度颜色
    color: Color = MaterialTheme.colors.primary,
    // 背景颜色
    backgroundColor: Color = color.copy(alpha = IndicatorBackgroundOpacity),
    // 进度条末端样式
    strokeCap: StrokeCap = StrokeCap.Butt
): Unit

@Composable
fun LinearProgressIndicator(
    // 进度
    progress: Float,
    // 修饰符
    modifier: Modifier = Modifier,
    // 进度颜色
    color: Color = MaterialTheme.colors.primary,
    // 背景颜色
    backgroundColor: Color = color.copy(alpha = IndicatorBackgroundOpacity),
    // 进度条末端样式
    strokeCap: StrokeCap = StrokeCap.Butt
): Unit
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var progress by remember { mutableStateOf(0.1f) }
val animatedProgress by animateFloatAsState(
    targetValue = progress,
    animationSpec = ProgressIndicatorDefaults.ProgressAnimationSpec
)

Column(horizontalAlignment = Alignment.CenterHorizontally) {
    LinearProgressIndicator(progress = animatedProgress)
    Spacer(Modifier.requiredHeight(30.dp))
    OutlinedButton(
        onClick = {
            if (progress < 1f) progress += 0.1f
        }
    ) {
        Text("Increase")
    }
}

圆形进度指示器(CircularProgressIndicator)

阅读全文 »

发表于 更新于 分类于

Jetpack Compose组件-滑动条(Slider)

滑动条(Slider)

Slider 允许用户从一定范围的数值中进行选择。

Slider 反映了一个沿条的数值范围，用户可以从中选择一个单一的数值。它们是调整音量、亮度或应用图像过滤器等设置的理想选择。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@Composable
fun Slider(
    // 滑动条值
    value: Float,
    // 值改变回调
    onValueChange: (Float) -> Unit,
    // 修饰符
    modifier: Modifier = Modifier,
    // 滑动条使能
    enabled: Boolean = true,
    // 值的范围
    valueRange: ClosedFloatingPointRange<Float> = 0f..1f,
    // 将整个范围均匀分割为(steps + 1) 份，并且滑动时自动吸附到对应份的最近边界
    steps: Int = 0,
    // 滑动条值改变完成
    onValueChangeFinished: (() -> Unit)? = null,
    // 滑动条状态源
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    // 滑动条的各种颜色
    colors: SliderColors = SliderDefaults.colors()
): Unit
阅读全文 »

发表于 更新于 分类于

Jetpack Compose组件-分割线(Divider)

分割线(Divider)

Divider是将列表和布局中的内容分组的细线。

1
2
3
4
5
6
7
8
9
10
11
@Composable
fun Divider(
    // 修饰符
    modifier: Modifier = Modifier,
    // 分割线颜色
    color: Color = MaterialTheme.colors.onSurface.copy(alpha = DividerAlpha),
    // 分割线粗细
    thickness: Dp = 1.dp,
    // 分割线起始偏移
    startIndent: Dp = 0.dp
): Unit
1
2
3
4
5
Column {
    Text("Foo")
    Divider(startIndent = 8.dp, thickness = 1.dp, color = Color.Black)
    Text("Bar")
}
阅读全文 »

发表于 更新于 分类于

Jetpack Compose组件-徽章(Badge)

徽章(Badge)

Badge 是一个可以包含动态信息的组件，例如是否存在新通知或许多未处理请求。徽章可以是纯图标或包含短文本。一般不单独使用，使用BadgeBox 将Badge放置在组件的右上角。

1
2
3
4
5
6
7
8
9
10
@Composable
fun Badge(
    // 修饰符
    modifier: Modifier = Modifier,
    // 背景颜色
    backgroundColor: Color = MaterialTheme.colors.error,
    // 内容颜色
    contentColor: Color = contentColorFor(backgroundColor),
    content: (@Composable RowScope.() -> Unit)? = null
): Unit
1
2
3
4
var count by remember { mutableStateOf(0) }
Card(onClick = { count++ }) {
    Text("Clickable card content with count: $count")
}
阅读全文 »

发表于 更新于 分类于

Jetpack Compose组件-卡片(Card)

卡片(Card)

Card 是 Compose 中一个布局组件，我们用它可以来创造出一些类似于卡片界面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
@Composable
@NonRestartableComposable
fun Card(
    // 修饰符
    modifier: Modifier = Modifier,
    // 卡片形状
    shape: Shape = MaterialTheme.shapes.medium,
    // 卡片背景颜色
    backgroundColor: Color = MaterialTheme.colors.surface,
    // 卡片内容颜色
    contentColor: Color = contentColorFor(backgroundColor),
    // 卡片边框
    border: BorderStroke? = null,
    // 卡片高度(阴影)
    elevation: Dp = 1.dp,
    content: @Composable () -> Unit
): Unit

@ExperimentalMaterialApi
@Composable
@NonRestartableComposable
fun Card(
    // 点击回调
    onClick: () -> Unit,
    // 修饰符
    modifier: Modifier = Modifier,
    // 卡片点击使能
    enabled: Boolean = true,
    // 卡片形状
    shape: Shape = MaterialTheme.shapes.medium,
    // 卡片背景颜色
    backgroundColor: Color = MaterialTheme.colors.surface,
    // 卡片内容颜色
    contentColor: Color = contentColorFor(backgroundColor),
    // 卡片边框
    border: BorderStroke? = null,
    // 卡片高度(阴影)
    elevation: Dp = 1.dp,
    // 卡片点击状态源
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    content: @Composable () -> Unit
): Unit
1
2
3
4
var count by remember { mutableStateOf(0) }
Card(onClick = { count++ }) {
    Text("Clickable card content with count: $count")
}
阅读全文 »

发表于 更新于 分类于

Jetpack Compose组件-小标签(Chip)

小标签(Chip)

Chip(小标签)类似于淘宝的历史搜索标签。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@ExperimentalMaterialApi
@Composable
fun Chip(
    // 点击回调
    onClick: () -> Unit,
    // 修饰符
    modifier: Modifier = Modifier,
    // 小标签使能
    enabled: Boolean = true,
    // 点击状态源
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    // 小标签形状
    shape: Shape = MaterialTheme.shapes.small.copy(CornerSize(percent = 50)),
    // 小标签边框
    border: BorderStroke? = null,
    // 小标签的各种颜色
    colors: ChipColors = ChipDefaults.chipColors(),
    // 小标签左侧图标
    leadingIcon: (@Composable () -> Unit)? = null,
    content: @Composable RowScope.() -> Unit
): Unit
1
2
3
4
5
6
7
8
9
10
11
12
13
Chip(
    onClick = { /* Do something! */ },
    border = ChipDefaults.outlinedBorder,
    colors = ChipDefaults.outlinedChipColors(),
    leadingIcon = {
        Icon(
            Icons.Filled.Settings,
            contentDescription = "Localized description"
        )
    }
) {
    Text("Change settings")
}
阅读全文 »

发表于 更新于 分类于

Jetpack Compose 禁用硬件加速

Compose 默认开启硬件加速，这会导致一些绘图操作在低版本无效，此时需要关闭硬件加速。

以下代码实现了一个软件层，SoftwareLayer包裹的代码将关闭硬件加速。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@Composable
fun SoftwareLayer(
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit,
) {
    AndroidView(
        factory = { context ->
            ComposeView(context).apply {
                setLayerType(View.LAYER_TYPE_SOFTWARE, null)
            }
        },
        update = { composeView ->
            composeView.setContent(content)
        },
        modifier = modifier,
    )
}

使用

阅读全文 »

发表于 更新于 分类于

Jetpack Compose组件-图形(Canvas)

图形(Canvas)

Canvas需要指定大小尺寸，使用Modifier.size指定精确大小或者使用Modifier.fillMaxSize指定相对于父项的大小。

1
2
3
4
5
6
@Composable
fun Canvas(modifier: Modifier, onDraw: DrawScope.() -> Unit): Unit

@ExperimentalFoundationApi
@Composable
fun Canvas(modifier: Modifier, contentDescription: String, onDraw: DrawScope.() -> Unit): Unit
1
2
3
4
5
6
7
8
9
10
11
Canvas(modifier = Modifier.size(100.dp)) {
    drawRect(Color.Magenta)
    inset(10.0f) {
        drawLine(
            color = Color.Red,
            start = Offset.Zero,
            end = Offset(size.width, size.height),
            strokeWidth = 5.0f
        )
    }
}
阅读全文 »

发表于 更新于 分类于

Jetpack Compose组件-图片(Image)

图片(Image)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
@Composable
@NonRestartableComposable
fun Image(
    // 位图对象，可以显示 JPG，PNG 等格式的图标
    bitmap: ImageBitmap,
    // 无障碍功能, 图片描述信息
    contentDescription: String?, 
    // 修饰符
    modifier: Modifier = Modifier, 
    // 对齐方式
    alignment: Alignment = Alignment.Center,
    // 图片缩放方式
    contentScale: ContentScale = ContentScale.Fit,
    // 图片透明度
    alpha: Float = DefaultAlpha,
    // 颜色滤镜
    colorFilter: ColorFilter? = null,
    // 缩放时采样算法
    filterQuality: FilterQuality = DefaultFilterQuality
): Unit

@Composable
fun Image(
    // 画笔，可以使用画笔在 Canvas 上直接绘制图标，可以通过 res/ 下的图片资源来设置图标
    painter: Painter,
    // 无障碍功能, 图片描述信息
    contentDescription: String?, 
    // 修饰符
    modifier: Modifier = Modifier,
    // 对齐方式
    alignment: Alignment = Alignment.Center,
    // 图片缩放方式
    contentScale: ContentScale = ContentScale.Fit,
    // 图片透明度
    alpha: Float = DefaultAlpha,
    // 颜色滤镜
    colorFilter: ColorFilter? = null
): Unit

@Composable
@NonRestartableComposable
fun Image(
    // 矢量图对象，可以显示 SVG 格式的图标
    imageVector: ImageVector,
    // 无障碍功能, 图片描述信息
    contentDescription: String?, 
    // 修饰符
    modifier: Modifier = Modifier,
    // 对齐方式
    alignment: Alignment = Alignment.Center,
    // 图片缩放方式
    contentScale: ContentScale = ContentScale.Fit,
    // 图片透明度
    alpha: Float = DefaultAlpha,
    // 颜色滤镜
    colorFilter: ColorFilter? = null
): Unit
1
2
3
4
5
6
Image(
        painter = painterResource(id = R.drawable.newbanner4),
        contentDescription = null,
        contentScale = ContentScale.Inside,
        colorFilter = ColorFilter.tint(Color.Red, blendMode = BlendMode.Color)
    )

图片相关库

阅读全文 »