tkinter绘制组件（14）——选值框_tkinter 选择框

引言

选值框类似于下拉框，都是用来允许使用者通过该组件选定自己需要的内容，同时让界面程序获取这个内容。但是两者是有区别的，下拉框仅仅是显示出几个可选的值，让使用者进行选择，而选值框的选择是有逻辑的，同时所允许选的内容也是有一定逻辑的。

简单来说，下拉框可以是提供任何有关内容的选取，而选值框，则是允许选择有顺序或逆序逻辑的内容，比如数值、大小等逻辑项。

在TinUI中，我们将要实现类似的功能。

---

布局

函数结构

def add_spinbox(self,pos:tuple,width=150,data=('1','2','3'),now='',fg='black',bg='',activefg='black',activebg='#E5F1FB',font=('微软雅黑',12),command=None):#绘制选值框
    '''
    pos::位置
    width::输入/选值显示框宽度
    data::选值数据，格式：(ele1,ele2,ele3...)
    now::当前显示范围，如果为空或不再选值数据，则显示选值数据第一个内容
    fg::输入框文本颜色
    bg::输入框背景颜色
    activefg::按钮响应文本颜色
    activebg::按钮响应背景颜色
    font::显示字体，同时影响上调/下调按钮字体
    command::选值时的回调函数，必须接受一个参数：被选定的值
    '''
1
2
3
4
5
6
7
8
9
10
11
12
13
'
运行
运行

选值显示

为了方便和完成选值框应有的输入选值功能，我们直接使用Entry控件作为选值框的主体，目前我们还没有确定如何判断输入框直接输入选值，以及输入后再使用调节按钮选值问题的相关功能，所以我们先将输入框绘制出来再说。

我们主要解决两个问题：

1. Entry控件不允许背景色透明，因此我们需要获取TinUI背景色代替
2. 判断参数“now”是否规范，并进行相关操作

if bg=='':#获取TinUI背景色
    bg=self['background']
wentry=Entry(self,font=font,fg=fg,bd=2,bg=bg,relief='groove')
if now=='' or now not in data:#判断默认值应该取何值
    now=data[0]
wentry.insert(0,now)
entry=self.create_window(pos,window=wentry,width=width,anchor='nw')
1
2
3
4
5
6
7

通过注释，应该能够理解这一段代码的含义。

调节按钮

上文已经绘制出来的输入框，接下来我们将要绘制调节按钮。

因为TinUI已经提供了绘制按钮（button）的功能，因此spinbox的调节按钮将直接使用TinUI绘制按钮的功能。

但如何根据输入框的尺寸以及位置绘制调节按钮呢？

首先是字体问题，TinUI的按钮实际上是根据文本尺寸绘制的，因此我们需要确定文本大小。输入框的文本来自于参数，那么我们可以直接获取文本内容，同时将字体大小缩小至原来的一半，就可以完成一个调节按钮的文本绘制了。但是根据测试，在“微软雅黑”字体下，字体大小要缩小至原来的约三分之一，在绘制时才能够是原来的一半大小，其它字体需要自己测试。

接着是按钮的位置，既然你TinUI绘制组件已经出了十几篇文章，控件位置绘制应该有一定的基础了，直接给代码：

若还没有掌握通过某一画布对象的尺寸和位置绘制相关的画布对象，请查看本专栏前几篇文章，熟悉组件绘制思路。

