【记录】python3 使用tkinter制作tkinterUI编辑器 《六》

标签: python  tkinter  

使用tkinter制作tkinterUI编辑器


前言

这篇文章记录一下编辑器要用到的tabControl控件,我希望编辑器能支持同时编辑多个界面,所以添加了这个控件。

一、先加一个基础的控件

SimpleTabControl.py,代码如下:

#!/usr/bin/python
# -*- coding: utf-8 -*-

from tkinter import Frame
from functools import partial


class SimpleTabControl(Frame):

    def __init__(self, master=None, cnf={}, **kw):

        Frame.__init__(self, master, cnf, **kw)
        self.tabs = {}                                  # 所有tab{"btn": tab_button, "frame": tab_frame, "data": data}
        self.tab_index = 0                              # tab索引
        self.cur_tab = None                             # 当前选中的tab
        self.col_distance = 1                           # 列间距
        self.btn_frame_distance = 0                     # btn与frame间距
        self.on_add_tab = None                          # 增加tab回调
        self.on_del_tab = None                          # 删除tab回调
        self.on_select_tab = None                       # 选择tab回调

    def get_tab_index(self):
        return self.tab_index

    def set_tab_index(self, tab_index):
        if self.tab_index == tab_index:
            return
        self.tab_index = tab_index

    def add_tab_index(self, add_num=1):
        self.tab_index += add_num

    def get_cur_tab(self):
        return self.cur_tab

    def set_cur_tab(self, cur_tab):
        if self.cur_tab == cur_tab:
            return
        self.cur_tab = cur_tab

    def get_col_distance(self):
        return self.col_distance

    def set_col_distance(self, col_distance):
        if self.col_distance == col_distance:
            return
        self.col_distance = col_distance
        self.do_layout()

    def get_btn_frame_distance(self):
        return self.btn_frame_distance

    def set_btn_frame_distance(self, btn_frame_distance):
        if self.btn_frame_distance == btn_frame_distance:
            return
        self.btn_frame_distance = btn_frame_distance

    def set_on_add_tab(self, on_add_tab):
        self.on_add_tab = on_add_tab

    def set_on_del_tab(self, on_del_tab):
        self.on_del_tab = on_del_tab

    def set_on_select_tab(self, on_select_tab):
        self.on_select_tab = on_select_tab

    def get_data(self, tab_index=None):
        if tab_index is None:
            tab_index = self.get_cur_tab()
        if tab_index not in self.tabs:
            return None
        return self.tabs[tab_index]["data"]

    def get_tab_frame(self, tab_index=None):
        if tab_index is None:
            tab_index = self.get_cur_tab()
        if tab_index not in self.tabs:
            return None
        return self.tabs[tab_index]["frame"]

    def get_tab_button(self, tab_index=None):
        if tab_index is None:
            tab_index = self.get_cur_tab()
        if tab_index not in self.tabs:
            return None
        return self.tabs[tab_index]["btn"]

    def add_tab_base(self, tab_button, tab_frame, data, is_select_tab=True):
        """
        添加一个新tab
        :param tab_button: tab_button
        :param tab_frame: tab_frame
        :param data: 存储的额外数据
        :param is_select_tab: 增加tab后是否选中这个tab
        :return: None
        """
        tab_index = self.get_tab_index()
        self.tabs[tab_index] = {"btn": tab_button, "frame": tab_frame, "data": data}

        tab_button.set_handle_tab_select(partial(self.tab_select, tab_index))
        tab_button.set_handle_tab_close(partial(self.del_tab, tab_index))

        # 修改frame的size
        tab_frame.place_forget()
        tab_frame.configure(
            width=self["width"],
            height=self["height"] - tab_button.winfo_reqheight() - self.get_btn_frame_distance()
        )

        if hasattr(tab_frame, "on_size_change"):
            tab_frame.on_size_change()

        self.add_tab_index()
        self.do_layout()

        if self.on_add_tab:
            self.on_add_tab(tab_index)

        if is_select_tab:
            self.tab_select(tab_index)

    def tab_select(self, tab_index):
        """
        切换tab
        :param tab_index:要切换到的tab
        :return:None
        """
        cur_tab = self.get_cur_tab()
        if cur_tab == tab_index:
            return

        new_tab_frame = self.get_tab_frame(tab_index)
        if not new_tab_frame:
            return

        new_tab_button = self.get_tab_button(tab_index)
        if not new_tab_button:
            return

        # 隐藏之前的Frame
        if cur_tab is not None:
            cur_tab_button = self.get_tab_button(cur_tab)
            if hasattr(cur_tab_button, "on_tab_cancel_selected"):
                cur_tab_button.on_tab_cancel_selected()
            cur_tab_frame = self.get_tab_frame(cur_tab)
            cur_tab_frame.place_forget()

        # 显示新Frame
        new_tab_frame.place(x=0, y=new_tab_button.winfo_reqheight() + self.get_btn_frame_distance(), anchor="nw")
        if hasattr(new_tab_button, "on_tab_selected"):
            new_tab_button.on_tab_selected()

        self.set_cur_tab(tab_index)
        if self.on_select_tab:
            self.on_select_tab(tab_index)

    def del_tab(self, tab_index):
        """
        删除一个tab
        :param tab_index:要删除的tab
        :return:None
        """
        if tab_index not in self.tabs:
            return

        tab_frame = self.get_tab_frame(tab_index)
        if tab_frame:
            tab_frame.destroy()

        tab_button = self.get_tab_button(tab_index)
        if tab_button:
            tab_button.destroy()

        # 删除控件回调
        if self.on_del_tab:
            self.on_del_tab(tab_index)

        del self.tabs[tab_index]

        # 重新布局界面
        self.do_layout()

        # 如果删除的是当前选中的则选中第一个
        if self.get_cur_tab() == tab_index:
            self.set_cur_tab(None)
            self.select_first()

    def select_first(self):
        """
        todo:选中第一个tab,以后考虑改成选中上次选中的
        :return:None
        """
        if len(self.tabs) == 0:
            self.set_cur_tab(None)
            return

        first_tab = sorted(self.tabs.keys())[0]
        self.tab_select(first_tab)

    def do_layout(self):
        """
        重新布局界面
        :return:None
        """
        tab_buttons = [self.tabs[k]["btn"] for k in sorted(self.tabs.keys())]
        pos_x = 0
        for tab_button in tab_buttons:
            tab_button.place_configure(x=pos_x, y=0, anchor="nw")
            pos_x += tab_button.winfo_reqwidth() + self.get_col_distance()

