弹出视图修饰符（Presentation
这些修饰符用于配置通过 sheet 呈现的视图的行为和外观，包括在不同尺寸环境下的适配方式、拖拽指示器、支持的尺寸（detents）、背景交互、滚动与调整优先级等。
这些修饰符应作用于 被 sheet 弹出显示的根视图（例如 <VStack>、<NavigationStack> 或 <List>）。
presentationCompactAdaptation
定义当设备处于 横向或纵向紧凑尺寸类（Compact Size Class） 时，sheet 的适配方式。
类型
1presentationCompactAdaptation?: PresentationAdaptation | {
2 horizontal: PresentationAdaptation
3 vertical: PresentationAdaptation
4}
PresentationAdaptation 可选值：
"automatic"：系统默认行为"fullScreenCover"：使用全屏显示"sheet"：使用普通 sheet 弹出样式"popover"：使用气泡样式（部分平台支持）"none"：不进行适配（尽可能维持原样）
示例
1<NavigationStack
2 presentationCompactAdaptation={{
3 horizontal: "fullScreenCover",
4 vertical: "sheet"
5 }}
6>
7 {/* 弹出内容 */}
8</NavigationStack>
presentationDragIndicator
控制 sheet 顶部是否显示 拖拽指示器（即小横条）。
类型
1presentationDragIndicator?: "visible" | "hidden" | "automatic"
示例
1<VStack presentationDragIndicator="visible">
2 <Text>可以拖动顶部指示器来改变高度</Text>
3</VStack>
presentationDetents
定义 sheet 支持的 高度位置（detents），用户可以通过拖拽在这些高度间切换。
类型
1presentationDetents?: PresentationDetent[]
PresentationDetent 可选值：
"medium"：大约为屏幕高度的一半（在紧凑纵向尺寸下无效）"large"：占满整个屏幕高度number > 1：表示固定的高度（单位为 pt）0 < number <= 1：表示按屏幕高度的百分比（例如 0.5 表示 50% 高度）
示例
1<VStack presentationDetents={[200, "medium", "large"]}>
2 <Text>拖动可在不同高度之间切换</Text>
3</VStack>
presentationBackgroundInteraction
定义在弹出页面显示时，用户是否可以与 底层视图交互。
类型
1presentationBackgroundInteraction?:
2 | "automatic"
3 | "enabled"
4 | "disabled"
5 | { enabledUpThrough: PresentationDetent }
示例：仅在 sheet 高度较小时允许背景交互
1<VStack presentationBackgroundInteraction={{
2 enabledUpThrough: "medium"
3}}>
4 <Text>当 sheet 为中等高度时，背景可交互</Text>
5</VStack>
presentationContentInteraction
控制在向上滑动手势中，sheet 是优先 调整高度 还是 滚动内容。
类型
1presentationContentInteraction?: "automatic" | "resizes" | "scrolls"
说明
"resizes"：优先调整 detent 高度，滚动内容居后"scrolls"：立即滚动内部内容（如 ScrollView）"automatic"：系统默认行为（通常优先调整 detent）
示例
1<ScrollView presentationContentInteraction="scrolls">
2 {/* 向上滑时会立即滚动，而不会先调整 sheet 高度 */}
3</ScrollView>
presentationCornerRadius
设置 sheet 背景的 圆角半径。
类型
1presentationCornerRadius?: number
示例
1<VStack presentationCornerRadius={16}>
2 <Text>该 sheet 具有圆角背景</Text>
3</VStack>
完整使用示例
1function SheetPage({ onDismiss }: {
2 onDismiss: () => void
3}) {
4 return <NavigationStack>
5 <List navigationTitle="弹出页">
6 <Text font="title" padding={50}>
7 拖动指示器可改变 sheet 高度。
8 </Text>
9 <Button
10 title="关闭"
11 action={onDismiss}
12 />
13 </List>
14 </NavigationStack>
15}
16
17<Button
18 title="显示"
19 action={() => setIsPresented(true)}
20 sheet={{
21 isPresented: isPresented,
22 onChanged: setIsPresented,
23 content: <SheetPage
24 presentationDragIndicator="visible"
25 presentationDetents={[200, "medium", "large"]}
26 onDismiss={() => setIsPresented(false)}
27 />
28 }}
29/>
修饰符汇总
| 修饰符 |
功能说明 |
presentationCompactAdaptation |
设置在紧凑尺寸类下的适配方式 |
presentationDragIndicator |
控制是否显示拖拽指示器 |
presentationDetents |
定义 sheet 可拖拽的高度（支持多个） |
presentationBackgroundInteraction |
设置是否允许与背景内容交互 |
presentationContentInteraction |
控制是优先滚动还是优先调整高度 |
presentationCornerRadius |
设置 sheet 的圆角大小 |