bbox=self.bbox(entry)
height=bbox[3]-bbox[1]#获取总高度
font=(font[0],font[1]//3)#设置字体大小
#上调按钮
button1=self.add_button((pos[0]+width+2,pos[1]+3),text='▲',activefg=activefg,activebg=activebg,font=font)
#下调按钮
button2=self.add_button((pos[0]+width+2,pos[1]-5+height),text='▼',activefg=activefg,activebg=activebg,font=font,anchor='sw',command=downdata)
#稍后需要用到的数据记录结构体
datanum=TinUINum()
datanum.num=data.index(now)#记录数据位置
maxnum=len(data)-1#最大位置
1
2
3
4
5
6
7
8
9
10
11

上调/下调按钮方法

既然我们已经绘制出来了所有组件，那么现在开始丰富其功能。

对于直接通过调节按钮取值，我们可以先获取当前取值，然后根据具体的调节方向重新取值并显示该内容。

def updata(event):#上调功能
    index=datanum.num-1
    if index<0:
        return
    datanum.num-=1
    wentry.delete(0,'end')
    wentry.insert(0,data[index])
    if command!=None:
        command(data[index])
def downdata(event):#下调功能
    index=datanum.num+1
    if index>maxnum:
        return
    datanum.num+=1
    wentry.delete(0,'end')
    wentry.insert(0,data[index])
    if command!=None:
        command(data[index])
#...
button1=self.add_button((pos[0]+width+2,pos[1]+3),text='▲',activefg=activefg,activebg=activebg,font=font,command=updata)
button2=self.add_button((pos[0]+width+2,pos[1]-5+height),text='▼',activefg=activefg,activebg=activebg,font=font,anchor='sw',command=downdata)
#...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

为两个调节按钮绑定调节函数。

输入取值与更改调节

当取值量比较大时，不可能让使用者一直点调节按钮，否则鼠标都吃不消。说以，我们需要让输入框能够直接输入取值，同时在使用调节按钮的时候考虑到当前的输入取值。

先来设计判断输入取值是否符合规定的函数：

def check_in_data():
    val=wentry.get()
    if val in data:
        return True,val
    else:
        return False,val
1
2
3
4
5
6
'
运行
运行

然后在每个调节函数前添加一段代码，用来判断当前取值的位置，以及下一次调节使用选值的位置。

def updata(event):
    val=check_in_data()
    if val[0]==True:
        datanum.num=data.index(val[1])
    #...
def downdata(event):
    val=check_in_data()
    if val[0]==True:
        datanum.num=data.index(val[1])
    #...
1
2
3
4
5
6
7
8
9
10
'
运行
运行

完整代码函数

def add_spinbox(self,pos:tuple,width=150,data=('1','2','3'),now='',fg='black',bg='',activefg='black',activebg='#E5F1FB',font=('微软雅黑',12),command=None):#绘制选值框
    def updata(event):
        val=check_in_data()
        if val[0]==True:
            datanum.num=data.index(val[1])
        index=datanum.num-1
        if index<0:
            return
        datanum.num-=1
        wentry.delete(0,'end')
        wentry.insert(0,data[index])
        if command!=None:
            command(data[index])
    def downdata(event):
        val=check_in_data()
        if val[0]==True:
            datanum.num=data.index(val[1])
        index=datanum.num+1
        if index>maxnum:
            return
        datanum.num+=1
        wentry.delete(0,'end')
        wentry.insert(0,data[index])
        if command!=None:
            command(data[index])
    def check_in_data():
        val=wentry.get()
        if val in data:
            return True,val
        else:
            return False,val
    if bg=='':
        bg=self['background']
    wentry=Entry(self,font=font,fg=fg,bd=2,bg=bg,relief='groove')
    if now=='' or now not in data:
        now=data[0]
    wentry.insert(0,now)
    entry=self.create_window(pos,window=wentry,width=width,anchor='nw')
    bbox=self.bbox(entry)
    height=bbox[3]-bbox[1]
    font=(font[0],font[1]//3)
    button1=self.add_button((pos[0]+width+2,pos[1]+3),text='▲',activefg=activefg,activebg=activebg,font=font,command=updata)
    button2=self.add_button((pos[0]+width+2,pos[1]-5+height),text='▼',activefg=activefg,activebg=activebg,font=font,anchor='sw',command=downdata)
    datanum=TinUINum()
    datanum.num=data.index(now)#记录数据位置
    maxnum=len(data)-1#最大位置
    return wentry,button1,button2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
'
运行
运行

---

效果

测试代码

def test(event):
    a.title('TinUI Test')
    b.add_paragraph((50,150),'这是TinUI按钮触达的事件函数回显，此外，窗口标题也被改变、首行标题缩进减小')
    b.coords(m,100,5)
def test1(word):
    print(word)
def test2(event):
    ok1()
def test3(event):
    ok2()
def test4(event):
    from time import sleep
    for i in range(1,101):
        sleep(0.02)
        progressgoto(i)

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

    b=TinUI(a,bg='white')
    b.pack(fill='both',expand=True)
    m=b.add_title((600,0),'TinUI is a test project for futher tin using')
    m1=b.add_title((0,680),'test TinUI scrolled',size=2,angle=24)
    b.add_paragraph((20,290),'''     TinUI是基于tkinter画布开发的界面UI布局方案，作为tkinter拓展和TinEngine的拓展而存在。目前，TinUI尚处于开发阶段。如果想要使用完整的TinUI，敬请期待。''',
    angle=-18)
    b.add_paragraph((20,100),'下面的段落是测试画布的非平行字体显示效果，也是TinUI的简单介绍')
    b.add_button((250,450),'测试按钮',activefg='white',activebg='red',command=test,anchor='center')
    b.add_checkbutton((80,430),'允许TinUI测试',command=test1)
    b.add_label((10,220),'这是由画布TinUI绘制的Label组件')
    b.add_entry((250,300),350,30,'这里用来输入')
    b.add_separate((20,200),600)
    b.add_radiobutton((50,480),300,'sky is blue, water is blue, too. So, what is your heart',('red','blue','black'),command=test1)
    b.add_link((400,500),'TinGroup知识库','http://tinhome.baklib-free.com/')
    _,ok1=b.add_waitbar1((500,220),bg='#CCCCCC')
    b.add_button((500,270),'停止等待动画',activefg='cyan',activebg='black',command=test2)
    bu1=b.add_button((700,200),'停止点状滚动条',activefg='white',activebg='black',command=test3)[1]
    bu2=b.add_button((700,250),'nothing button 2')[1]
    bu3=b.add_button((700,300),'nothing button 3')[1]
    b.add_labelframe((bu1,bu2,bu3),'box buttons')
    _,_,ok2=b.add_waitbar2((600,400))
    b.add_combobox((600,550),text='你有多大可能去珠穆朗玛峰',content=('20%','40%','60%','80%','100%','1000%'))
    b.add_button((600,480),text='测试进度条（无事件版本）',command=test4)
    _,_,_,progressgoto=b.add_progressbar((600,510))
    b.add_table((180,630),data=(('a','space fans over the world','c'),('you\ncan','2','3'),('I','II','have a dream, then try your best to get it!')))
    b.add_paragraph((300,810),text='上面是一个表格')
    b.add_onoff((600,100))
    b.add_spinbox((680,100))

    a.mainloop()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

最终效果

2022-2-12新样式

组件样式更加规整。

2023-1-29新样式

• 圆角控件
• 增加line参数，更改基础色参数
• 返回back，outline元素

2023-11-19更新

返回值string为TinUIString类，本身为返回值文字文本，string.num则为返回值在data中的索引，从0开始。

---

github项目

TinUI的github项目地址

pip下载

pip install tinui
1

结语

现在你可以将TinUI运用到你自己的tkinter项目了。

我开通了我自己的个人博客，欢迎访问。