唯客微博客

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

0%

发表于 更新于 分类于

Jetpack Compose组件-抽屉(Drawer)

底部抽屉(BottomDrawer)

BottomDrawer是一个从底部滑出的界面。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@Composable
@ExperimentalMaterialApi
fun BottomDrawer(
    // 底部抽屉内容
    drawerContent: @Composable ColumnScope.() -> Unit,
    // 修饰符
    modifier: Modifier = Modifier,
    // 底部抽屉状态源
    drawerState: BottomDrawerState = rememberBottomDrawerState(BottomDrawerValue.Closed),
    // 启用手势
    gesturesEnabled: Boolean = true,
    // 底部抽屉形状
    drawerShape: Shape = MaterialTheme.shapes.large,
    // 底部高度(阴影)
    drawerElevation: Dp = DrawerDefaults.Elevation,
    // 底部背景颜色
    drawerBackgroundColor: Color = MaterialTheme.colors.surface,
    // 底部抽屉内容颜色
    drawerContentColor: Color = contentColorFor(drawerBackgroundColor),
    // 底部抽屉打开后，遮罩颜色
    scrimColor: Color = DrawerDefaults.scrimColor,
    content: @Composable () -> Unit
): Unit

模态抽屉(ModalDrawer)

阅读全文 »

发表于 更新于 分类于

Jetpack Compose组件-导航栏(Navigation)

底部导航栏(BottomNavigation )

BottomNavigation 为水平方向的导航栏。

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
@Composable
fun BottomNavigation(
    // 修饰符
    modifier: Modifier = Modifier,
    // 背景颜色
    backgroundColor: Color = MaterialTheme.colors.primarySurface,
    // 内容颜色
    contentColor: Color = contentColorFor(backgroundColor),
    // 高度(阴影)
    elevation: Dp = BottomNavigationDefaults.Elevation,
    content: @Composable RowScope.() -> Unit
): Unit

@Composable
fun RowScope.BottomNavigationItem(
    // 是否选中
    selected: Boolean,
    // 点击回调
    onClick: () -> Unit,
    // 导航按钮图标
    icon: @Composable () -> Unit,
    // 修饰符
    modifier: Modifier = Modifier,
    // 导航按钮使能
    enabled: Boolean = true,
    // 导航按钮文字
    label: (@Composable () -> Unit)? = null,
    // 总是显示导航按钮文字
    alwaysShowLabel: Boolean = true,
    // 点击状态源
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    // 选中颜色
    selectedContentColor: Color = LocalContentColor.current,
    // 未选中颜色
    unselectedContentColor: Color = selectedContentColor.copy(alpha = ContentAlpha.medium)
): Unit
1
2
3
4
5
6
7
8
9
10
11
12
13
var selectedItem by remember { mutableStateOf(0) }
val items = listOf("Songs", "Artists", "Playlists")

BottomNavigation {
    items.forEachIndexed { index, item ->
        BottomNavigationItem(
            icon = { Icon(Icons.Filled.Favorite, contentDescription = null) },
            label = { Text(item) },
            selected = selectedItem == index,
            onClick = { selectedItem = index }
        )
    }
}
阅读全文 »

发表于 更新于 分类于

Jetpack Compose组件-应用栏(AppBar)

顶部应用栏(TopAppBar)

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

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
@Composable
fun TopAppBar(
    // 修饰符
    modifier: Modifier = Modifier,
    // 背景颜色
    backgroundColor: Color = MaterialTheme.colors.primarySurface,
    // 内容颜色
    contentColor: Color = contentColorFor(backgroundColor),
    // 高度(阴影)
    elevation: Dp = AppBarDefaults.TopAppBarElevation,
    // 内容边距
    contentPadding: PaddingValues = AppBarDefaults.ContentPadding,
    content: @Composable RowScope.() -> Unit
): Unit

