补充组件

本篇收录核心组件之外、同样可直接使用但尚未在其他章节展开的组件：卡片、底部导航、浮层与返回键拦截。

卡片

Card

填充式卡片，内容区为 ColumnScope。

参数	描述	类型
modifier 非必需	修饰符	Modifier
shape 非必需	卡片形状	Shape
colors 非必需	各状态下的配色	CardColors
elevation 非必需	各状态下的阴影高度	CardElevation
border 非必需	卡片边框	BorderStroke
content 必需	卡片内容	@Composable ColumnScope.() -> Unit

ElevatedCard

带阴影的卡片，参数与 Card 基本一致（不支持 border 参数），默认阴影更高。

OutlinedCard

描边式卡片，参数与 Card 一致，默认带边框、无阴影。

示例

Card(
    modifier = Modifier.fillMaxWidth().padding(16.dp),
    shape = RoundedCornerShape(12.dp)
) {
    Text(
        text = "卡片标题",
        modifier = Modifier.padding(16.dp)
    )
}

底部导航

NavigationBar

底部导航栏，内容区为 RowScope，通常放置 3~5 个 NavigationBarItem。

参数	描述	类型
modifier 非必需	修饰符	Modifier
containerColor 非必需	容器背景色	Color
contentColor 非必需	内容首选色	Color
tonalElevation 非必需	色调高度	Dp
windowInsets 非必需	窗口内边距	WindowInsets
content 必需	导航项内容	@Composable RowScope.() -> Unit

NavigationBarItem

底部导航项，为 RowScope 扩展函数，通常放在 NavigationBar 内使用。

参数	描述	类型
selected 必需	是否选中	Boolean
onClick 必需	点击回调	() -> Unit
icon 必需	图标内容	@Composable () -> Unit
modifier 非必需	修饰符	Modifier
enabled 非必需	是否可交互	Boolean
label 非必需	文本标签	@Composable (() -> Unit)?
alwaysShowLabel 非必需	是否始终显示标签，false 时仅选中态显示	Boolean
colors 非必需	各状态下的配色	NavigationBarItemColors
interactionSource 非必需	交互源	MutableInteractionSource?

关于图标

Kuikly Compose 当前未提供 Icon 组件，icon 参数需要自行用 Image、Canvas 或 Text 组合实现。

示例

NavigationBar {
    NavigationBarItem(
        selected = selectedIndex == 0,
        onClick = { selectedIndex = 0 },
        icon = { Text("首页") }
    )
    NavigationBarItem(
        selected = selectedIndex == 1,
        onClick = { selectedIndex = 1 },
        icon = { Text("我的") }
    )
}

Popup

浮层容器，内部基于 Dialog 实现，相对整个窗口按 alignment 与 offset 定位（而非相对父组件），只要仍在组合树中就保持可见；点击外部是否回调 onDismissRequest 由 properties.dismissOnClickOutside 控制。适用于非模态的浮动菜单等场景。

参数	描述	类型
alignment 必需	相对窗口的对齐方式	Alignment
offset 非必需	基于对齐位置的偏移	IntOffset
onDismissRequest 必需	点击浮层外部（受 properties.dismissOnClickOutside 控制）或按下系统返回键时的回调	(() -> Unit)?
properties 必需	浮层行为配置	PopupProperties
content 必需	浮层内容	@Composable () -> Unit

BackHandler

拦截系统返回键，在页面内接管返回逻辑。

参数	描述	类型
onBack 必需	返回键触发回调	() -> Unit

BackHandler {
    // 返回键按下，自行处理（如关闭弹层、返回上一级）
}

三态复选框

TriStateCheckbox

支持选中、未选中、部分选中三种状态。

参数	描述	类型
state 必需	三态值	ToggleableState
onClick 必需	点击回调，传 null 表示不响应点击	(() -> Unit)?
modifier 非必需	修饰符	Modifier
enabled 非必需	是否可交互	Boolean
colors 非必需	各状态下的配色	CheckboxColors
interactionSource 非必需	交互源	MutableInteractionSource?

标签行

LeadingIconTab

带前置图标的标签，配合 TabRow 系列使用。

参数	描述	类型
selected 必需	是否选中	Boolean
onClick 必需	点击回调	() -> Unit
text 必需	文本内容	@Composable () -> Unit
icon 必需	图标内容	@Composable () -> Unit
modifier 非必需	修饰符	Modifier
enabled 非必需	是否可交互	Boolean
selectedContentColor 非必需	选中态内容色	Color
unselectedContentColor 非必需	未选中态内容色	Color
interactionSource 非必需	交互源	MutableInteractionSource?

PrimaryTabRow / SecondaryTabRow

Material3 的主 / 次级标签行，Primary 用于页面级切换，Secondary 用于内容区内二级切换。

参数	描述	类型
selectedTabIndex 必需	当前选中下标	Int
modifier 非必需	修饰符	Modifier
containerColor 非必需	容器背景色	Color
contentColor 非必需	内容首选色	Color
indicator 非必需	指示器	@Composable TabIndicatorScope.() -> Unit
divider 非必需	底部分割线	@Composable () -> Unit
tabs 必需	标签内容，通常为多个 Tab	@Composable () -> Unit

实验性 API

PrimaryTabRow 与 SecondaryTabRow 标注 @ExperimentalMaterial3Api，使用前需要 opt-in。

示例

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun DemoTabs() {
    var selectedIndex by remember { mutableStateOf(0) }
    PrimaryTabRow(selectedTabIndex = selectedIndex) {
        Tab(
            selected = selectedIndex == 0,
            onClick = { selectedIndex = 0 },
            text = { Text("推荐") }
        )
        Tab(
            selected = selectedIndex == 1,
            onClick = { selectedIndex = 1 },
            text = { Text("关注") }
        )
    }
}