Day12 用python写UI-聊聊选项钮与核取方块checkbox

今天要讲到我最喜欢的部分,选项钮与核取方块checkbox,觉得做出选项钮去选很好玩,很像在做测验。

♠♣今天的文章大纲♥♦

  • 选项钮常用参数
    • 实作选项钮
  • 核取方块
    • 实作选项钮

选项钮常用参数

可以将用函数或是方法,让使用选项钮时,使选项钮执行。

语法:Radiobutton( master, options, ... )

参数 说明
activebackground 滑鼠游标在选项钮时的背景颜色。
activeforeground 滑鼠游标在选项钮时的前景颜色。
anchor 如果空间大於所需时,控制选项钮的位置,预设是 CENTER。
bg 标签背景或 indicator 的背景颜色。
bitmap 位元图影像物件。
borderwidth或bd 边界宽度,预设是2px。
command 当使用者更改选项时,会自动执行此函数。
cursor 当滑鼠游标在选项纽时的外形。
fg 文字的颜色。
font 字型。
height 选项钮的文字有几行,预设1行。
highlightbackground 当选项钮取得焦点时的背景颜色。
highlightcolor 当选项纽取得焦点时的颜色。
image 影像物件,如果要建立有影像的选项钮时,可以使用此参数。
indicatoron 当此值为0时,可以建立盒子选项钮。
justify 当文字多行时,最後一行的对齐方式。
padx/pady 可设定选项钮与文字的间隔;可设定选项纽的上下间距。预设是1。
selectcolor 当选项钮被选取时的颜色。
selectimage 设定影像选项钮时,可由此设定当选项钮被选取时的不同影像。
state 预设是state=NORMAL,若是设定 DISABLE 则以灰阶显示选项钮表示暂时像。无法使用。
text 选项钮旁的文字。
textvariable 以变数方式显示选项钮文字。
underline 可以设定第几个文字有含底线,从0开始算起,预设是-1 表示不含底线。
value 选项钮的值,可以区分所选取的选项钮。
variable 设定或取得目前选取的选项按钮,它的值型态通常是 IntVar 或StringVar。
width 选项纽的文字区间有几个字元寛,省略时会自行调整为实际宽度。
wraplength 限制每行的文字数,预设是0。

实作选项钮

用矩阵的方式列出所有学历程度,预设选项值为0,最後建立选项钮,执行後会将选择印在python shell中。

import tkinter as tk

root = tk.Tk()
root.geometry("350x400+200+300")
root.title('cuteluluWindow')
root.configure(bg="#7AFEC6")
root.iconbitmap('heart_green.ico')
root.geometry('300x200')

def Selection ():
    print(schools [var.get()]) 

schools = {0:"国小",1:"国中",2:"高中",3:"大学",4:"硕士/博士"}


var = tk.IntVar()