说明:

  1. 这是一个基本的tabControl,实现通用的增加页签,选中页签,删除页签,布局页签
  2. 增加页签的时候需要传进来页签按钮控件和页签控件,页签按钮控件必须有set_handle_tab_select与set_handle_tab_close函数来执行通用的逻辑,增加页签时需要修改页签的size,size改变时有一个回调on_size_change,如果页签是ScrollCanvas的话就可以在这里刷新滑动
  3. col_distance,btn_frame_distance这两个是我的自定义属性,以后支持在编辑器编辑

二、添加编辑器用的tabControl控件

EditorTabControl.py,代码如下:

#!/usr/bin/python
# -*- coding: utf-8 -*-

import sys
from tkinter import Frame, Label
from ScrollCanvas import ScrollCanvas
from SimpleTabControl import SimpleTabControl
from componentProperty import update_all_property, get_default_component_info


def create_default_component(master, component_type, component_name, prop=None, use_name=True):
    """
    创建默认控件
    :param master: 父控件
    :param component_type: 控件类型
    :param component_name: 控件名字
    :param prop: 需要更新的属性
    :param use_name: 是否使用控件名字
    :return: 控件
    """
    class_name = getattr(sys.modules[__name__], component_type)
    if use_name:
        component = class_name(master, name=component_name)
    else:
        component = class_name(master)

    component_info = get_default_component_info(component_type, prop)
    update_all_property(component, component_info, component_type)

    return component, component_info


