组件 components

  1. ipywidgets 包

    • 与 ipython kernel 的交互接口
  2. 一个 extension 扩展（插件）

状态属性

有哪些：

  • 通过 your_widget.keys 获得

设置：

  • 可以通过 init 构造方法，以关键字参数的方式传入

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

属性连接

参考：

连接：

  • 通过 widgets.jslink 或 link 实现

断开：

  • widgets.unlink

事件

参考：

属性连接

kernel 端 traitlets 属性连接

工具：

  1. traitlets.link(source, target)

    • 双向连接

      1
2
3

      l = widgets.link((sliders1, 'value'), (slider2, 'value'))
# 取消连接
l.unlink()

  2. traitlets.dlink(source, target)

    • 单向连接 directional_link

      • source 更新， target 也被更新
      • 但是 target 更新， source 不会被更新

html 端（js）建立属性连接

工具：

  • widgets.jslink(source, target)

  • widgets.jslink(source, target)

    • 例子：

      1
2
3

      dl = widgets.jsdlink((source_range, 'value'), (target_range1, 'value'))
# 取消连接
dl.unlink

回调函数机制（kernel 端）

  1. 类似 button: button.on_clock(callable)

    • callable 入参： button

  2. 类似 traitlets: widget.observe(callable, names='prop_name')

    • collable 的入参： change –> {'old': …, 'new': …, 'name': …, 'owner': …}

连续更新

方法：

  • 通过 widget 的 continuous_update 属性控制

潜在的问题：

  • 如数值选择条 IntSlider, 更新太快，导致关联的 callback 需要大量计算，负载太高

解决连续更新负载问题方法

Debouncing (消除抖动)方法

参考：

思路：

  • 只有停止更新一定事件后，才会真的触发 callback 计算

特点：

  • 停止计算，只有不再新一段时间后，再计算
  • 缺点：不会计算
Throttling (节流)方法

参考：

思路：

  • 限制计算的频率，多少秒计算一次

特点：

  • 降低了计算的频率，但是还在计算

style

参考：

注意：

  • widget.style 只放置与 layout 无关的类 css 属性
  • widget.layout 放置和布局有关的属性

设置方法

  1. 预置 style

    • eg: button.button_style 可以选择预先配置好的几种 style

  2. 具体 css 属性

    • 通过 widget.style.keys 查看存在的属性（可能不全）

    • 设置例子：

      1
2
3
4
5
6
7
8

      b3 = Button(description='Styled button', style=dict(
    font_style='italic',
    font_weight='bold',
    font_variant="small-caps",
    text_color='red',
    text_decoration='underline'
))
b3

不同 widget 支持的属性

注意：

  • widget 不同，拥有的 css 属性也不同

参考：