ARTICLE DETAIL

资讯详情

深耕网站建设、视觉设计与SEO优化的一线实战洞察。

Terminal.Gui TableView 深度指南:从数据源绑定、多选模型到树形表格的完整实战

Terminal.Gui TableView 深度指南:从数据源绑定、多选模型到树形表格的完整实战 UI组件跨平台桌面应用【免费下载链接】Terminal.GuiCross Platform Terminal UI toolkit for .NET项目地址https://gitcode.com/gh_mirrors/te/Terminal.Gui点击查看免费下载TableView 是 Terminal.Gui 中用于展示无限大小表格数据的核心视图控件它本身不持有任何数据而是通过ITableSource接口桥接任意数据模型并内置键盘/鼠标导航、多单元格矩形选区、列级样式定制与复选框列。阅读本文后你将掌握如何用DataTableSource、EnumerableTableSourceT、TreeTableSourceT驱动表格如何编程式读写选择状态、定制列样式与渲染外观以及如何通过事件响应用户操作。以下内容以官方文档 docfx/docs/tableview.md 为骨架并结合仓库源码Terminal.Gui/Views/TableView 目录展开讲解。TableView 在终端中的实际渲染效果表头、网格线与单元格选区动图来自仓库 docfx 文档资源数据源Data SourcesTableView不拥有数据。它只负责把Table属性上挂载的ITableSource渲染出来因此你可以把任何数据模型DataTable、对象集合、CSV、数据库查询结果等适配到表格上。ITableSource核心接口接口定义在 Terminal.Gui/Views/TableView/ITableSource.cs实现它即可把任意数据模型桥接进 TableViewpublic interface ITableSource { int Rows { get; } int Columns { get; } string [] ColumnNames { get; } object this [int row, int col] { get; } }从源码可以看出TableView 只通过这 4 个成员访问数据Rows/Columns决定表格尺寸ColumnNames提供表头文本索引器this[row, col]按 (行, 列) 返回单元格对象。这也是 TableView 能渲染无限大小数据的根本——它只按需读取可见区域附近的单元格。内置实现一览仓库在 Terminal.Gui/Views/TableView 下提供了多个现成实现类适用场景DataTableSource包装System.Data.DataTable见 DataTableSource.csEnumerableTableSourceT用 lambda 把对象集合投影为列见 EnumerableTableSource.csListTableSource把IList包装成多列布局TreeTableSourceT为行增加展开/折叠的树形行为见 TreeTableSource.cs示例一包装 DataTableDataTableSource是可变包装器源码注释明确说明允许修改被包装的DataTable适合动态变化的数据DataTable dt new (); dt.Columns.Add (Name); dt.Columns.Add (Age, typeof (int)); dt.Rows.Add (Alice, 30); dt.Rows.Add (Bob, 25); TableView tv new () { Table new DataTableSource (dt) };其实现非常直接DataTableSource.csRows/Columns直接取自DataTable的行列计数ColumnNames取各DataColumn的Caption索引器透传DataTable.Rows[row][col]。示例二对象集合投影EnumerableTableSourceT把任意对象集合变成表格列由字典中的 getter lambda 定义。注意源码中的语义集合元素在构造时被冻结为数组快照data.ToArray()但元素对象的属性值允许后续变化TableView tv new () { Table new EnumerableTableSourceProcess ( Process.GetProcesses (), new Dictionarystring, FuncProcess, object () { { ID, p p.Id }, { Name, p p.ProcessName }, { Threads, p p.Threads.Count }, }) };这种模式下列的取值是延迟计算的this[row, col]通过_lambdas[ColumnNames[col]](_data[row])动态求值EnumerableTableSource.cs因此表格可以实时反映对象属性的最新状态。示例三手写 CSV 解析没有现成的 CSV 源可以直接构造DataTable再包装DataTable dt new (); string [] lines File.ReadAllLines (filename); foreach (string h in lines [0].Split (,)) { dt.Columns.Add (h); } foreach (string line in lines.Skip (1)) { dt.Rows.Add (line.Split (,)); } TableView tv new () { Table new DataTableSource (dt) };仓库中的TableView.BuildDemoDataTableTableView.cs也展示了类似思路它生成含字符串、日期、整数、浮点、DBNull、Unicode 等多类型列的演示数据可用于快速验证 TableView 的渲染能力。提示TableView构造函数接受可选参数TableView(ITableSource table)也可用无参构造后赋值Table属性。赋值Table属性时会自动重置选择SetSelection(0,0,false)并触发重绘TableView.cs。选择模型Selection ModelTableView 实现了IValueTableSelection?把光标 所有扩展选区打包成一个完整的值暴露出来方便以数据驱动方式读写选择状态。关键类型类型说明TableSelection不可变快照SelectedCellPointRegionsIReadOnlyListTableSelectionRegion定义见 TableSelection.csTableSelectionRegion一个连续矩形选区含Origin选区的起始角、Rectangle选区范围与IsExtended定义见 TableSelectionRegion.csValue属性当前TableSelection?。为null表示未设置表格或选择被清空从 TableSelection.cs 源码可知非空TableSelection一定带有非空SelectedCell导航锚点Regions为空表示只有光标单元格被选中。TableSelection还实现了IEquatableTableSelection值相等比较基于SelectedCell与各Region这保证了重复设置相同选择不会触发多余的重绘与事件。SelectedCell活动单元格SelectedCell是当前活动单元格导航锚点类型为Point其中X 列索引、Y 行索引。读取方式tv.Value!.SelectedCell。编程移动光标用SetSelection (col, row, extend)扩展方法签名为SetSelection(int col, int row, bool extendExistingSelection, ICommandContext? ctx null)实现见 TableView.Selection.cs。源码中该方法的几个关键行为值得注意会自动把光标吸附到最近的可见列隐藏列会被跳过当extendExistingSelection true且MultiSelect true时会在旧光标与新位置之间创建/延伸矩形选区而不是简单移动通过GetNearestVisibleColumn保证光标永远落在可见列上。多选Multi-SelectionMultiSelect默认为true用户可创建矩形选区Shift方向键—— 从光标处向新位置延伸出一个选区CtrlClick—— 把点击的单元格并入选择unionSpaceCommand.ToggleExtend—— 切换当前单元格的IsExtended状态CtrlA—— 全选IsExtended true的扩展选区会在键盘导航中持久保留非扩展选区在光标移动时被清空。这个语义在 TableView.Selection.cs 的ClearMultiSelectedRegions(keepToggledSelections)中实现清空时只保留IsExtended为真的区域。从源码看ToggleExtendTableView.Selection.cs对三种触发方式做了区分键盘Space若光标所在单元格已有扩展区域则取消扩展toggle OFF否则标记为扩展toggle ON鼠标 CtrlClick对目标单元格执行 union已选中则移除未选中则加入并保留原光标位置鼠标 AltClick以光标为锚点向点击单元格延伸矩形选区。FullRowSelect整行选择FullRowSelect true时不再按单元格选择而是整个行被选中。此时GetAllSelectedCells ()与IsSelected ()会把光标行的所有列都报告为已选中见 TableView.Selection.cs 的实现分支。技巧 —— FullRowSelect 下的 Home/End 重绑定默认情况下Home/End会移动到当前行的首/末列MoveCursorToStartOfRow/MoveCursorToEndOfRow。整行选择模式下把它们重绑定为Command.Start/Command.End跳到表格首/末行往往更实用。这也是UICatalogRunnable处理其场景列表时采用的模式tableView.KeyBindings.Remove (Key.Home); tableView.KeyBindings.Add (Key.Home, Command.Start); tableView.KeyBindings.Remove (Key.End); tableView.KeyBindings.Add (Key.End, Command.End);值得补充的是MoveCursorToStartOfTable/MoveCursorToEndOfTable在FullRowSelect开启时只移动行保持当前列避免不必要的水平滚动TableView.Selection.cs。读取选择状态// 活动单元格位置 Point selectedCell tv.Value!.SelectedCell; // (col, row) // 所有被选中单元格的坐标 IEnumerablePoint cells tv.GetAllSelectedCells (); // 判断某个单元格是否被选中 bool sel tv.IsSelected (col, row);GetAllSelectedCells的完整实现TableView.Selection.cs展示了选择语义存在多选区域时遍历区域包围盒内的单元格逐个判定FullRowSelect时整行计入否则至少包含光标单元格。IsSelected还遵循隐藏列不可选规则ColumnStyle.Visible false的列永远返回false。键盘与鼠标绑定Key Mouse Bindings默认键盘绑定按键命令/行为方向键光标移动一个单元格Shift方向键延伸选区PageUp / PageDown移动一页Home / End移动到当前行首/末列CtrlHome / CtrlEnd移动到首/末行ShiftHome/End/CtrlHome/CtrlEnd向行/表边界延伸选区CtrlA全选Command.SelectAllSpaceCommand.ToggleExtend—— 切换当前单元格的扩展状态从 TableView.cs 源码可见TableView 的静态DefaultKeyBindings还内置了Emacs 风格导航CtrlP上、CtrlN下、CtrlV下翻页并把Home/End绑定到Command.Start/Command.End基础层另提供 CtrlHome/CtrlEnd。注意这是一个进程级静态属性源码注释特别警告不要在并行单元测试中修改它。默认鼠标绑定鼠标事件命令单击Command.Activate—— 光标移动到点击的单元格CtrlClickCommand.ToggleExtend—— 把点击的单元格并入选区AltClickCommand.ToggleExtend—— 向点击单元格延伸矩形选区双击Command.Accept滚轮上/下/左/右滚动鼠标绑定在构造函数中注册TableView.cs滚轮上下映射为行滚动、左右映射为列滚动单击映射ActivateCtrl/Alt 组合映射ToggleExtend双击映射Accept。另外OnActivatedTableView.cs在处理鼠标激活时会先通过TryGetMouseCellHit把屏幕坐标换算成单元格坐标ScreenToCell并拒绝点击在表头、末行下方或末列右侧空白处的无效命中。自定义绑定TableView 复用标准的KeyBindings与MouseBindings基础设施。既可以覆盖静态的DefaultKeyBindings进程级影响所有实例也可以像上文 Home/End 示例那样修改单个实例的绑定。所有导航与选区扩展命令Command.Up/Down/Left/Right、Command.Start/End、Command.LeftStart/RightEnd、各*Extend命令、ToggleExtend、SelectAll等均在构造函数中通过AddCommand注册TableView.cs重绑定时只需把按键关联到这些既有命令即可。渲染与滚动Rendering ScrollingTableView 只渲染表格的可见部分。水平/垂直滚动通过ColumnOffset与RowOffset实现底层由Viewport支撑。表格渲染模型表头—— 列名可选上划线overline、下划线underline与垂直分隔线由TableStyle控制数据行—— 从RowOffset起逐行渲染直到填满视口列—— 从ColumnOffset起向右渲染每列宽度由内容宽度决定受MinCellWidth/MaxCellWidth与列级ColumnStyle约束TableView 类上的两个全局宽度属性TableView.csMaxCellWidth任何列渲染的最大字符数防止单列过长挤掉其他列默认DEFAULT_MAX_CELL_WIDTH 100MinCellWidth列的最小字符数。此外还有NullSymbolDBNull.Value的显示文本默认-与SeparatorSymbol不使用竖网格线时用于分隔单元格值的符号默认空格。TableStyle外观控制TableStyle定义见 TableStyle.cs集中了所有渲染开关属性默认值说明ShowHeaderstrue是否显示表头行ShowHorizontalHeaderOverlinetrue表头上方横线ShowHorizontalHeaderUnderlinetrue表头下方横线ShowVerticalCellLinestrue单元格之间的竖线ShowVerticalHeaderLinestrue表头之间的竖线ShowHorizontalBottomLinefalse最后一行下方的横线AlwaysShowHeadersfalse滚动时锁定表头ExpandLastColumntrue用最后一列填满剩余空间SmoothHorizontalScrollingtrue最小增量水平滚动InvertSelectedCellFirstCharacterfalse选中单元格首字符反色模拟光标RowColorGetternull整行自定义着色委托源码补充的细节SmoothHorizontalScrolling为true时向右滚动只增加显示新列所需的最小偏移可能在大列数 慢RepresentationGetter时变慢为false时滚动偏移直接跳到当前选中列等价于 PageRight 行为。ExpandLastColumn为false时末列右侧会绘制列结束线并留下不可选中的空白区。另有两个文档中未列出的实用成员HeaderScheme表头的基础Scheme为空时回退到视图方案与AlwaysUseNormalColorForVerticalCellLines即使FullRowSelect开启也强制用Scheme.Normal渲染竖线。EnsureCursorIsVisible编程移动光标后调用EnsureCursorIsVisible ()滚动视口使光标单元格可见Update ()会自动完成这件事TableView.Selection.cs 中实现了对行方向与列方向视口的精细调整并区分平滑滚动与整列跳转两种模式。Update()的调用链TableView.cs会依次执行EnsureValidScrollOffsets → EnsureValidSelection → EnsureCursorIsVisible → SetNeedsDraw因此数据或样式变更后调用一次Update ()即可让表格自洽地刷新。列样式Column Styling用TableStyle.ColumnStyles按列索引定制样式tv.Style.ColumnStyles [2] new ColumnStyle { Alignment Alignment.End, MaxWidth 20, MinWidth 5, Format C2, // 货币格式 ColorGetter args args.CellValue is int v v 0 ? new Scheme () { Normal new (Color.Red, Color.Black) } : null };TableStyle提供两个便捷入口GetColumnStyleIfAny(col)只读查询GetOrCreateColumnStyle(col)不存在时自动创建TableStyle.cs。ColumnStyle 属性全解ColumnStyle.cs 定义的完整属性如下属性说明Alignment列默认文本对齐方式AlignmentGetter按单元格值返回对齐方式的委托覆盖AlignmentColorGetter按单元格返回Scheme的委托返回 null 用默认HeaderColorGetter按上下文返回表头Scheme的委托返回 null 回退到TableStyle.HeaderScheme或视图默认方案RepresentationGetter自定义object→string转换委托未设置时用object.ToString()FormatIFormattable.ToString的格式字符串如yyyy-MM-dd、C2MaxWidth列最大宽度字符默认TableView.DEFAULT_MAX_CELL_WIDTH100超过表级MaxCellWidth时被忽略MinWidth列最小宽度字符大于MaxWidth或表级MaxCellWidth时被忽略MinAcceptableWidth列的柔性下限宽度默认DEFAULT_MIN_ACCEPTABLE_WIDTH用于按可用空间灵活伸缩Visible是否隐藏该列影响渲染与可选性MaxWidth 0时恒为falseTruncationIndicator内容超宽时追加的省略号文本默认Glyphs.HorizontalEllipsis…设为 null/空串则静默裁剪从 ColumnStyle.cs 的GetRepresentation实现可以看清优先级先应用Format要求值是IFormattable否则用RepresentationGetter最终回退object.ToString()。GetAlignment则优先AlignmentGetter否则用静态Alignment。复选框列Checkbox Columns用CheckBoxTableSourceWrapperByIndex按行索引或CheckBoxTableSourceWrapperByObjectT按对象属性给任意ITableSource增加一个复选框列。这两种包装器都继承自 CheckBoxTableSourceWrapper.cs 中的抽象基类构造时会自动拦截 Space 键与单元格激活事件来实现勾选逻辑。// 按行索引 CheckBoxTableSourceWrapperByIndex checkSrc new (tv, tv.Table!); tv.Table checkSrc; // 读取已勾选的行 HashSetint checked checkSrc.CheckedRows;// 按对象属性双向绑定 CheckBoxTableSourceWrapperByObjectMyObj checkSrc new ( tv, enumSource, obj obj.IsSelected, (obj, val) obj.IsSelected val ); tv.Table checkSrc;交互行为Space切换所选行的勾选状态点击复选框列表头可全选/全不选设置UseRadioButtons true则退化为单选单行勾选行为。从基类源码还可自定义渲染符号CheckedRune勾选符默认Glyphs.CheckStateChecked、UnCheckedRune未勾选符、以及单选模式下的RadioCheckedRune/RadioUnCheckedRune。树形表Tree TablesTreeTableSourceT把TreeViewT的展开/折叠能力与 TableView 的列渲染结合起来实现可展开行的表格TreeViewFileSystemInfo tree new () { TreeBuilder new DelegateTreeBuilderFileSystemInfo ( d d is DirectoryInfo dir ? dir.GetFileSystemInfos () : [], d d is DirectoryInfo), AspectGetter f f.Name }; tree.AddObject (new DirectoryInfo (/)); TreeTableSourceFileSystemInfo src new ( tv, Name, tree, new Dictionarystring, FuncFileSystemInfo, object () { { Size, f f is FileInfo fi ? fi.Length : 0 }, { Modified, f f.LastWriteTime } }); tv.Table src;从 TreeTableSource.cs 源码看其工作方式行数动态变化Rows取自_tree.BuildLineMap().Count即展开状态下的可见行数第 0 列渲染树结构this[row, 0]走GetColumnZeroRepresentationFromTree输出分支线、展开/折叠符号与节点文本后续列才走 lambda 取值构造参数firstColumnName指定第 0 列树列的列名subsequentColumns是附加列字典源码要求传入的TreeViewT应是新建视图、不要加入其他父容器生命周期实现IDisposableDispose时反注册事件并释放内部 TreeView。交互上当树列获得焦点时左/右方向键分别折叠/展开节点。注意TreeTableSource只负责在第 0 列渲染树形结构不会渲染TreeView.CheckboxMode的复选框。若需要复选框树形表请用CheckBoxTableSourceWrapperByIndex或CheckBoxTableSourceWrapperByObjectT包装TreeTableSource参见上文复选框列一节。事件EventsTableView 遵循标准的IValueT与View事件模式事件触发时机ValueChangingValue变更前触发设Handled true可取消变更ValueChangedValue变更后触发用于响应选择变化Accepted用户双击单元格或按下 Accept 键Activating用户单击单元格Command.Activate从 TableView.Selection.cs 的Valuesetter 实现可以看到完整链路ValueChanging事件可被Handled取消 → 写入新值并同步内部光标状态SyncCursorFromValue→ 触发OnValueChanged与ValueChanged同时派发未类型化的ValueChangedUntyped。因此订阅ValueChanged是响应一切选择变化光标移动、选区延伸、全选、清空的统一入口。示例响应选择变化tv.ValueChanged (sender, e) { if (e.NewValue is { } sel) { statusBar.Text $Row {sel.SelectedCell.Y}, Col {sel.SelectedCell.X}; } };注意e.NewValue为null的场景未设置表格或选择被清空因此示例用模式匹配is { }过滤空值。示例处理单元格激活tv.Accepted (sender, e) { Point selectedCell tv.Value!.SelectedCell; object cellValue tv.Table! [selectedCell.Y, selectedCell.X]; MessageBox.Query (Cell, $Value: {cellValue}, OK); };延伸阅读官方文档docfx/docs/tableview.md控件主实现TableView.cs含命令注册、鼠标绑定、BuildDemoDataTable选择与光标逻辑TableView.Selection.cs、TableSelection.cs、TableSelectionRegion.cs渲染样式TableStyle.cs、ColumnStyle.cs数据源与包装器DataTableSource.cs、EnumerableTableSource.cs、ListTableSource.cs、TreeTableSource.cs、CheckBoxTableSourceWrapper.cs实战场景UICatalog 示例中的 TableEditor.cs 与 TableViewTest.cs 展示了 TableView 在真实应用中的用法。赞分享UI组件跨平台桌面应用【免费下载链接】Terminal.GuiCross Platform Terminal UI toolkit for .NET项目地址https://gitcode.com/gh_mirrors/te/Terminal.Gui点击查看免费下载相关推荐Formily Next 表格选择组件 SelectTable 完整实战指南单选、多选、树形数据与异步数据源Formily Next 表格选择组件 SelectTable 完整实战指南单选、多选、树形数据与异步数据源 SelectTable 是 formily/n前端UI组件Terminal.Gui TableView深度实战让终端表格轻松承载百万行数据Terminal.Gui TableView深度实战让终端表格轻松承载百万行数据 Terminal.Gui 是 .NET 平台下广受好评的跨平台终端 UI 工UI组件跨平台桌面应用FiftyOne 深度估计实战指南从多格式数据加载到多模型推理的完整工作流FiftyOne 深度估计实战指南从多格式数据加载到多模型推理的完整工作流 导读 深度估计Depth Estimation是计算机视觉中连接 2D 图像与人工智能计算机视觉数据集数据可视化数据标注模型评测创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表