Back to Details

shadcn_ui-sheet

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Shadcn UI — Sheet

Shadcn UI — Sheet

Instructions

使用说明

Sheets extend the dialog pattern to display content from an edge of the screen. Use 
showShadSheet(context: context, side: ShadSheetSide.*, builder: (context) => ShadSheet(...))
. 
side
can be 
ShadSheetSide.top
, 
ShadSheetSide.right
, 
ShadSheetSide.bottom
, or 
ShadSheetSide.left
. Return a 
ShadSheet
with optional 
title
, 
description
, 
child
(body), and 
actions
. Use 
constraints
(e.g. 
BoxConstraints(maxWidth: 512)
for left/right) to limit width or height.
Sheet组件扩展了对话框模式，可从屏幕边缘展示内容。使用
showShadSheet(context: context, side: ShadSheetSide.*, builder: (context) => ShadSheet(...))
调用。
side
参数可选值为
ShadSheetSide.top
、
ShadSheetSide.right
、
ShadSheetSide.bottom
或
ShadSheetSide.left
。返回的
ShadSheet
可配置可选的
title
、
description
、
child
（主体内容）和
actions
参数。使用
constraints
（例如左右侧边面板设置
BoxConstraints(maxWidth: 512)
）来限制宽度或高度。

Basic (right side)

基础示例（右侧面板）

dart
showShadSheet(
  side: ShadSheetSide.right,
  context: context,
  builder: (context) => ShadSheet(
    constraints: const BoxConstraints(maxWidth: 512),
    title: const Text('Edit Profile'),
    description: const Text(
      "Make changes to your profile here. Click save when you're done",
    ),
    child: Padding(
      padding: const EdgeInsets.symmetric(vertical: 20),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        spacing: 16,
        children: profile
            .map(
              (p) => Row(
                children: [
                  Expanded(
                    child: Text(
                      p.title,
                      textAlign: TextAlign.end,
                      style: theme.textTheme.small,
                    ),
                  ),
                  const SizedBox(width: 16),
                  Expanded(
                    flex: 5,
                    child: ShadInput(initialValue: p.value),
                  ),
                ],
              ),
            )
            .toList(),
      ),
    ),
    actions: const [
      ShadButton(child: Text('Save changes')),
    ],
  ),
);
dart
showShadSheet(
  side: ShadSheetSide.right,
  context: context,
  builder: (context) => ShadSheet(
    constraints: const BoxConstraints(maxWidth: 512),
    title: const Text('Edit Profile'),
    description: const Text(
      "Make changes to your profile here. Click save when you're done",
    ),
    child: Padding(
      padding: const EdgeInsets.symmetric(vertical: 20),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        spacing: 16,
        children: profile
            .map(
              (p) => Row(
                children: [
                  Expanded(
                    child: Text(
                      p.title,
                      textAlign: TextAlign.end,
                      style: theme.textTheme.small,
                    ),
                  ),
                  const SizedBox(width: 16),
                  Expanded(
                    flex: 5,
                    child: ShadInput(initialValue: p.value),
                  ),
                ],
              ),
            )
            .toList(),
      ),
    ),
    actions: const [
      ShadButton(child: Text('Save changes')),
    ],
  ),
);

All sides

全侧边支持

Use 
side: ShadSheetSide.top
, 
ShadSheetSide.bottom
, 
ShadSheetSide.left
, or 
ShadSheetSide.right
in 
showShadSheet
. For left/right sheets pass 
constraints: const BoxConstraints(maxWidth: 512)
to the 
ShadSheet
so content doesn’t stretch full width.
在
showShadSheet
中使用
side: ShadSheetSide.top
、
ShadSheetSide.bottom
、
ShadSheetSide.left
或
ShadSheetSide.right
来指定面板位置。对于左侧/右侧面板，需为
ShadSheet
传入
constraints: const BoxConstraints(maxWidth: 512)
，避免内容拉伸至全屏宽度。