python ipyvuetify 如何将多个小部件组合成一个类

如何解决python ipyvuetify 如何将多个小部件组合成一个类

使用 ipyvuetify，我必须在 Textfield 中重复使用一对 Textarea 和 ExpansionPanel。它们的交互是相互关联的，因为它们代表 DB 行中的两个字段。

是否可以创建一个自定义小部件，其中包含不同的嵌套 ipyvuetify 小部件，并允许作为单个对象与整个组交互，并且在调用时也像小部件一样呈现？

像这样：

import ipyvuetify as vue

Class customWidget():
    def __init__(self,titleText,bodyText):

        title = vue.TextField(class_='mb-n2',label='Label')
        title.value = titleText
        title.on_event('click.stop',None)
        openIn= vue.Btn(text=True,max_width='10px',children=[vue.Icon(children=['open_in_new'])])
        openIn.on_event('click.stop',None)


        note = vue.Textarea(class_='ma-0 pa-0 text-xs-caption',name='markerA',solo=True,elevation=0,outlined=True)
        note.value = bodyText

        panel = vue.ExpansionPanel(class_='ma-0 pa-0 text-xs-caption',children=[
            vue.ExpansionPanelHeader(class_='ma-0 pa-0 pl-5 pr-5',children=[title,openIn]),vue.ExpansionPanelContent(class_='ma-0 pa-0 text-xs-caption',children=[note]),])

        self.expansionPanel = vue.ExpansionPanels(v_model=[0],multiple=True,focusable=False,children=[panel])

解决方法

到目前为止，我找到的最简单的解决方案是让 customWidget 类继承自要显示的 ipyvuetify 小部件，并在构造函数中使用嵌套的其他小部件预填充它。

这非常有效，并且可以设置为即使在深度嵌套的结构中仍然可以访问每个元素。

注意不要覆盖 ipyvuetify 已经使用的属性名称。

在上面的例子中，我的解决方案是这样的：


import ipyvuetify as vue

class customWidget(vue.ExpansionPanels):

    def __init__(self,titleText,bodyText,**kwargs):

        children = []

        title = vue.TextField(
            class_ = 'mb-n2',label = 'Label'
        )
        title.value = titleText
        title.on_event('click.stop',None)


        openIn = vue.Btn(
            text = True,max_width = '10px',children = [
                vue.Icon(
                    children = ['open_in_new']
                )
            ]
        )
        openIn.on_event('click.stop',None)


        note = vue.Textarea(
            class_ = 'ma-0 pa-0 text-xs-caption',name = 'markerA',solo = True,elevation = 0,outlined = True
        )
        note.value = bodyText

        panel = vue.ExpansionPanel(
            class_ = 'ma-0 pa-0 text-xs-caption',children = [
                vue.ExpansionPanelHeader(
                    class_ = 'ma-0 pa-0 pl-5 pr-5',children = [
                        title,openIn
                    ]
                ),vue.ExpansionPanelContent(
                    class_ = 'ma-0 pa-0 text-xs-caption',children = [
                        note
                    ]
                ),]
        )

        # add elements to kwargs,this allows to still pass others via the instance call
        kwargs['v_model'] = [0]
        kwargs['children'] = [panel]
        kwargs['multiple'] = True
        kwargs['focusable'] = False
        
        super().__init__(**kwargs)

您是否不想包含以下内容：

def display(self):
     display(self.expansionPanel)

然后你可以去：

c1=customWidget('whatever tieltle','whatever bodytext')

c1.display()