@Composable
fun TopAppBar(
    // 标题
    title: @Composable () -> Unit,
    // 修饰符
    modifier: Modifier = Modifier,
    // 导航图标
    navigationIcon: (@Composable () -> Unit)? = null,
    // 右侧动作按钮
    actions: @Composable RowScope.() -> Unit = {},
    // 背景颜色
    backgroundColor: Color = MaterialTheme.colors.primarySurface,
    // 内容颜色
    contentColor: Color = contentColorFor(backgroundColor),
    // 高度(阴影)
    elevation: Dp = AppBarDefaults.TopAppBarElevation
): Unit
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
TopAppBar(
    title = { Text("Simple TopAppBar") },
    navigationIcon = {
        IconButton(onClick = { /* doSomething() */ }) {
            Icon(Icons.Filled.Menu, contentDescription = null)
        }
    },
    actions = {
        // RowScope here, so these icons will be placed horizontally
        IconButton(onClick = { /* doSomething() */ }) {
            Icon(Icons.Filled.Favorite, contentDescription = "Localized description")
        }
        IconButton(onClick = { /* doSomething() */ }) {
            Icon(Icons.Filled.Favorite, contentDescription = "Localized description")
        }
    }
)
阅读全文 »

发表于 更新于 分类于

Jetpack Compose组件-下拉菜单(DropdownMenu)

下拉菜单(DropdownMenu)

2023-01-14 ：DropdownMenu组件目前还存在众多问题，不建议使用。

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
@Composable
fun DropdownMenu(
    // 是否展开
    expanded: Boolean,
    // 关闭请求回调，点击对话框外部或者按下返回按钮关闭对话框时调用
    onDismissRequest: () -> Unit,
    // 修饰符
    modifier: Modifier = Modifier,
    // 对话框位置偏移
    offset: DpOffset = DpOffset(0.dp, 0.dp),
    // 对话框属性
    properties: PopupProperties = PopupProperties(focusable = true),
    content: @Composable ColumnScope.() -> Unit
): Unit

@Composable
fun DropdownMenuItem(
    // 点击回调
    onClick: () -> Unit,
    // 修饰符
    modifier: Modifier = Modifier,
    // 菜单项使能
    enabled: Boolean = true,
    // 内容边距
    contentPadding: PaddingValues = MenuDefaults.DropdownMenuItemContentPadding,
    // 点击状态源
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    content: @Composable RowScope.() -> Unit
): Unit

显示下拉菜单的框

阅读全文 »

发表于 更新于 分类于

Jetpack Compose组件-标签页(Tab)

标签(Tab)

Tab图标位于文字上方，LeadingIconTab图标位于文字左侧。

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
58
59
60
61
62
@Composable
fun Tab(
    // 是否选中
    selected: Boolean,
    // 点击回调
    onClick: () -> Unit,
    // 修饰符
    modifier: Modifier = Modifier,
    // tab使能
    enabled: Boolean = true,
    // 点击状态源
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    // 选中内容颜色
    selectedContentColor: Color = LocalContentColor.current,
    // 未选中内容颜色
    unselectedContentColor: Color = selectedContentColor.copy(alpha = ContentAlpha.medium),
    content: @Composable ColumnScope.() -> Unit
): Unit

@Composable
fun Tab(
    // 是否选中
    selected: Boolean,
    // 点击回调
    onClick: () -> Unit,
    // 修饰符
    modifier: Modifier = Modifier,
    // tab使能
    enabled: Boolean = true,
    // 文本
    text: (@Composable () -> Unit)? = null,
    // 图标
    icon: (@Composable () -> Unit)? = null,
    // 点击状态源
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    // 选中内容颜色
    selectedContentColor: Color = LocalContentColor.current,
    // 未选中内容颜色
    unselectedContentColor: Color = selectedContentColor.copy(alpha = ContentAlpha.medium)
): Unit

@Composable
fun LeadingIconTab(
    // 是否选中
    selected: Boolean,
    // 点击回调
    onClick: () -> Unit,
    // 文本
    text: @Composable () -> Unit,
    // 图标
    icon: @Composable () -> Unit,
    // 修饰符
    modifier: Modifier = Modifier,
    // tab使能
    enabled: Boolean = true,
    // 点击状态源
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    // 选中内容颜色
    selectedContentColor: Color = LocalContentColor.current,
    // 未选中内容颜色
    unselectedContentColor: Color = selectedContentColor.copy(alpha = ContentAlpha.medium)
): Unit

标签行(TabRow)

阅读全文 »

发表于 更新于 分类于

Jetpack Compose实现滑块式标签tab

