Cubit教程

这里主要讲解几个重要界面的实现

1.上面横条界面的实现

#菜单栏
buttonBar = ttk.Frame(windows,style='primary.TFrame')
buttonBar.pack(fill=X,side=TOP,padx=1)

#设置项
btn_set = ttk.Button(
                    master=buttonBar,
                    text='设置',
                    image='setting',
                    command=menuSetting
                    )
btn_set.grid(row=0,column=0)

#帮助项
btn_help = ttk.Button(
                    master=buttonBar,
                    text='帮助',
                    image='help',
                    command=menuHelp
                     )
btn_help.grid(row=0,column=1)

#exp
btn_exp = ttk.Button(
                    master=buttonBar,
                    text='Exp',
                    image='Exp',
                    command=menuExp
                     )
btn_exp.grid(row=0,column=2)

其中：

1. 我们利用的ttkbootstrap中的Frame对象来实现的菜单栏，这里的style可以参考官方文档去调整

2. 这里的image实现方式：

   #添加图片
   img_file = {
       'setting':'icons8_settings_32px.png',
       'help':'icons8_wrench_32px.png',
       'fofa':'fofa.png',
       'shodan':'shodan.png',
       'Exp':'Exp.png',
       'zoomEye':'zoomEye.png',
       'Quake':'Quake.png'
   }
   photoFile = []
   absPath = Path(__file__).parent.absolute()   #获取绝对路径
   imgPath = absPath / 'image'
   for key,val in img_file.items():
       _path = imgPath / val
       photoFile.append(ttk.PhotoImage(name=key,file=_path))
   

   我通过在image文件夹中添加需要的png文件去给需要使用的img打上标签一样的东西，从而可以直接调用

3. 至于command后面所执行的函数可以在MenuBtn.py中可以参考具体想法

2.Frame切换

Frame的切换关键在于将一个Frame关闭，选中的Frame开启

ttkbootstrap 中，**pack_forget()** 函数主要用于关闭Frame，pack() 布局Frame

那么两者结合就可以实现按钮选中切换界面

注意点：注意默认界面的布局

#fofa对应项
def fofa_btn():
    shodan_left.pack_forget()
    shodan_right.pack_forget()
    fofa_left.pack(side=LEFT, anchor=NW,padx=5,pady=5)
    fofa_right.pack(side=LEFT, anchor=NW, padx=3, pady=3)

#shodan对应项
def shodan_btn():
    fofa_left.pack_forget()
    fofa_right.pack_forget()
    shodan_left.pack(side=LEFT, anchor=NW, padx=5, pady=5)
    shodan_right.pack(side=LEFT, anchor=NW, padx=3, pady=3)

3.侧边连的伸缩

left_panel = ttk.Frame(windows, style='bg.TFrame')
left_panel.pack(side=LEFT, fill=Y)

bus_cf = CollapsingFrame(left_panel)
bus_cf.pack(fill=X, pady=1)

#空间测绘
net_tools = ttk.Frame(bus_cf, padding=0)
net_tools.columnconfigure(1, weight=1)
bus_cf.add(
            child=net_tools,
            title='空间测绘搜索',
            bootstyle=SECONDARY,
            )

#fofa搜索
fofa_btn1 = ttk.Button(
            master=net_tools,
            text='fofa搜索',
            image='fofa',
            compound=LEFT,
            command=fofa_btn,
            bootstyle='danger-outline'
        )
fofa_btn1.pack(side=TOP,fill=X)

#shodan搜索
shodan_btn1 = ttk.Button(
            master=net_tools,
            text='shodan搜索',
            image='shodan',
            compound=LEFT,
            command=shodan_btn,
            bootstyle='info-outline'
        )
shodan_btn1.pack(side=TOP,fill=X)

这里我直接套用ttk官方文档，利用CollapsingFrame制作侧边栏，后续控件可以直接在其中添加

以上是我编写过程中，遇到的难题。如果有其他问题，可以联系作者，或者在Github项目（https://github.com/Yu0ri/CubitTest）上留言