tkinter绘制组件（26）——横向翻页视图

已于 2024-02-11 13:07:05 修改
阅读量1.5k 收藏 4
点赞数 2
分类专栏： TinUI 文章标签： Python tkinter TinUI
于 2022-04-03 11:21:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tinga_kilin/article/details/123934623
版权

tkinter绘制组件（26）——横向翻页视图

引言

目前，TinUI已经完成了基本组件绘制，也就是说TinUI已经成熟，可以作为一个轻量型的窗口框架来使用。自从这一篇文章，也就是TinUI的第一个完全拓展型组件——翻页视图的出现，TinUI开始了对tkinter原生组件的补充和完善。

横向翻页视图并不存在于tkinter的原生组件中，其在winui中的名称为pipspager。不同于标签页，翻页视图提供了一个可顺序转化，也可以指定序号翻页的视图，用来在有限的地方创建更多的UI框架。

现在，开工吧。

布局

函数结构

    def add_pipspager(self,pos:tuple,width:int=200,height:int=200,bg='#f3f3f3',fg='#898989',buttonbg='#f8f8f8',num:int=2):#绘制翻页视图
    '''
    pos::位置
    width::视图宽度
    height::视图高度
    bg::视图背景
    fg::窗口序号标识符颜色
    buttonbg::按钮背景色
    num::BasicTinUI个数
    '''

创建辅助控件

翻页视图的辅助控件主要有两个：

  1. 一对翻页按钮

  2. 底部一栏序号标识符，就是若干个小点

首先来创建翻页按钮：

        startx=pos[0]+20#按钮与主窗口间隔
        doty=pos[1]+height+5#控制点的起始纵坐标
        leftbutton=self.add_button((startx-2,pos[1]+width/2),'<',fg=fg,bg=buttonbg,linew=0,activefg=buttonbg,activebg=fg,command=move_left,anchor='e')[-1]
        rightbutton=self.add_button((startx+width+2,pos[1]+width/2),'>',fg=fg,bg=buttonbg,linew=0,activefg=buttonbg,activebg=fg,command=move_right,anchor='w')[-1]
        uid='pipspager'+str(leftbutton)+str(rightbutton)
        self.addtag_withtag(uid,leftbutton)
        self.addtag_withtag(uid,rightbutton)

接着创建导航栏，我们选择使用画布来创建导航栏，毕竟对我来说，画布与文本框使用起来更顺手。

直接在循环结构里面创建导航序号标识符，这样方便于待会BasicTinUI框架与标识符一同创立，方便管理。

        #...
        uilist=list()#[(uiid-1,BasicTinUI-1,TinUIXml-1),(uiid-2,BasicTinUI-2,TinUIXml-2),...]
        dotlist=list()#[dot1,dot2,...]
        nowui=0#当前显示界面序号
        bar=Canvas(self,bg=bg,highlightthickness=0,relief='flat')#导航栏
        barid=self.create_window((startx,doty),window=bar,width=width,height=11,anchor='nw',tags=uid)
        dotx=3
        for i in range(0,num):
            dot=bar.create_oval((dotx,3,dotx+5,8),fill=fg,outline=fg,width=0)
            dotlist.append(dot)
            dotx+=13

此刻我们已经创建了两个列表，范别是UI框架列表，以及导航标识符列表。这些列表都是为了之后的功能能够直接获取这些画布对象。此外，我们还定义了nowui变量，用于确定当前显示的视图的序号。

TinUI的pipspager中序号从0开始。

创建视图

创建BasicTinUI视图的构成与创建内部框架一样，同样为了一键化建立TinUI与TinUIXml的联系，我们直接实例化TinUIXml：

        #...
        for i in range(0,num):
            ui=BasicTinUI(self,bg=bg)
            tinuixml=TinUIXml(ui)
            uiid=self.create_window((startx,pos[1]),window=ui,width=width,height=height,state='hidden',anchor='nw',tags=uid)
            uilist.append((uiid,ui,tinuixml))
            #...

uilist=[(ui-id,ui,ui-xml),…]

导航标识符的功能

先编写这一部分的代码，是因为导航标识符实际上是更加基础的辅助控件，其响应用户时间不会影响到翻页按钮。