1. 先完成一个基本的tab

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
@Composable
fun SliderTabs() {
    var selectedIndex by remember { mutableStateOf(0) }
    val bgColor = Color(0xff1E76DA)

    val list = listOf("Active", "Completed")
    TabRow(
        selectedTabIndex = selectedIndex,
        backgroundColor = bgColor,
        modifier = Modifier.padding(vertical = 4.dp, horizontal = 8.dp),
        indicator = { tabPositions ->
            TabRowDefaults.Indicator(
                modifier = Modifier.tabIndicatorOffset(tabPositions[selectedIndex]),
                color = Color.White
            )
        }
    ) {
        list.forEachIndexed { index, text ->
            val selected = selectedIndex == index
            Tab(
                selected = selected,
                onClick = { selectedIndex = index },
                text = { Text(text = text, color = Color.White) }
            )
        }
    }
}
阅读全文 »

发表于 更新于 分类于

Jetpack Compose组件-列表项(ListItem)

列表项(ListItem)

ListItem(小列表项)类似设置界面中的菜单项，有单行/两行/三行文本三种样式，可添加左侧图标，可设置右侧内容，通常是Icon、CheckBox 或 Switch。

ListItem左侧图标和右侧内容默认为上方对齐，要想居中对齐需要将左侧图标大小(size + padding)设置为40dpx56dp，右侧内容高度(height+ padding)设置为56dp。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@Composable
@ExperimentalMaterialApi
fun ListItem(
    // 修饰符
    modifier: Modifier = Modifier,
    // 左侧图标
    icon: (@Composable () -> Unit)? = null,
    // 副文本
    secondaryText: (@Composable () -> Unit)? = null,
    // 副文本是否单行显示
    singleLineSecondaryText: Boolean = true,
    // 显示在主文本上面的文本
    overlineText: (@Composable () -> Unit)? = null,
    // 设置右侧内容，通常是Icon、CheckBox 或 Switch
    trailing: (@Composable () -> Unit)? = null,
    // 主文本
    text: @Composable () -> Unit
): Unit
阅读全文 »

发表于 更新于 分类于

Jetpack Compose组件-左右滑动删除(SwipeToDismiss)

左右滑动删除(SwipeToDismiss)

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@Composable
@ExperimentalMaterialApi
fun SwipeToDismiss(
    // 滑动状态
    state: DismissState,
    // 修饰符
    modifier: Modifier = Modifier,
    // 滑动的方向
    directions: Set<DismissDirection> = setOf(EndToStart, StartToEnd),
    // 滑动阈值
    dismissThresholds: (DismissDirection) -> ThresholdConfig = {
        FixedThreshold(DISMISS_THRESHOLD)
    },
    // 背景
    background: @Composable RowScope.() -> Unit,
    // 删除的内容
    dismissContent: @Composable RowScope.() -> Unit
): Unit
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
58
59
60
61
62
63
64
65
66
67
68
var unread by remember { mutableStateOf(false) }
val dismissState = rememberDismissState(
    confirmStateChange = {
        if (it == DismissValue.DismissedToEnd) unread = !unread
        false
    }
)
SwipeToDismiss(
    state = dismissState,
    modifier = Modifier.padding(vertical = 4.dp),
    dismissThresholds = {
        FixedThreshold(20.dp)
    },
    directions = setOf(DismissDirection.StartToEnd, DismissDirection.EndToStart),
    background = {
        val direction = dismissState.dismissDirection ?: return@SwipeToDismiss
        val color by animateColorAsState(
            when (dismissState.targetValue) {
                DismissValue.Default -> Color.LightGray
                DismissValue.DismissedToEnd -> Color.Green
                DismissValue.DismissedToStart -> Color.Red
            }
        )
        val alignment = when (direction) {
            DismissDirection.StartToEnd -> Alignment.CenterStart
            DismissDirection.EndToStart -> Alignment.CenterEnd
        }
        val icon = when (direction) {
            DismissDirection.StartToEnd -> Icons.Default.Done
            DismissDirection.EndToStart -> Icons.Default.Delete
        }
        val scale by animateFloatAsState(
            if (dismissState.targetValue == DismissValue.Default) 0.75f else 1f
        )

        Box(
            Modifier
                .fillMaxSize()
                .background(color)
                .padding(horizontal = 20.dp),
            contentAlignment = alignment
        ) {
            Icon(
                icon,
                contentDescription = "Localized description",
                modifier = Modifier
                    .scale(scale)
                    .clickable {
                        Log.d("1234", "SwipeToDismiss DismissedToStart")
                    }
            )
        }
    },
    dismissContent = {
        Card(
            elevation = animateDpAsState(
                if (dismissState.dismissDirection != null) 4.dp else 0.dp
            ).value
        ) {
            ListItem(
                text = {
                    Text("SwipeToDismiss", fontWeight = if (unread) FontWeight.Bold else null)
                },
                secondaryText = { Text("Swipe me left or right!") }
            )
        }
    }
)
阅读全文 »

