kotlin中HorizontalDivider() ModalBottomSheet background()

HorizontalDivider()

在 Kotlin Jetpack Compose 中，HorizontalDivider() 是一个用于创建水平分隔线的 Material Design 组件。

 HorizontalDivider(
        modifier = Modifier
        .fillMaxWidth()          // 充满宽度
        .padding(horizontal = 16.dp)  // 水平边距
        .height(1.dp)，           // 高度
            thickness = 1.dp,    //厚度：默认是 1.dp
            color = Color.Red
        )

ModalBottomSheet

ModalBottomSheet 是 Jetpack Compose Material3 中的一个组件，用于从屏幕底部向上滑出的模态对话框。

ModalBottomSheet(
    onDismissRequest = { showAgeSelector = false },  // 关闭回调
    sheetState = rememberModalBottomSheetState(      // 状态控制
        skipPartiallyExpanded = false
    ),
    containerColor = MaterialTheme.colorScheme.background,  // 背景色
    shape = RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp)  // 形状
) {
    // 内容区域
}

1.onDismissRequest

• 作用：当用户尝试关闭底部工作表时触发

• 触发条件：

  • 点击工作表外部区域

  • 向下滑动工作表

  • 按下返回键

2.sheetState

状态参数：

• skipPartiallyExpanded = false：允许部分展开状态

• skipPartiallyExpanded = true：直接跳转到完全展开状态

三种展开状态：

• 隐藏 (Hidden)：完全不可见

• 部分展开 (PartiallyExpanded)：显示部分内容

• 完全展开 (Expanded)：显示全部内容

background()

在 Jetpack Compose 中，.background() 修饰符用于设置组件的背景，而圆角可以通过形状参数或单独的 .clip() 修饰符来实现。

• 圆角应该在 .background() 修饰符中设置，而不是通过先 .clip() 再 .background()

• RoundedCornerShape 提供了灵活的圆角配置选项

• 背景圆角可以与边框、阴影等其他效果结合使用

• 考虑性能时，重用形状对象并避免过度复杂的形状

// ✅ 正确：在background中直接设置圆角
.background(
    color = MaterialTheme.colorScheme.primaryContainer,
    shape = RoundedCornerShape(12.dp)
)

// ❌ 错误：先设置圆角再设置背景（圆角对背景无效）
.clip(RoundedCornerShape(12.dp))
.background(MaterialTheme.colorScheme.primaryContainer)