先来创建一个基础函数：

        def __move_to(number):
            nonlocal nowui
            self.itemconfig(uilist[nowui][0],state='hidden')
            nowui=number
            self.itemconfig(uilist[nowui][0],state='normal')

样式绑定：

        def __dot_in(dote):
            bar.itemconfig(dote,width=3)
        def __dot_out(dote):
            if dotlist.index(dote)==nowui:
                pass
            else:
                bar.itemconfig(dote,width=0)

标识符选择：

        def __dot_select(dote):
            number=dotlist.index(dote)
            if number==nowui:
                pass
            else:
                __move_to(number)
                for i in dotlist:
                    if i==dote:
                        continue
                    else:
                        bar.itemconfig(i,width=0)

封装一遍开发者可用的move_to函数：

        def move_to(number):
            __dot_in(dotlist[nowui])
            __dot_select(dotlist[nowui])
            __move_to(nowui)

绑定标识符事件：

        #...
        for i in range(0,num):
            #...
            bar.tag_bind(dot,'<Enter>',lambda event,dote=dot:__dot_in(dote))
            bar.tag_bind(dot,'<Leave>',lambda event,dote=dot:__dot_out(dote))
            bar.tag_bind(dot,'<Button-1>',lambda event,dote=dot:__dot_select(dote))
        __dot_in(dotlist[nowui])
        __dot_select(dotlist[nowui])
        __move_to(nowui)

翻页按钮的功能

有了前面的铺垫，两个翻页按钮的功能很好完成，逻辑很简单。

以下是两个功能函数：

        def move_left(event):
            nonlocal nowui
            if nowui==0:
                pass
            else:
                __dot_in(dotlist[nowui-1])
                __dot_select(dotlist[nowui-1])
        def move_right(event):
            nonlocal nowui
            if nowui==len(uilist)-1:
                pass
            else:
                __dot_in(dotlist[nowui+1])
                __dot_select(dotlist[nowui+1])

虽然听起来很复杂，但是写起来也没什么。

完整代码函数

    def add_pipspager(self,pos:tuple,width:int=200,height:int=200,bg='#f3f3f3',fg='#898989',buttonbg='#f8f8f8',num:int=2):#绘制翻页视图
        def move_left(event):
            nonlocal nowui
            if nowui==0:
                pass
            else:
                __dot_in(dotlist[nowui-1])
                __dot_select(dotlist[nowui-1])
        def move_right(event):
            nonlocal nowui
            if nowui==len(uilist)-1:
                pass
            else:
                __dot_in(dotlist[nowui+1])
                __dot_select(dotlist[nowui+1])
        def __move_to(number):
            nonlocal nowui
            self.itemconfig(uilist[nowui][0],state='hidden')
            nowui=number
            self.itemconfig(uilist[nowui][0],state='normal')
        def move_to(number):
            __dot_in(dotlist[nowui])
            __dot_select(dotlist[nowui])
            __move_to(nowui)
        def __dot_in(dote):
            bar.itemconfig(dote,width=3)
        def __dot_out(dote):
            if dotlist.index(dote)==nowui:
                pass
            else:
                bar.itemconfig(dote,width=0)
        def __dot_select(dote):
            number=dotlist.index(dote)
            if number==nowui:
                pass
            else:
                __move_to(number)
                for i in dotlist:
                    if i==dote:
                        continue
                    else:
                        bar.itemconfig(i,width=0)
        startx=pos[0]+20#按钮与主窗口间隔
        uilist=list()#[(uiid-1,BasicTinUI-1,TinUIXml-1),(uiid-2,BasicTinUI-2,TinUIXml-2),...]
        doty=pos[1]+height+5#控制点的起始纵坐标
        dotlist=list()#[dot1,dot2,...]
        nowui=0#当前显示界面序号
        leftbutton=self.add_button((startx-2,pos[1]+width/2),'<',fg=fg,bg=buttonbg,linew=0,activefg=buttonbg,activebg=fg,command=move_left,anchor='e')[-1]
        rightbutton=self.add_button((startx+width+2,pos[1]+width/2),'>',fg=fg,bg=buttonbg,linew=0,activefg=buttonbg,activebg=fg,command=move_right,anchor='w')[-1]
        uid='pipspager'+str(leftbutton)+str(rightbutton)
        self.addtag_withtag(uid,leftbutton)
        self.addtag_withtag(uid,rightbutton)
        bar=Canvas(self,bg=bg,highlightthickness=0,relief='flat')#导航栏
        barid=self.create_window((startx,doty),window=bar,width=width,height=11,anchor='nw',tags=uid)
        dotx=3
        for i in range(0,num):
            ui=BasicTinUI(self,bg=bg)
            tinuixml=TinUIXml(ui)
            uiid=self.create_window((startx,pos[1]),window=ui,width=width,height=height,state='hidden',anchor='nw',tags=uid)
            uilist.append((uiid,ui,tinuixml))
            dot=bar.create_oval((dotx,3,dotx+5,8),fill=fg,outline=fg,width=0)
            dotlist.append(dot)
            dotx+=13
            bar.tag_bind(dot,'<Enter>',lambda event,dote=dot:__dot_in(dote))
            bar.tag_bind(dot,'<Leave>',lambda event,dote=dot:__dot_out(dote))
            bar.tag_bind(dot,'<Button-1>',lambda event,dote=dot:__dot_select(dote))
        __dot_in(dotlist[nowui])
        __dot_select(dotlist[nowui])
        __move_to(nowui)
        return uilist,dotlist,move_to,uid

