shadcn_ui-select

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Shadcn UI — Select

Instructions

使用说明

ShadSelect<T>

displays a list of options triggered by a button. Provide

options

(list of

ShadOption<T>

or section headers like

Padding

with text),

placeholder

selectedOptionBuilder: (context, value) => ...

, and

onChanged

. Use

initialValue

or controlled state for selected value. Set

minWidth

maxWidth

maxHeight

as needed. For forms use

ShadSelectFormField<T>

with

id

validator

. Use

allowDeselection: true

to allow clearing the selection.

ShadSelect<T>

会在按钮触发后显示选项列表。需提供

options

（

ShadOption<T>

列表或类似带文本的

Padding

这类分段标题）、

placeholder

、

selectedOptionBuilder: (context, value) => ...

以及

onChanged

。可使用

initialValue

或受控状态来设置选中值。根据需要设置

minWidth

maxWidth

maxHeight

。表单场景下请使用带

id

和

validator

的

ShadSelectFormField<T>

。设置

allowDeselection: true

可允许清除选中项。

Basic

基础用法

dart

final fruits = {'apple': 'Apple', 'banana': 'Banana', ...};

ShadSelect<String>(
  placeholder: const Text('Select a fruit'),
  options: [
    Padding(
      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
      child: Text(
        'Fruits',
        style: theme.textTheme.muted.copyWith(
          fontWeight: FontWeight.w600,
          color: theme.colorScheme.popoverForeground,
        ),
        textAlign: TextAlign.start,
      ),
    ),
    ...fruits.entries.map((e) => ShadOption(value: e.key, child: Text(e.value))),
  ],
  selectedOptionBuilder: (context, value) => Text(fruits[value]!),
  onChanged: print,
)

dart

final fruits = {'apple': 'Apple', 'banana': 'Banana', ...};

ShadSelect<String>(
  placeholder: const Text('Select a fruit'),
  options: [
    Padding(
      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
      child: Text(
        'Fruits',
        style: theme.textTheme.muted.copyWith(
          fontWeight: FontWeight.w600,
          color: theme.colorScheme.popoverForeground,
        ),
        textAlign: TextAlign.start,
      ),
    ),
    ...fruits.entries.map((e) => ShadOption(value: e.key, child: Text(e.value))),
  ],
  selectedOptionBuilder: (context, value) => Text(fruits[value]!),
  onChanged: print,
)

Form field

表单字段

dart

ShadSelectFormField<String>(
  id: 'email',
  minWidth: 350,
  initialValue: null,
  options: verifiedEmails
      .map((email) => ShadOption(value: email, child: Text(email)))
      .toList(),
  selectedOptionBuilder: (context, value) =>
      value == 'none' ? const Text('Select a verified email to display') : Text(value),
  placeholder: const Text('Select a verified email to display'),
  validator: (v) {
    if (v == null) return 'Please select an email to display';
    return null;
  },
)

dart

ShadSelectFormField<String>(
  id: 'email',
  minWidth: 350,
  initialValue: null,
  options: verifiedEmails
      .map((email) => ShadOption(value: email, child: Text(email)))
      .toList(),
  selectedOptionBuilder: (context, value) =>
      value == 'none' ? const Text('Select a verified email to display') : Text(value),
  placeholder: const Text('Select a verified email to display'),
  validator: (v) {
    if (v == null) return 'Please select an email to display';
    return null;
  },
)

With search

带搜索功能

Use

ShadSelect.withSearch

. Pass

onSearchChanged

searchPlaceholder

, and filter options in state (e.g. wrap options in

Offstage(offstage: !filtered.containsKey(key), child: ShadOption(...))

to avoid focus loss when results change).

使用

ShadSelect.withSearch

。传入

onSearchChanged

、

searchPlaceholder

，并在状态中过滤选项（例如，将选项包裹在

Offstage(offstage: !filtered.containsKey(key), child: ShadOption(...))

中，避免结果变化时失去焦点）。

Multiple

多选功能

Use

ShadSelect.multiple

. Pass

selectedOptionsBuilder: (context, values) => ...

onChanged

, and optionally

allowDeselection: true

closeOnSelect: false

to keep popover open after selection.

使用

ShadSelect.multiple

。传入

selectedOptionsBuilder: (context, values) => ...

、

onChanged

，还可选择设置

allowDeselection: true

、

closeOnSelect: false

，使选中后保持弹出框打开状态。

Additional resources

额外资源

Scrollable option lists (grouped sections) and full search/multiple examples: reference.md.

可滚动选项列表（分组分段）以及完整的搜索/多选示例：reference.md。