var.set(0)
![https://ithelp.ithome.com.tw/upload/images/20210927/20140047IaqAJzeYOX.png](https://ithelp.ithome.com.tw/upload/images/20210927/20140047IaqAJzeYOX.png)
l = tk.Label(root, text="最高学历" ,fg="#8B008B", bg="#7AFEC6", width=30)
l.pack()

for val, school in schools.items():
    R=tk.Radiobutton (root,text=school,variable=var, value=val,command=Selection)
    R.pack()

root.mainloop()

执行结果⬇⬇⬇
https://ithelp.ithome.com.tw/upload/images/20210927/20140047kpVlMS5adn.png
选择後结果出现python shell
https://ithelp.ithome.com.tw/upload/images/20210927/20140047M0yNZtifsk.png

tkinter还有一种选项的样式,就是盒子选项钮,在Radiobutton里面加入indicatoron这边就用刚刚的程序码去做调整。

 R=tk.Radiobutton (root,text=school,indicatoron=0,variable=var, value=val,command=Selection)

https://ithelp.ithome.com.tw/upload/images/20210927/201400474hLj9Koa9o.png
选择後结果也会出现python shell
https://ithelp.ithome.com.tw/upload/images/20210927/20140047GmgAUruypW.png

接下来做一个把图片放进选项钮的实例,如果想知道更详细关於图加进介面或是按钮的说明,可以去看我Day7Day8的介绍喔~~

import tkinter as tk

root = tk.Tk()
root.geometry("350x400+200+300")
root.title('cuteluluWindow')
root.configure(bg="#7AFEC6")
root.iconbitmap('heart_green.ico')
root.geometry('300x300')

def imageSelection ():
    label.config(text="Your choise is "+var.get())

imgF = tk.PhotoImage(file="facebook.gif")#图一
imgI = tk.PhotoImage(file="instagram.gif")#图二
imgT = tk.PhotoImage(file="twitter.gif")#图三

var = tk.StringVar()
var.set("twitter")

label = tk.Label (root, text="Choise one!", bg="#7AFEC6",fg="#FFAAD5",width=30,font=("Ravie",10,"bold"))
label.pack()

rbF=tk.Radiobutton(root, image=imgF,text="facebook", compound="top", variable=var, value="facebook",command=imageSelection)

rbF.pack()
rbI=tk.Radiobutton(root, image=imgI,text="instagram", compound="top", variable=var,value="instagram",command=imageSelection)

rbI.pack()

rbT=tk.Radiobutton (root, image=imgT,text="twitter",compound="top", variable=var,value="twitter",command=imageSelection)
rbT.pack()

root.mainloop()

执行结果⬇⬇⬇
https://ithelp.ithome.com.tw/upload/images/20210927/20140047oN9iRrt2zR.png
https://ithelp.ithome.com.tw/upload/images/20210927/2014004733H29UMfpa.png


核取方块

核取方块checkboxes,是可以复选的选项钮,跟选项钮一样的是都是用函数跟方法去让核取方块执行。

语法:Checkbutton(master, options, ...)

参数 说明
activebackground 滑鼠游标在选项钮时的背景颜色。
activeforeground 滑鼠游标在选项钮时的前景颜色。
disableforeground 无法操作时的颜色。
bg 标签背景或 indicator 的背景颜色。
bitmap 位元图影像物件。
borderwidth或bd 边界宽度,预设是2px。
command 当使用者更改选项时,会自动执行此函数。
cursor 当滑鼠游标在选项纽时的外形。
fg 文字的颜色。
font 字型。
height 选项钮的文字有几行,预设1行。
highlightbackground 当选项钮取得焦点时的背景颜色。
highlightcolor 当选项纽取得焦点时的颜色。
image 影像物件,如果要建立有影像的选项钮时,可以使用此参数。
offvalue 控制变数,预设为选取值为0。
onvalue 控制变数,预设为选取值为1。
justify 当文字多行时,最後一行的对齐方式。
padx/pady 可设定选项钮与文字的间隔;可设定选项纽的上下间距。预设是1。
selectcolor 当选项纽被选取时的颜色。
selectimage 设定影像选项钮时,可由此设定当选项钮被选取时的不同影像。
state 预设是state=NORMAL,若是设定 DISABLE 则以灰阶显示选项钮表示暂时像。无法使用。
text 选项钮旁的文字。
relief 预设为FLAT,控制核取方块外框。
underline 可以设定第几个文字有含底线,从0开始算起,预设是-1 表示不含底线。
width 选项纽的文字区间有几个字元寛,省略时会自行调整为实际宽度。
wraplength 限制每行的文字数,预设是0。

实作选项钮

做一个可以选喜欢的水果的介面,可以复选,选完後按下按钮结果会在python shell出现

import tkinter as tk

root = tk.Tk()
root.geometry("350x400+200+300")
root.title('cuteluluWindow')
root.configure(bg="#7AFEC6")
root.iconbitmap('heart_green.ico')
root.geometry('350x200')

def fruitselect():
    selection = " "
    for i in checkboxes:
        if checkboxes[i].get() ==True:
            selection = selection + fruits[i] + "\t"
        print (selection)

l=tk.Label (root, text="Choise your favirot fruit. ", fg="#FFAAD5", bg="#7AFEC6",font=("Ravie",10,"bold"),width=30)
l.grid(row=0)

fruits = {0:"Strawberry",1: "Peach",2:"mango",3:"Cherry"}#矩阵内的内容

checkboxes = {}

for i in range (len (fruits)):
    checkboxes[i] = tk.BooleanVar()#布林值变数
    Cb = tk.Checkbutton(root, text=fruits[i], variable=checkboxes[i])
    Cb.grid (row=i+1)

btn = tk.Button (root, text="DOWN" ,width=10, command=fruitselect)

btn.grid(row=i+2)

root.mainloop()

执行结果⬇⬇⬇
https://ithelp.ithome.com.tw/upload/images/20210927/20140047ahDDv47H9T.png
https://ithelp.ithome.com.tw/upload/images/20210927/201400477wsLbdB8Sw.png


以上是今天的部分,今天的内容感觉有点长,不过都不是很难,只要了解如何使用参数或方法去让按钮执行就可以了。
明天会进入Frame这个主题喔~~
/images/emoticon/emoticon08.gif


<<:  Day13 HTML三

>>:  postman

使用 Vaadin Directory 组件显示Google地图 - day27

目的 地图反查经纬度,将地图显示在立委服务地区旁。 本篇重点: 导入Vaadin direction...

Day 25: AI机器学习 — TensorFlow初探 (下)

接续上偏TensorFlow初探 (上) TensorFlow 辅助阅读: TensroFlow G...

Day-25 事件机制(1)

在网页中的JavaScript程序码,必须经由事件触发(如:按下按钮,又称事件驱动event-dri...

Day 28 - Spring Security (五) JwtAuthenticationProvider

实作 新增依赖 <!-- JWT --> <dependency> <...

DAY17 MongoDB Replication 观念

DAY17 MongoDB Replication 观念 本系列至今都是介绍 MongoDB 在单一...