效果

测试代码

#...
#TinUI现在的测试代码量有点大，所以就缩减剩下了必要部分
def test6():
    for i in range(0,5):
        num=i
        xml=f'''
<tinui><line><label text='这是第{num}个BasicTinUI组件'></label></line>
<line><button text='功能按钮' command='lambda event:print("第{i}个功能按钮")'></button>
<combobox width='80' text='可选测试' content='("{i}","其它选项")'></combobox></line></tinui>'''
        ppgl[i][2].loadxml(xml)

if __name__=='__main__':
    a=Tk()
    a.geometry('700x700+5+5')

    b=TinUI(a,bg='white')
    b.pack(fill='both',expand=True)
    #...
    ppgl=b.add_pipspager((400,890),num=5)[0]
    test6()

    a.mainloop()

最终效果

在这里插入图片描述

2022-8-8新样式

在这里插入图片描述

  • 小修标识符
  • 对于超过可视范围的标识符，会自动显示到对应范围

2022-8-19新样式

在这里插入图片描述

  • 使用新的翻页标识符< >→◀ ▶
  • 页面标识符改用文本●，减少粗糙度
  • 修复向左越界翻页的页面标识符显示问题

2023-1-9更新

在这里插入图片描述
添加翻页切换动画。因为顺序与画布对齐原因，向前和向后的翻页动作有些许不同。

2024-2-11新样式

在这里插入图片描述
优化翻页按钮

github项目

TinUI的github项目地址

pip下载

pip install tinui

结语

TinUI完成了所有基本组件的加入，现在可以替代tkinter原生窗口了，同时搭配TinUIXml使用更加方便！

TinUI即将步入3.0。

🔆tkinter创新🔆

