Widget和回调函数

书接上文，我们创建了一个窗口用来显示三维模型，除了可以在窗口中拖动，没有其他交互。

o3d.gui中提供了很多的方便易用Widget，可以构建菜单栏，按钮，文本框，文件拾取器等，完成复杂的功能与交互。

这次我们创建一个按钮和文本框，设置按钮的点击事件弹出一个MessageBox。

1.导入模块

这次不需要加载模型和渲染，所以只用导入gui模块

import open3d.visualization.gui as gui

2.添加Widget与事件

import open3d.visualization.gui as guiclass App:count = 0def __init__(self):# 初始化gui.Application.instance.initialize()self.window = gui.Application.instance.create_window("Event and Widget", 300, 600)# 使用相对大小避免直接设置像素，因为不同显示器像素大小可能不同em = self.window.theme.font_size# 文本框和按钮self._push_edit = gui.TextEdit()push_button = gui.Button('...')push_button.horizontal_padding_em = 0.5push_button.vertical_padding_em = 0push_button.set_on_clicked(self._on_push_button)# 文本框和按钮水平布局push_button_layout = gui.Horiz()push_button_layout.add_child(gui.Label('Push Button'))push_button_layout.add_child(self._push_edit)push_button_layout.add_fixed(0.25*em)push_button_layout.add_child(push_button)# 总体垂直布局self.pannel = gui.Vert()self.pannel.add_fixed(0.5*em)self.pannel.add_child(push_button_layout)self.window.add_child(self.pannel)def _on_push_button(self):self.count += 1# 设置文本框文字self._push_edit.text_value = f'push count {self.count}'# 弹出消息框self.window.show_message_box('Push Info', 'Hello World!')def run(self):gui.Application.instance.run()if __name__ == "__main__":app = App()app.run()

2.1创建Button

创建一个Button是十分容易的。

btn = gui.Button(str)

str是显示在Button上的文本

创建好button之后，最好设置一下水平和垂直padding，否则显示会比较诡异。设置padding可以通过Button.horizontal_padding_em和Button.vertical_padding_em设置。

未设置：

设置horizontal_padding_em=0.5，vertical_padding_em=0

2.2 回调事件

按钮的回调事件通过Button.set_on_clicked()进行设置，函数原型为：

set_on_clicked(self, Callable[], None) -> None
处理该事件的函数没有参数也没有返回值。

所以我们代码中设置的回调函数是没有参数和返回的：

def _on_push_button(self) -> None

我们在这个事件中做了两件事，更新文本框的文字并且弹出一个消息框。文本框的文字可以直接通过gui.TextEdit.text_value访问和修改。弹出消息框需要调用主窗口self.window的show_message_box方法，该方法的两个参数分别是标题（title）和消息内容（message）。

self._push_edit.text_value = f'push count {self.count}'
self.window.show_message_box('Push Info', 'Hello World!')

2.3 界面布局（Layout）

最主要两种布局是水平布局gui.Horize()和垂直布局gui.Vert()。

add_child()来向布局中添加子控件;
add_fixed()添加一个固定填充来调整控件之间的距离;
add_stretch()添加空格来占用布局中的剩余空间;

在调整控件间距的过程中，如使用add_fixed()，最好用相对大小来调整距离，避免直接设置像素大小的距离，以免由于不同的显示器像素大小不同导致奇怪的效果。

相对大小可以通过em = self.window.theme.font_size来获得。

代码中有一个总体的垂直布局self.pannel，一个按钮的水平布局push_button_layout。按钮的布局中依次添加了文本控件gui.Label(text)，文本框，固定间距0.25*em和按钮。

将push_button_layout作为self.pannel的子控件添加到总体布局中，然后将self.pannel添加到窗口就完成了整个布局过程。

3.运行结果

Open3d版本：0.13.0

运行这个程序，你将得到一个带有按钮的界面，点击按钮会弹出消息框（Message Box）并修改文本框中的文字。

Open3D-GUI系列教程（二）添加控件与回调事件相关推荐

WP8.1学习系列(第二十章)——添加控件和处理事件
先决条件添加控件设置控件的名称设置控件属性创建事件处理程序新控件总结相关主题通过使用如按钮.文本框和组合框等控件,你可以创建应用的 UI. 下面将显示如何将控件添加到应用.处理控件时, ...
【第3版emWin教程】第50章 emWin6.x的AppWizard使用控件经典回调方式
教程不断更新中:第3版emWin教程和ThreadX GUIX教程开工,双管齐下,GUIX更新至第28章,emWin更新至第50章(2021-10-01) - uCOS & uCGUI &am ...
QT5系列教程二---基于qcustomplot的QT5 GUI串口收发绘图软件实现
QT5系列教程二---基于qcustomplot的QT5 GUI串口收发绘图软件实现结构 UI部分代码部分 step1:实现串口数据接受串口接受数据格式在`.pro`文件中添加`serialp ...
《zw版·Halcon-delphi系列原创教程》halconxlib控件列表
<zw版·Halcon-delphi系列原创教程>halconxlib控件列表 Halcon v11.01版,com控件,安装后,共有75个控件, 不过最重要的控件,只有两个, ...
WPF基础系列二：控件简介
控件简介文章目录控件简介前言一.控件二.控件类型三.控件详解 1.ContentControl 类 2.HeaderedContentControl 类 3.ItemsControl 类 ...
Xamarin XAML语言教程构建ControlTemplate控件模板 (二)
Xamarin XAML语言教程构建ControlTemplate控件模板 (二) (2)打开MainPage.xaml文件,编写代码,将构建的控件模板应用于ContentView中.代码如下: &l ...
鸡啄米vc++2010系列7（对话框：创建对话框类和添加控件变量）
前两讲中鸡啄米为大家讲解了如何创建对话框资源.创建好对话框资源后要做的就是生成对话框类了.鸡啄米再声明下,生成对话框类主要包括新建对话框类.添加控件变量和控件的消息处理函数等. 因为鸡啄米给大家的例程 ...
easyui treegrid php,Easyui在treegrid添加控件实例教程
最近看了一个easy感觉里面的树搞得还不错,虽然觉得让人有点不灵活的感觉,我们来说说怎么在树种添加控件效果本文主要介绍了Easyui在treegrid添加控件的实现方法,需要的朋友可以参考下,希望能帮 ...
【cocosStdio系列】之UI控件下
[cocosStdio系列]之UI控件下大家好,我是Lampard 今天与大家通过一个demo了解cocos给我们提供的各个UI控件 reference:<cocos2 ...

Open3D-GUI系列教程（二）添加控件与回调事件

文章目录