class EditorTabControlBtn(Frame):

    def __init__(self, master=None, cnf={}, **kw):
        Frame.__init__(self, master, cnf, **kw)
        self.label_text = "default"                                 # 标签文字
        self.label_bg = "#1b2529"                                   # 标签背景
        self.label_fg = "white"                                     # 标签文字颜色
        self.close_bg = "#1b2529"                                   # 关闭按钮背景
        self.close_fg = "white"                                     # 关闭按钮文字颜色
        self.close_active_bg = "red"                                # 关闭按钮**时的颜色
        self.under_line_bg = "red"                                  # 下划线背景
        self.handle_tab_select = None                               # tab_btn选中函数
        self.handle_tab_close = None                                # tab_close函数

    @property
    def tab_label(self):
        return self.children["label_text"]

    @property
    def tab_close(self):
        return self.children["label_close"]

    @property
    def tab_under_line(self):
        return self.children["under_line"]

    def set_label_text(self, label_text):
        if self.label_text == label_text:
            return
        self.label_text = label_text
        self.tab_label.configure(text=self.label_text, width=len(self.label_text))
        self.tab_under_line.configure(width=self.tab_label.winfo_reqwidth() + self.tab_close.winfo_reqwidth())
        self.do_layout()

    def get_label_text(self):
        return self.label_text

    def set_handle_tab_select(self, handle_tab_select):
        if self.handle_tab_select == handle_tab_select:
            return
        self.handle_tab_select = handle_tab_select

    def set_handle_tab_close(self, handle_tab_close):
        if self.handle_tab_close == handle_tab_close:
            return
        self.handle_tab_close = handle_tab_close

    def on_update(self):
        """
        初始化后会被调用,在这里创建所需控件
        :return: None
        """
        self.create_tab_label()
        self.create_tab_close()
        self.create_under_line()
        self.do_layout()

    def create_tab_label(self):
        """
        创建标签
        :return:None
        """
        prop = {
            "text": self.label_text, "width": len(self.label_text),
            "background": self.label_bg, "foreground": self.label_fg,
        }
        label, info = create_default_component(self, "Label", "label_text", prop)
        label.bind("<Button-1>", self.on_tab_label_click)

    def on_tab_label_click(self, event):
        if self.handle_tab_select is None:
            return
        self.handle_tab_select()

    def create_tab_close(self):
        """
        创建关闭按钮
        :return:None
        """
        prop = {
            "text": "x", "width": 2,
            "activebackground": self.close_bg,
            "activeforeground": self.close_active_bg,
            "background": self.close_bg, "foreground": self.close_fg,
        }
        label, info = create_default_component(self, "Label", "label_close", prop)
        label.bind("<Button-1>", self.on_tab_close_click)
        label.bind("<Enter>", self.on_tab_close_enter)
        label.bind("<Leave>", self.on_tab_close_leave)

    def on_tab_close_click(self, event):
        if self.handle_tab_close is None:
            return
        self.handle_tab_close()

    def on_tab_close_enter(self, event):
        self.tab_close.configure(state="active")

    def on_tab_close_leave(self, event):
        self.tab_close.configure(state="normal")

    def create_under_line(self):
        """
        创建under_line
        :return:None
        """
        prop = {
            "width": self.tab_label.winfo_reqwidth() + self.tab_close.winfo_reqwidth(),
            "background": self.under_line_bg, "height": 2,
        }
        create_default_component(self, "Frame", "under_line", prop)

    def do_layout(self):
        """
        重新布局界面
        :return:None
        """
        self.tab_label.place(x=0, y=3)
        self.tab_close.place(x=self.tab_label.winfo_reqwidth(), y=-5)
        self.tab_under_line.place(x=0, y=self.tab_label.winfo_reqheight() + 5)
        self.configure(width=self.tab_label.winfo_reqwidth() + self.tab_close.winfo_reqwidth())
        self.configure(height=int(self.tab_under_line.place_info()["y"]) + self.tab_under_line.winfo_reqheight())

    def on_tab_selected(self):
        """
        tab_btn被选中时的回调
        :return:None
        """
        self.set_under_line_visible(True)

    def on_tab_cancel_selected(self):
        """
        tab_btn被取消选中时的回调
        :return:None
        """
        self.set_under_line_visible(False)

    def set_under_line_visible(self, visible):
        """
        设置下划线显隐
        :param visible: 是否显示
        :return: None
        """
        if not visible:
            self.tab_under_line.place_forget()
            return
        self.tab_under_line.place(x=0, y=self.tab_label.winfo_reqheight() + 5, anchor="nw")

    @staticmethod
    def create_default(master, prop=None):

        property_dict = {
            "background": "#1b2529",
        }

        if prop is not None:
            property_dict.update(prop)

        return create_default_component(master, "EditorTabControlBtn", "None", property_dict, False)


class EditorTabControl(SimpleTabControl):

    def __init__(self, master=None, cnf={}, **kw):
        SimpleTabControl.__init__(self, master, cnf, **kw)

    def add_tab(self, btn_prop, frame_prop, data):
        """
        添加新tab
        :param btn_prop: tab_button属性
        :param frame_prop: tab_frame属性
        :param data: 额外数据
        :return: None
        """
        tab_btn = EditorTabControlBtn.create_default(self, btn_prop)[0]
        tab_frame = ScrollCanvas.create_default(self, frame_prop)[0]
        self.add_tab_base(tab_btn, tab_frame, data)

说明:

  1. EditorTabControlBtn是页签按钮
  2. EditorTabControl是编辑器用的tabControl,add_tab函数添加页签

三、测试控件

  1. 修改components.py,添加引用from EditorTabControl import EditorTabControl

  2. 再更新一下componentProperty.py,更新属性的函数修改了调用顺序

  3. 修改tkinterEditor.xml,将gui_type改为EditorTabControl,删除滑动条的3个is属性

  4. 修改tkinterEditor.py,添加页签,代码如下:

    class tkinterEditor(componentMgr):
    
        def __init__(self, master, gui_path):
            componentMgr.__init__(self, master)
            self.load_from_xml(master, gui_path, True)
            master = self.master.children["frame_6615dd7e1e7911eb8d886045cb848950"]
            master.add_tab({"label_text": "test"}, {"background": "#1b2529", "is_show_scroll_x": 0,}, None)
            master.add_tab({"label_text": "test2"}, {"background": "black", "is_show_scroll_y": 0,}, None)
    
  5. 运行tkinterEditor.py,效果如下:
    在这里插入图片描述

  6. 可以切换到页签1,如下:
    在这里插入图片描述