Smart-Space
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
tkinter_page:扩展tkiner
04-21
tkinter_page 介绍 Tkinter_page基于tkinter。 它包含几个用于特定区域的框架。 您可以使用tkinter_page更快地构建用户界面。 例子 桌面框架 #This is a example to build an DesktopFrame. import tkinter as tk import tkinter_page as tkp window = tk . Tk () # Way1: Generate child frame before DesktopFrame by building a dict bar_frame = { "background" : "gold" , "width" : 400 , "height" : 30 } files_frame = { "background" : "red" , "width" : 70 , "hei
Tkinter中各种组件的使用
11-24
python中tkinter的组件的使用。免费下载
Tkinter图形设计——Tkinter常用组件(一)
12-21
Tkinter常用的几种组件 1. Label标签组件 2.Button按钮组件 3.Entry单行文本框组件和Text多行文本框组件 4.Listbox列表框组件 5.Radiobutton单选按钮组件 6.Checkbutton复选框组件 7.Menu菜单组件 8.对话框组件： 文件对话框 颜色对话框 简单对话框 9. 消息窗口 10.Frame框架组件 前言： 1.在介绍Tkinter组件之前我们先了解一下如何先创建一个窗口然后再介绍利用组件在添加一下功能 2.创建窗口的并设置窗口的相关语法是： from tkinter import* #或者import tkinter 或者impor
Python实现在tkinter中使用matplotlib绘制图形的方法示例
09-20
主要介绍了Python实现在tkinter中使用matplotlib绘制图形的方法,结合实例形式分析了Python使用tkinter与matplotlib进行正弦曲线图形绘制的相关操作技巧,需要的朋友可以参考下
python tkinter组件摆放方式详解
09-18
主要介绍了python tkinter组件摆放方式详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
python开发窗体page_PAGE：像Visual Studio一样设计Python GUI窗体
weixin_33443597的博客
01-29 2420
虽然使用标准库tkinter开发Python GUI程序很方便，也提供了强大的功能，但是窗体上的一切都需要程序员使用代码来控制，在页面布局上浪费大量时间，确实不是很方便。今天我们来介绍一个叫做PAGE的Python可视化开发环境，正如该软件网站所描述，PAGE - Python Automatic GUI Generator，这是个用于快速生成Python GUI程序界面的工具，可以像Visual...
Python GUI工具Tkinter以及拖拉工具Page安装
weixin_30701521的博客
04-02 3052
如果使用Tkinter作为Python GUI工具，我们需要安装Tkinter，这个使用conda或者pip即可： conda install -c anaconda tk 为了提高界面编写效率，可以使用拖拉工具Page： 下载地址：https://sourceforge.net/projects/page/ 安装完成后可能会遇到can't find wish.exe的问题，...
python3.6.x 爬糗事百科(tkinter+PAGE) GUI版
lxy210781的专栏
07-14 3270
今天又好好的研究了一下python tkinter,怎么样才能做得好看好用呢？如果只是常规方法实在是有点难度。上网搜了很久，终于找出了一款，不过好用的话得自已在生成的GUI代码中找寻，但不是感觉不错，立即行动起用，将之前写的糗事百科整了个GUI，感觉好看多了。如要做用这个tool(PAGE),请参考以下两个站点自行下载.1. PAGEhttp://page.sourceforge.net/2. T...
python界面GUI设计、tkinter设计界面初步教程
slc1112的博客
12-25 1689
如果没有时间仔细看完这篇文章的话可以现在下载PAGE+TCL然后直接输入最后代码运行程序即可。 python可以使用tkinter库来实现小程序制作，还是很方便的，比较大型程序可以采用pyqt来制作GUI。 我在一开始的时候不知道tkinter可以直接用一个可视化的界面来进行界面设计，当时是直接用代码来生成窗口、设计控件，再设计功能，感觉效率不是很高。因此我觉得要想做GUI提高效率还是需要用到可视化界面来拖放控件快速生成一个窗口来供我们设计代码，这样既直观，还比较爽。 要想实现这点的第一步方法是下载两个软件
python tkiner实现 一个小小的图片翻页功能的示例代码
最新发布
Python栈
06-25 508
Python tkinter实现一个小小的图片翻页功能的示例代码Python tkinter是一个基于Tk GUI工具包的Python标准库。它提供了创建GUI应用程序的简单方法，可以在Windows、Linux和Mac OS X等平台上运行。
python-GUI之Tkinter（csdn）————程序.pdf
12-03
python-GUI之Tkinter（csdn）————程序
Tkinter 之使用PAGE工具开发GUI界面
样子的博客
12-05 33
一、安装 1、官网下载 PAGE http://page.sourceforge.net/ Tcl(8.6+) https://www.activestate.com/activetcl/downloads 2、百度网盘 链接: https://pan.baidu.com/s/1Mnq-9PWUNl92P-7oOyEsXQ 提取码: ajbt 二、PAGE软件界面 三、生成pytho...
python gui设计_PAGE：像Visual Studio一样设计Python GUI窗体
weixin_39857480的博客
11-23 448
虽然使用标准库tkinter开发Python GUI程序很方便，也提供了强大的功能，但是窗体上的一切都需要程序员使用代码来控制，在页面布局上浪费大量时间，确实不是很方便。今天我们来介绍一个叫做PAGE的Python可视化开发环境，正如该软件网站所描述，PAGE - Python Automatic GUI Generator，这是个用于快速生成Python GUI程序界面的工具，可以像Visual...
我用Python + PAGE(Tkinter GUI) + pandas做了个企查查导出模板转机器人模板的小工具
水墨熊猫
03-28 987
产品需求 企查查导出的Excel文件是这样的 客户的机器人软件需要导入的模板是这样的 简单说就是要做个小工具将企查查导出的Excel通过pandas分析整理后按照客户给出的模板表头生成新的Excel文件。 效果图 成品效果图 PAGE Gui效果图 因为底部的statusbar无法通过gui设置，需要在生成的python中加入如下代码： statusbar = tk.Label(root, text="技术支持：济宁小墨匠智能科技有限公司 18678709906", bd=1, relief=tk
python tkinter界面可视化工具
三怪老头的怪言怪语
01-01 5466
the page python thinter 可视化界面设计
python翻页_如何用python tkiner实现图片翻页功能
weixin_39667797的博客
02-04 879
如何用python tkiner实现图片翻页功能发布时间：2020-06-26 12:52:59来源：亿速云阅读：108作者：Leah如何用python tkiner实现图片翻页功能？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。具体代码如下所示：import tkinter as tkimport tkinter.messageb...
Python tkinter快速可视化开发GUI界面指南：详细教程(附带工具)
热门推荐
C站全栈优质创作者、阿里云受邀博主专家，喜欢结识新伙伴寻找志同道合的朋友，欢迎一起探讨学习
03-28 3万+
Python tkinter快速可视化开发GUI界面指南：详细教程(附带工具)，可通过拖拽实现GUI代码的开发，适用对象 适用于学习了TKinter并不想太麻烦写GUI代码，也不想用其他工具和框架 比如wxPython,PyQt4的同学。 适用于界面不太复杂的小程序开发，界面复杂的还是适用wxPython等框架吧。 因为TKinter为Python标准库，使用TKinter完成的Python程序可以称为 “绿色软件”，不需要目标机器上安装wxPython,PyQt4等框架，只要有Python 的机器就能运行
日常学习记录——tkinter实现不同frame的页面跳转
weixin_39276221的博客
06-10 3465
想要实现类似于这种的框架的页面跳转：主界面通过两个按钮进入界面1或者界面2，界面1或者界面2通过返回按钮能到主界面进行重新选择。 运行结果如动图所示： 登录界面代码见上一篇博文，页面转换的逻辑实现只修改了MainPage和view这两个模块。..............................
日常学习记录——tkinter界面跳转遇到的问题
weixin_39276221的博客
06-01 2173
因为加入了异常捕获语句try except，所以稍微一遇到点错就直接宕机了，导致没有办法很好地定位问题。去掉 try…except异常捕获语句以后，发现了这个报错： self.createPage() AttributeError: ‘MainPage’ object has no attribute ‘createPage’ 参考博客：python易错点 | AttributeError: ‘xxxx’ object has no attribute ‘xxxx’。参考的是这篇文章：tkinter实现页面
tkinter绘制汽车
05-15
下面是一个简单的示例，展示如何使用 Tkinter 绘制一辆汽车： ```python import tkinter as tk # 创建窗口和画布 win = tk.Tk() canvas = tk.Canvas(win, width=400, height=300) canvas.pack() # 绘制车身 body = canvas.create_rectangle(50, 100, 250, 175, fill='red') # 绘制轮子 wheel1 = canvas.create_oval(75, 165, 125, 215, fill='black') wheel2 = canvas.create_oval(175, 165, 225, 215, fill='black') # 绘制车窗 window = canvas.create_polygon(150, 100, 250, 100, 225, 130, 175, 130, fill='white') # 启动主循环 win.mainloop() ``` 这个示例绘制了一个红色的车身、两个黑色的轮子和一个白色的车窗。你可以根据需要进行修改和扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值