发表于 更新于 分类于

Jetpack Compose组件-对话框(Dialog)

警告对话框(AlertDialog)

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
@Composable
fun AlertDialog(
    // 关闭请求回调，点击对话框外部或者按下返回按钮关闭对话框时调用
    onDismissRequest: () -> Unit,
    // 对话框按钮
    buttons: @Composable () -> Unit,
    // 修饰符
    modifier: Modifier = Modifier,
    // 标题
    title: (@Composable () -> Unit)? = null,
    // 文本
    text: (@Composable () -> Unit)? = null,
    // 形状
    shape: Shape = MaterialTheme.shapes.medium,
    // 背景颜色
    backgroundColor: Color = MaterialTheme.colors.surface,
    // 内容颜色
    contentColor: Color = contentColorFor(backgroundColor),
    // 对话框属性
    properties: DialogProperties = DialogProperties()
): Unit

@Composable
fun AlertDialog(
    // 关闭请求回调，点击对话框外部或者按下返回按钮关闭对话框时调用
    onDismissRequest: () -> Unit,
    // 确认按钮
    confirmButton: @Composable () -> Unit,
    // 修饰符
    modifier: Modifier = Modifier,
    // 关闭按钮
    dismissButton: (@Composable () -> Unit)? = null,
    // 标题
    title: (@Composable () -> Unit)? = null,
    // 文本
    text: (@Composable () -> Unit)? = null,
    // 形状
    shape: Shape = MaterialTheme.shapes.medium,
    // 背景颜色
    backgroundColor: Color = MaterialTheme.colors.surface,
    // 内容颜色
    contentColor: Color = contentColorFor(backgroundColor),
    // 对话框属性
    properties: DialogProperties = DialogProperties()
): Unit

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
val openDialog = remember { mutableStateOf(false)  }

Button(onClick = {
    openDialog.value = true
}) {
    Text("Click me")
}

if (openDialog.value) {
    AlertDialog(
        onDismissRequest = {
            openDialog.value = false
        },
        title = {
            Text(text = "Dialog Title")
        },
        text = {
            Text("Here is a text ")
        },
        confirmButton = {
            Button(
                onClick = {
                    openDialog.value = false
                }) {
                Text("This is the Confirm Button")
            }
        },
        dismissButton = {
            Button(
                onClick = {
                    openDialog.value = false
                }) {
                Text("This is the dismiss Button")
            }
        }
    )
}

对话框(Dialog)

阅读全文 »

发表于 更新于 分类于

Jetpack Compose组件-Snackbar

Snackbar

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

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
@Composable
fun Snackbar(
    // Snackbar 数据, 来自SnackbarHost的回调
    snackbarData: SnackbarData,
    // 修饰符
    modifier: Modifier = Modifier,
    // 动作放在单独一行，在长文本时设置为true，action位于右下角，否则在右侧
    actionOnNewLine: Boolean = false,
    // 形状
    shape: Shape = MaterialTheme.shapes.small,
    // 背景颜色
    backgroundColor: Color = SnackbarDefaults.backgroundColor,
    // 内容颜色
    contentColor: Color = MaterialTheme.colors.surface,
    // 动作颜色
    actionColor: Color = SnackbarDefaults.primaryActionColor,
    // 高度(阴影)
    elevation: Dp = 6.dp
): Unit

@Composable
fun Snackbar(
    // 修饰符
    modifier: Modifier = Modifier,
    // 动作回调
    action: (@Composable () -> Unit)? = null,
    // 动作放在单独一行，在长文本时设置为true，action位于右下角，否则在右侧
    actionOnNewLine: Boolean = false,
    // 形状
    shape: Shape = MaterialTheme.shapes.small,
    // 背景颜色
    backgroundColor: Color = SnackbarDefaults.backgroundColor,
    // 内容颜色
    contentColor: Color = MaterialTheme.colors.surface,
    // 高度(阴影)
    elevation: Dp = 6.dp,
    content: @Composable () -> Unit
): Unit
阅读全文 »