Lumino小部件系统完全指南：从基础Widget到复杂布局

Lumino小部件系统完全指南：从基础Widget到复杂布局

【免费下载链接】luminoLumino is a library for building interactive web applications项目地址: https://gitcode.com/gh_mirrors/lu/lumino

Lumino是一个用于构建交互式Web应用的强大库，其核心在于灵活的小部件（Widget）系统和布局管理能力。本文将带你从基础Widget开始，逐步掌握Lumino的布局系统，轻松构建出专业级的Web界面。

什么是Lumino Widget？

Widget是Lumino应用的基本构建块，所有可见的UI元素都是Widget的实例。Widget可以是简单的按钮、文本框，也可以是复杂的面板组合。

在Lumino中创建一个基础Widget非常简单，只需继承Widget类并实现必要的方法：

class ContentWidget extends Widget { static menuFocus: ContentWidget | null; constructor(name: string) { super({ node: ContentWidget.createNode() }); this.setFlag(Widget.Flag.DisallowLayout); // 小部件初始化逻辑 } // 其他方法实现... }

基础布局管理器

Lumino提供了多种布局管理器，帮助你组织和排列Widget。最常用的基础布局包括：

1. BoxPanel布局

BoxPanel允许你在水平或垂直方向上排列Widget，类似于CSS的Flexbox布局。

2. AccordionPanel布局

AccordionPanel提供了可折叠的面板布局，适合展示分类内容：

import { AccordionPanel, BoxPanel, Widget } from '@lumino/widgets'; // 创建内容小部件 const r1 = new ContentWidget('Red'); const b1 = new ContentWidget('Blue'); const g1 = new ContentWidget('Green'); // 创建并配置AccordionPanel const accordion = new AccordionPanel(); accordion.addWidget(r1); accordion.addWidget(b1); accordion.addWidget(g1); // 将AccordionPanel添加到主布局 const main = new BoxPanel(); main.addWidget(accordion); Widget.attach(main, document.body);

高级布局：DockPanel详解

DockPanel是Lumino中最强大的布局管理器之一，它允许你创建复杂的多面板界面，支持面板的拖拽、拆分和组合。

创建DockPanel

import { DockPanel, Widget } from '@lumino/widgets'; // 创建DockPanel实例 let dock = new DockPanel(); // 创建内容小部件 let r1 = new ContentWidget('Red'); let b1 = new ContentWidget('Blue'); let g1 = new ContentWidget('Green'); let y1 = new ContentWidget('Yellow'); // 添加小部件到DockPanel dock.addWidget(r1); dock.addWidget(b1, { mode: 'split-right', ref: r1 }); dock.addWidget(y1, { mode: 'split-bottom', ref: b1 }); dock.addWidget(g1, { mode: 'split-left', ref: y1 }); // 将DockPanel附加到文档 Widget.attach(dock, document.body);

DockPanel的插入模式

DockPanel支持多种插入模式，让你可以灵活地组织界面：

• split-right- 在参考小部件右侧拆分
• split-left- 在参考小部件左侧拆分
• split-top- 在参考小部件上方拆分
• split-bottom- 在参考小部件下方拆分
• tab-before- 在参考小部件前添加标签
• tab-after- 在参考小部件后添加标签

保存和恢复布局

DockPanel提供了保存和恢复布局的功能，这对于需要记住用户界面状态的应用非常有用：

// 保存布局 let savedLayout = dock.saveLayout(); // 恢复布局 dock.restoreLayout(savedLayout);

实际应用示例：数据网格布局

结合Datagrid和DockPanel，我们可以创建一个功能丰富的数据展示界面：

import { DockPanel, StackedPanel, Widget } from '@lumino/widgets'; // 创建数据网格小部件 function createDataGridWidget(title: string): Widget { const datagrid = new DataGrid({ /* 配置选项 */ }); return createWrapper(datagrid, title); } // 创建DockPanel并添加数据网格 let dock = new DockPanel(); let wrapper1 = createDataGridWidget('基本数据'); let wrapper2 = createDataGridWidget('统计信息'); let wrapper3 = createDataGridWidget('趋势分析'); dock.addWidget(wrapper1); dock.addWidget(wrapper2, { mode: 'split-right', ref: wrapper1 }); dock.addWidget(wrapper3, { mode: 'split-bottom', ref: wrapper1 }); Widget.attach(dock, document.body);

小部件事件处理

Lumino Widget提供了丰富的事件系统，让你可以响应用户交互：

// 监听小部件添加请求 dock.addRequested.connect((sender: DockPanel, arg: TabBar<Widget>) => { let w = new ContentWidget('新面板'); sender.addWidget(w, { ref: arg.titles[0].owner }); });

自定义Widget样式

虽然Lumino提供了默认样式，但你可以通过CSS自定义Widget的外观。每个Widget都有一个node属性，可以用来添加自定义类和样式：

// 在Widget构造函数中添加自定义类 this.addClass('my-custom-widget');

然后在CSS中定义样式：

.my-custom-widget { background-color: #f0f0f0; border-radius: 4px; padding: 8px; }

总结与下一步

通过本文，你已经了解了Lumino小部件系统的核心概念和布局管理能力。从基础的Widget创建到复杂的DockPanel布局，Lumino提供了构建现代Web应用所需的一切工具。

要深入学习Lumino，建议查看以下资源：

• 官方文档：docs/source/index.rst
• 示例代码：examples/
• 小部件源码：packages/widgets/src/

现在，你已经具备了使用Lumino构建交互式Web应用的基础知识，开始创建你自己的应用吧！

【免费下载链接】luminoLumino is a library for building interactive web applications项目地址: https://gitcode.com/gh_mirrors/lu/lumino