上一篇记录

版权声明:本文为m0_51849494原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/m0_51849494/article/details/109582113

智能推荐

HTML 表单元素的基本样式

HTML 表单元素的基本样式 原创 ixygj197875 发布于2018-02-22 17:48:53 阅读数 2296 收藏 更新于2018-05-20 15:35:58 分类专栏: 揭秘 CSS 揭秘 CSS 收起 表单元素主要包括 label、input、textarea、select、datalist、******、progress、meter、output等,以及对表单元素进行分组的 ...

php输出语句

php输出语句 常见的输出语句 echo(): 可以一次输出多个值,多个值之间用逗号分隔。echo是语言结构(language construct),而并不是真正的函数,因此不能作为表达式的一部分使用。 print(): 函数print()打印一个值(它的参数),如果字符串成功显示则返回true,否则返回false。 print_r(): 可以把字符串和数字简单地打印出来,而数组则以括起来的键和值...

工厂模式

简介 常见的实例化对象模式。 用工厂方法替代new操作的一种模式。 当我们使用new操作实例化对象时,调用构造函数完成初始化。若初始化仅是进行赋值等简单的操作,写入构造函数即可。但如果初始化时需要执行一长串复杂的代码,将多个工作装入一个方法,是不妥的。 创建实例与使用实例分离。将创建实例所需的大量初始化工作从基类的构造函数中分离出去。 简单工厂模式、工厂方法模式针对的是一个产品等级结构;而抽象工厂...

B1105 Spiral Matrix (画图)

B1105 Spiral Matrix (25分) //第一次只拿了21分 矩阵的长和宽,求最大因子,从sqrt(num)开始枚举. 每次循环一次,s++,t--,d--,r++ 测试点四运行超时,是因为输入一个数字的时候,需要直接输出这个数字。//1分 测试点二运行超时,最后一个数字不必再while循环一次,直接输出即可。//3分 最后一个测试点卡了好久/(ㄒoㄒ)/~~ 螺旋矩阵...

Java基础=>String,StringBuffer与StringBuilder的区别

字符串常量池 什么是字符串常量池? JVM为了减少字符串对象的重复创建,其维护了一块特殊的内存,这段内存被称为字符串常量池(存储在方法区中)。 具体实现 当代码中出现字符串时,JVM首先会对其进行检查。 如果字符串常量池中存在相同内容的字符串对象,如果有,则不再创建,直接返回这个对象的地址返回。 如果字符串常量池中不存在相同内容的字符串对象,则创建一个新的字符串对象并放入常量池,并返回新创建的字符...

猜你喜欢

java调用其他java项目的Https接口

项目中是这样的: 用户拿出二维码展示,让机器识别二维码, 机器调用开门的后台系统接口, 然后开门的后台系统接口需要调用管理系统的接口, 管理系统需要判断能不能开门.这两个系统是互相独立的.当时使用http调用是没有问题的.当时后来要求必须用https.废话不说,直接代码: 我的项目中调用的是 HttpsUtils.Get(utlStr) 这个接口 开门系统接口如下图:   管理系统的接口...

Hadoop1.2.1全分布式模式配置

一 集群规划 主机名            IP                               安装的软件 &nbs...

Go语言gin框架的安装

尝试安装了一下gin,把遇到的一些小问题来记录一下 安装步骤 首先来看看官方文档,链接点这里 可以看到安装步骤很简单,就一句话 在命令行中输入这句话运行等待就好。 问题来了,因为墙的问题,go get会很慢,所以命令行里面半天什么反应也没有,不要急,慢慢等着就会看到gin-gonic/gin这个目录出现 这个时候命令行还是没有结束,表示还在下一些东西。有的时候可能心急的人就停了(比如我),然后写个...

uni-app表单组件二

input(输入框) 属性名 类型 说明 平台差异 value String 输入框的初始内容 type String input 的类型 password Boolean(默认false) 是否是密码类型 placeholder String 输入框为空时占位符 placeholder-style String 指定 placeholder 的样式 placeholder-class Strin...

深入理解 JavaScript 代码执行机制

深入理解 JavaScript 代码执行机制 前言 本文仅为个人见解,如有错误的地方欢迎留言区探讨和指正。 1、餐前甜品 如下是一段 JavaScript 代码,如果你毫不犹豫的说出代码执行顺序。那么请直接滚动到底部,留下你的足迹,接受膜拜。如果还不是很确定,那么请往下继续查看。 2、磨刀不误砍柴工(了解浏览器原理) (1) 进程和线程 进程是cpu资源分配的最小单位(是能拥有资源和独立运行的最小...