Skip to content

Picker 选择器 ​

底部弹出的单列滚轮。支持候选项、索引钳制与工具栏。

契约源:lh-ui-core/specs/picker.json · 黄金用例:lh-ui-core/cases/picker.json(8 条,已翻译为 xUnit 测试)

基础用法 ​

声明式可见性:Visible 为 false 时不渲染任何内容;确认/取消后触发 Close, 宿主据此置 Visible 为 false。

9:41Picker 基础
取消选择确认
青花瓷粉彩瓷玲珑瓷

HTML 模拟预览(Windows / WinUI 3 外观),非真机渲染

csharp
var picker = new LhPicker
{
    Options = new[] { "青花瓷", "粉彩瓷", "玲珑瓷" },
    Value = 1,
    Title = "选择",
};
picker.ValueChange += index => { /* 滚轮停止后的选中索引 */ };
picker.Confirm += index => { /* 当前选中索引 */ };
picker.Close += () => picker.Visible = false;

picker.Visible = true;

索引钳制 ​

Value 越界时钳制到候选项范围内:负数取 0,大于候选项数 - 1 取最后一项。

csharp
Assert.Equal(0, LhPickerTokens.ClampIndex(-1, 3));   // 负数取 0
Assert.Equal(2, LhPickerTokens.ClampIndex(100, 3));  // 越界取最后一项

API ​

属性 ​

属性说明类型默认值
ValueChange滚轮停止且选中项变化时触发event Action<int>—
Confirm点击确认按钮时触发,携带当前选中索引event Action<int>—
Cancel点击取消按钮时触发event Action—
Close确认/取消后触发,宿主据此置 Visible 为 falseevent Action—
Visible是否显示;为 false 时不渲染任何内容boolfalse
Options候选项文本数组(单列)string[]?null
Value选中项索引(0 基);越界时钳制到候选项范围内int0
Title工具栏中间的标题string""
ConfirmText确认按钮文字string"确认"
CancelText取消按钮文字string"取消"

令牌对照 ​

令牌用途
picker.height面板高度
picker.toolbarHeight顶部工具栏高度(滚轮区高度 = 面板高度 - 工具栏高度)
picker.itemHeight候选项高度(中央指示器间距同此)
picker.itemFontSize候选项与工具栏字号
picker.borderRadius面板顶部圆角
color.background.default面板底色
color.background.overlay遮罩色
color.text.primary标题与候选项色
color.text.secondary取消按钮色
color.primary.default确认按钮色
color.border.lighter中央指示器线色
zIndex.modal / zIndex.modalBackdrop面板/遮罩层级

黄金用例对照 ​

cases/picker.json 的 8 条断言与 xUnit 测试的对应关系(tests/LhPickerTests.cs):

case id断言本地测试
confirm-emits-onconfirm-with-value确认携带当前选中索引Confirm_Emits_OnConfirm_With_Value
confirm-also-emits-onclose确认同时触发 onCloseConfirm_Also_Emits_OnClose
cancel-emits-oncancel取消触发 onCancelCancel_Emits_OnCancel
scroll-emits-onvaluechange滚轮停止触发 onValueChangeScroll_Emits_OnValueChange
clamp-negative-value-to-zero负数索引钳制到 0Clamp_Negative_Value_To_Zero
clamp-overflow-value-to-last越界索引钳制到最后一项Clamp_Overflow_Value_To_Last
title-renders-text标题按字号令牌渲染Title_Renders_Text
hidden-not-rendered不可见时不渲染任何内容Hidden_Not_Rendered

另有暗色专项:Dark_Colors_Come_From_Dark_Tokens / Dimensions_Are_Identical_In_Dark_Mode。 运行:cd lh-ui-windows && dotnet test。