ボトムシートの一部
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
ボトムシートを部分的に表示してから、ユーザーに選択してもらう
閉じるか選択できます。
そのためには、ModalBottomSheet
に SheetState
のインスタンスを渡します。
skipPartiallyExpanded
を false
に設定。
例
この例では、sheetState
プロパティを使用する方法を示します。
ModalBottomSheet
を使用して、最初はシートの一部のみを表示します。
@Composable
fun PartialBottomSheet() {
var showBottomSheet by remember { mutableStateOf(false) }
val sheetState = rememberModalBottomSheetState(
skipPartiallyExpanded = false,
)
Column(
modifier = Modifier.fillMaxWidth(),
horizontalAlignment = Alignment.CenterHorizontally,
) {
Button(
onClick = { showBottomSheet = true }
) {
Text("Display partial bottom sheet")
}
if (showBottomSheet) {
ModalBottomSheet(
modifier = Modifier.fillMaxHeight(),
sheetState = sheetState,
onDismissRequest = { showBottomSheet = false }
) {
Text(
"Swipe up to open sheet. Swipe down to dismiss.",
modifier = Modifier.padding(16.dp)
)
}
}
}
}
コードに関する主なポイント
この例では、次の点に注意してください。
showBottomSheet
は、アプリにボトムシートを表示するかどうかを制御します。
sheetState
は SheetState
のインスタンスです。
skipPartiallyExpanded
は false です。
ModalBottomSheet
は、画面全体に表示されるよう修飾子を受け取ります。
表示されます。
ModalBottomSheet
は sheetState
の値として sheetState
を取ります。
パラメータを指定します。
- そのため、最初に開いたときにはシートの一部しか表示されません。「
ユーザーは、アイコンをドラッグまたはスワイプすることで全画面表示にしたり、閉じたりできます。
onDismissRequest
ラムダは、ユーザーが
ボトムシートを閉じますこの場合は、シートのみが削除されます。
結果
ユーザーが初めてボタンを押すと、シートが部分的に表示されます。
ユーザーがシートを上にスワイプすると、画面全体に表示されます。
参考情報
このページのコンテンツやコードサンプルは、コンテンツ ライセンスに記載のライセンスに従います。Java および OpenJDK は Oracle および関連会社の商標または登録商標です。
最終更新日 2024-08-29 UTC。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"必要な情報がない"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"複雑すぎる / 手順が多すぎる"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"最新ではない"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻訳に関する問題"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"サンプル / コードに問題がある"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"その他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"わかりやすい"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"問題の解決に役立った"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"その他"
}]
{"lastModified": "\u6700\u7d42\u66f4\u65b0\u65e5 2024-08-29 UTC\u3002"}
[[["わかりやすい","easyToUnderstand","thumb-up"],["問題の解決に役立った","solvedMyProblem","thumb-up"],["その他","otherUp","thumb-up"]],[["必要な情報がない","missingTheInformationINeed","thumb-down"],["複雑すぎる / 手順が多すぎる","tooComplicatedTooManySteps","thumb-down"],["最新ではない","outOfDate","thumb-down"],["翻訳に関する問題","translationIssue","thumb-down"],["サンプル / コードに問題がある","samplesCodeIssue","thumb-down"],["その他","otherDown","thumb-down"]],["最終更新日 2024-08-29 UTC。"]]