python ipyvuetify关闭浮动对话框ipywidgets

问题描述

我正在使用ipyvutify尝试编写出色的GUI。看起来很棒，但是对于从未使用过HTML和CSS的人来说有点困难。

以下是完整的代码，当单击“打开对话框”按钮时，会生成一个浮动对话框。

我想理解使用ipyvuetify打开和关闭浮动对话框的功能，并且使用以下代码，即使代码有效（无效），我也无法弄清楚。

目标是打开一个带有按钮的对话框，并且对话框内部还有一个CLOSE按钮（以及其他按钮）

import ipyvuetify as v 
lorum_ipsum= 'loren loren'


#oepn dialog:
v_btn_OTHER   = v.Btn(class_='mx-2 light-blue darken-1',children=['OTHER'])
def on_click_v_btn_OPEN (widget,event,data):
    exampledialog.value = True
    pass
v_btn_OPEN.on_event('click',on_click_v_btn_OPEN)

# CLOSE BUTTON INSIDE THE DIALOG
v_btn_CLOSE   = v.Btn(class_='mx-2 light-blue darken-1',children=['CLOSE'])
def on_click_v_btn_CLOSE (widget,data):
    exampledialog.value = False
v_btn_CLOSE.on_event('click',on_click_v_btn_CLOSE)

# ACTION BUTTON INSIDE THE DIALOG
v_btn_OTHER   = v.Btn(class_='mx-2 light-blue darken-1',children=['OTHER'])
def on_click_v_btn_OTHER (widget,data):
    # code to open facebook.com in a new tab
    pass
v_btn_OTHER.on_event('click',on_click_v_btn_OTHER)

# THE DIALOG
exampledialog = v.Dialog(width='500',v_slots=[{
        'name': 'activator','variable': 'x','children': v.Btn(v_on='x.on',color='success',dark=True,children=[
            'OTHER dialog'
        ]),}],children=[
        v.Card(children=[
            v.CardTitle(class_='headline gray lighten-2',primary_title=True,children=[
                "Lorem ipsum"
            ]),v.CardText(children=[
                lorum_ipsum,v.TextField(label='Label',placeholder='Placeholder'),v_btn_CLOSE,v_btn_OTHER,]),])
])

# VISUALIZATION
display(v.Layout(children=[v_btn_OPEN,exampledialog]))

如果将以上代码粘贴到一个单元格中，您将意识到我想了解的以下奇怪行为。

如果您在可视化部分中未显示exampledialog，则OTHER按钮将不起作用。仅当exampledialog是Layout子级的一部分时，该按钮才起作用。除了对话框的按钮本身在第一次运行后便消失了。

这真是一件奇怪的事。有人可以解释一下吗。

通常的问题是如何从对话框外部的按钮打开和关闭对话框。 dialog.value = True似乎真的不起作用

解决方法

除了第一个按钮的变量名中的小错字外，它看起来都是正确的。

当您在对话框中将“其他”按钮用作关闭按钮时，第一个按钮应为“ v_btn_OPEN”而不是“ v_btn_OTHER”。

现在，您的问题：

必须在可视化部分中包含示例对话框： exampledialog需要添加到[DOM] [1]中，否则对于客户端来说根本不存在。使用ipyvuetify可以通过将元素输出到客户端来完成。仅将它们作为python（服务器端）对象是不够的。

[1]：https://www.w3.org/TR/WD-DOM/introduction.html#:~:text=%20Document%20Object%20Model%20(DOM,document%20is%20accessed% 20 %% 20。

第一次运行时，对话框本身的

按钮本身消失：：这似乎与ipyvuetify中当前的错误有关，就像您所遇到的情况一样。在修正此错误之前，当前建议的解决方案是通过在元素外部按按钮并通过“ on_click_v_btn_OPEN”功能将它们链接在一起来使用的解决方法。

ipywidgets python voila vuetify.js