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

文章目录

• Widget和回调函数
• • 1.导入模块
  • 2.添加Widget与事件
  • • 2.1创建Button
    • 2.2 回调事件
    • 2.3 界面布局（Layout）
  • 3.运行结果

Widget和回调函数

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

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

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

1.导入模块

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

import open3d.visualization.gui as gui

 
 

 
 
1

2.添加Widget与事件

import open3d.visualization.gui as gui

class App:
count = 0
def 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.5
push_button.vertical_padding_em = 0
push_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）并修改文本框中的文字。