IPython 简单组件#

IPython 包含了交互式小部件架构,它将在内核中运行的 Python 代码与在浏览器中运行的 JavaScript/HTML/CSS 结合起来。这些小部件允许用户以交互方式检查他们的代码和数据。

备注

什么是组件? 小部件(组件)是在浏览器中具有表示形式的、能触发事件的 Python 对象,通常表现为控件,如滑块、文本框等。

备注

组件可以用来做什么?

  • 你可以使用小部件为你的笔记本构建交互式图形用户界面。

  • 你还可以使用小部件在 Python 和 JavaScript 之间同步有状态和无状态信息。

import ipywidgets as widgets

使用 IPython 组件#

小部件有自己的 repr 表示,允许它们使用 IPython 的显示框架进行显示。

比如构造并返回 IntSlider 将自动显示该小部件(如下所示)。小部件显示在代码单元格下方的输出区域中。清除单元格输出也将移除小部件。

widgets.IntSlider()

你还可以使用 display(...) 明确地显示小部件。

from IPython.display import display
w = widgets.IntSlider()
display(w)

多次使用 display() 调用:如果你两次显示同一个小部件,前端的实例将彼此保持同步。尝试拖动下面的滑块,并观察上面的滑块。

display(w)

(IPython)为什么要两次显示相同的小部件?#

小部件在后端由单个对象表示。每次显示小部件时,都会在前端创建该对象的新表示。这些表示称为 视图

关闭小部件#

你可以通过调用其 close() 方法来关闭一个小部件。

from IPython.display import display
w = widgets.IntSlider()
w.close()
display(w)
IntSlider(value=0)

IPython 组件属性#

所有 IPython 小部件都遵循类似的命名方案。要读取小部件的值,可以查询其 value 属性。

w = widgets.IntSlider()
display(w)
w.value
0

同样地,要设置小部件的值,可以设置其 value 属性。

w = widgets.IntSlider()
w.value = 100
display(w)

keys#

除了 value,大多数小部件共享 keysdescriptiondisabled。要查看任何特定小部件的同步、有状态属性的完整列表,可以查询 keys 属性。

w.keys
['_dom_classes',
 '_model_module',
 '_model_module_version',
 '_model_name',
 '_view_count',
 '_view_module',
 '_view_module_version',
 '_view_name',
 'behavior',
 'continuous_update',
 'description',
 'description_allow_html',
 'disabled',
 'layout',
 'max',
 'min',
 'orientation',
 'readout',
 'readout_format',
 'step',
 'style',
 'tabbable',
 'tooltip',
 'value']

设置小部件属性初始值的简写#

在创建小部件时,可以通过将它们定义为小部件构造函数中的关键字参数来设置该小部件的一些或全部初始值(如下所示)。

widgets.Text(value='Hello World!', disabled=True)

链接两个相似的小部件#

如果你需要以两种不同的方式显示同一个值,你将不得不使用两个不同的小部件。与其尝试手动同步两个小部件的值,不如使用 linkjslink 函数将两个属性链接在一起(这两者的区别在 Widget Events 中讨论)。下面,两个小部件的值被链接在一起。

a = widgets.FloatText()
b = widgets.FloatSlider()
display(a, b)

mylink = widgets.jslink((a, 'value'), (b, 'value'))

解除小部件链接#

解除小部件的链接很简单。你所要做的就是在链接对象上调用 .unlink。尝试在解除链接后更改上面的一个小部件,看看它们是否可以独立更改。

a = widgets.FloatText()
b = widgets.FloatSlider()
mylink = widgets.link((a, 'value'), (b, 'value'))
mylink.unlink()
display(a, b)