当前位置：首页 > news >正文

iTwin UI

news 2025/11/11 13:51:44

用例可参考

https://developer.bentley.com/samples/

AppUI

提供一系列 React 组件的框架，用于为 iTwin.js 应用程序构建用户界面。它将工作流程组织在“前台阶段”（frontstages）中，展示一个中心内容（通常是 iTwin.js 的 canvas），周围环绕着工具设置、工具栏、状态栏和小组件，以实现统一的外观和体验。

用户可以在运行时对这些小组件进行停靠、浮动、调整大小、移动等操作，从而根据个人喜好配置界面。

前台阶段的配置可以通过易于共享的 UiItemsProvider 完成，该提供程序可用于为特定工作流程构建 UI，然后在其他应用程序或前台阶段中复用。

Backstage

应用的主导航菜单，用于在不同前台阶段之间切换、打开叠加层或启动自定义命令。你可以使用 BackstageComposer 来设置一个“后台”，它会在应用左侧边缘显示一个叠加菜单。如下图所示

Content

应用程序展示的核心区域。
通常，这里呈现的是 iModel 的可视化渲染，但也可以是任意 React 组件。
内容区域可划分为多个网格区块，以便同时展示多个不同方面的信息。

Navigation Aid

辅助浏览视口（Viewport）内容

Frontstage

布局配置，用于定义应用程序中针对特定任务量身定制的页面。
你可以注册一个 FrontstageProvider 来定义自定义的前frontstage，如下

export class MainFrontstageProvider extends StandardFrontstageProvider {public static id: string = MainFrontstageId;public constructor(props: MainFrontstageProps) {super({...props.frontstageProps,id: MainFrontstageProvider.id,contentGroupProps: new DefaultContentGroupProvider(props.viewportOptions,props.viewCreatorOptions,props.blankConnectionViewStateOptions,),hideNavigationAid: false,cornerButton: undefined,usage: StageUsage.General,leftPanelProps: {size: 300,pinned: true,defaultState: StagePanelState.Open,resizable: true,},rightPanelProps: {size: 300,pinned: true,defaultState: StagePanelState.Open,resizable: true,},});}
}

Status Bar

用户界面中专用于显示应用程序当前状态信息的区域。
你可以使用 StatusBarComposer 在应用底部以页脚形式展示状态栏。

Stage Panel

交互式 UI 元素，最多包含两个面板区域，显示在应用程序的某一侧

Stage Panel Section

stage panel中专用于容纳多个小部件（widget）的区域。

Toolbar

一种可交互的 UI 元素，可让用户快速访问应用程序中常用的工具和操作。
你可以使用 ToolbarComposer 为特定用途及方向显示工具栏,比如漫游，居中等工具都是在这里

Tool Settings

用户界面中专用于显示与当前活动工具相关属性或信息的区域

UI Items Provider

一种向应用提供 UI 元素（如小部件、backstage、工具栏或状态栏项）的机制。
你可以注册一个 UiItemsProvider 来追加额外的元素。

export class DisplayStylesWidgetProvider implements UiItemsProvider {public readonly id: string = "ViewerOnly2dWidgetProvider";public provideWidgets(_stageId: string, _stageUsage: string, location: StagePanelLocation, _section?: StagePanelSection): ReadonlyArray<Widget> {const widgets: Widget[] = [];if (location === StagePanelLocation.Bottom) {widgets.push({id: "DisplayStylesWidget",label: "Display Styles Selector",defaultState: WidgetState.Open,content: <DisplayStylesWidget />,});}return widgets;}
}

已经封装好的Provider

ViewerNavigationToolsProvider

export interface DefaultNavigationTools {horizontal?: {rotateView?: boolean;panView?: boolean;fitView?: boolean;windowArea?: boolean;viewUndoRedo?: boolean;};vertical?: {walk?: boolean;toggleCamera?: boolean;setupWalkCamera?: boolean;};
}