目录

Tkinter组件 ​

CheckButton复选框控件

语法

显示多选框内容代码：

单选框

ListBox列表框

创建一个listbox

向列表框添加元素

在列表框开头添加元素 

在列表框末尾添加元素

删除列表框元素 

选中列表框中的元素

获取列表框中元素的个数

返回当前选中的元素的索引项

判断列表中一个元素是否被选中

打印列表框中元素

修改列表框中元素

给列表框绑定事件

列表框支持shift和control

列表框支持多选MULTIPLE

scale控件

创建scale

Tkinter组件 



CheckButton复选框控件

Python Tkinter 复选框用来选取我们需要的选项，它前面有个小正方形的方块，如果选中则有一个对号，也可以再次点击以取消该对号来取消选中。

语法

语法格式如下：

w = Checkbutton ( master, option=value, ... )

master: 按钮的父容器。
	
options: 可选项，即该按钮的可设置的属性。这些选项可以用键 = 值的形式设置，并以逗号分隔。
 

显示多选框内容代码：

import tkinter

#创建主窗口
win = tkinter.Tk()
win.title("主界面")
win.geometry("300x300")

def updata():
    message = ""
    if hobby1.get() == True:
        message += "money\n"
    if hobby2.get() == True:
        message += "power\n"
    if hobby3.get() == True:
        message += "person\n"
    #清除text中所有的内容
    Text.delete(0.0,tkinter.END)
    Text.insert(tkinter.INSERT,message)
#创建多选框
#绑定变量
hobby1 = tkinter.BooleanVar()
check1 = tkinter.Checkbutton(win,text="money",variable = hobby1,command = updata)
hobby2 = tkinter.BooleanVar()
check2 = tkinter.Checkbutton(win,text="power",variable = hobby2,command = updata)
hobby3 = tkinter.BooleanVar()
check3 = tkinter.Checkbutton(win,text="person",variable = hobby3,command = updata)
check1.pack()
check2.pack()
check3.pack()

Text = tkinter.Text(win,width=30,height=15)
Text.pack()

win.mainloop()





 

单选框

单选按钮控件；显示一个单选的按钮状态

语法：w = Radiobutton ( master, option=value, ... )

绘制一个单选框代码

#创建多选框
#绑定变量
i = tkinter.IntVar()
check1 = tkinter.Radiobutton(win,text="one",value = 1,variable = i)
check2 = tkinter.Radiobutton(win,text="two",value = 2,variable = i)
check3 = tkinter.Radiobutton(win,text="three",value = 3,variable = i)
check1.pack()
check2.pack()
check3.pack()
Text = tkinter.Text(win,width=30,height=15)
Text.pack()



ListBox列表框

 列表框控件；在Listbox窗口小部件是用来显示一个字符串列表给用户

可以包含一个或者多个文本框，可以在listbox控件的小窗口显示字符串

创建一个listbox

#创建一个listbox
lb = tkinter.Listbox(win,selectmode = tkinter.BROWSE)
lb.pack()
win.mainloop()




向列表框添加元素

#创建一个listbox，添加几个元素
lb = tkinter.Listbox(win,selectmode = tkinter.BROWSE)
lb.pack()
for i in ["ok","very","distance","parrlen"]:
    #按顺序添加
    lb.insert(tkinter.END,i)
win.mainloop()



在列表框开头添加元素 

#在列表框开头添加
lb.insert(tkinter.ACTIVE,"cool")



在列表框末尾添加元素

lb.insert(tkinter.END,"WARM")



删除列表框元素 

语法: lb.delete(参数1，参数2)

参数1为开始的索引，参数2为结束的索引,不添加参数2，就只删除第一个索引引出的内容

for i in ["ok","very","distance","parrlen"]:
    #按顺序添加
    lb.insert(tkinter.END,i)
#删除元素 参数1为开始的索引，参数2为结束的索引,不添加参数2，就只删除第一个索引引出的内容
lb.delete(1,2)



选中列表框中的元素

语法：lb.select_set(参数1，参数2)

参数1为开始的索引，参数2为结束的索引,不添加参数2，就只选中第一个索引引出的内容

for i in ["ok","very","distance","parrlen"]:
    #按顺序添加
    lb.insert(tkinter.END,i)
#选中元素
lb.select_set(1,2)



获取列表框中元素的个数

语法：列表框.size()

print(lb.size())



 

返回当前选中的元素的索引项

语法：lb.curselection()

lb.select_set(1,2)
#返回当前选中的元素的索引项
print(lb.curselection())





判断列表中一个元素是否被选中

#判断一个元素是否被选中
print(lb.selection_includes(0))
print(lb.selection_includes(2))





打印列表框中元素

语法：lb.get()

#绑定变量
lbv = tkinter.StringVar()
#SINGLE与BROWSE相似，但SINGLE不支持鼠标按住后移动选中元素，只能按下鼠标才能选中元素
lb = tkinter.Listbox(win,selectmode = tkinter.SINGLE,listvariable = lbv)
lb.pack()
for i in ["ok","very","distance","parrlen"]:
    #按顺序添加
    lb.insert(tkinter.END,i)
#打印当前列表中元素
print(lbv.get())



修改列表框中元素

语法：.set()

#打印当前列表中元素
print(lbv.get())
#设置选项
lbv.set(("1","2","3"))
print(lbv.get())





给列表框绑定事件

双击列表框内元素后，将会打印该元素的索引

def fun(event):
    print(lb.curselection())
#绑定事件,双击
lb.bind('<Double-Button-1>',fun)



列表框支持shift和control

EXTENDED 可以使列表框支持shift和control

#EXTENDED 可以使列表框支持shift和control
lb = tkinter.Listbox(win,selectmode = tkinter.EXTENDED)
lb.pack()

按住control能继续选中元素 



列表框支持多选MULTIPLE

点击列表框中的元素，第一次选中，第二次取消

ctrl+a全部选中

#MULTIPLE 支持多选
lb = tkinter.Listbox(win,selectmode = tkinter.MULTIPLE)
lb.pack()
for i in ["ok","very","distance","parrlen","ok","very","distance","parrlen","ok","very","distance","parrlen","parrlen","ok","very","distance","parrlen"]:
    #按顺序添加
    lb.insert(tkinter.END,i)



 

scale控件

范围控件；显示一个数值刻度，为输出限定范围的数字区间

供用户通过拖拽指示器改变变量的值，可以水平，也可以竖直，默认竖直

创建scale

#创建主窗口
win = tkinter.Tk()
win.title("主界面")
win.geometry("300x200")
#scale 起始值0，终点100
scale = tkinter.Scale(win,from_ = 0,to = 100)
scale.pack()



设置scale水平orient = tkinter.HORIZONTAL

scale = tkinter.Scale(win,from_ = 0,to = 100,orient = tkinter.HORIZONTAL)
scale.pack()



tickinterval选择值将会为该值的倍数，length为scale长度

scale = tkinter.Scale(win,from_ = 0,to = 100,orient = tkinter.HORIZONTAL,tickinterval = 10,length=200)



 

一起学习，一起进步 -.- ，如有错误，可以发评论 

背景：
要实现的功能是：消息CBN_SELCHANGE响应函数中获取下拉列表框中被选中的项的内容（CString类型）。



问题：
combobox控件默认的风格是Dropdown，在风格下CBN_SELCHANGE响应函数获取到的内容是上一次选中的内容，而不是当前选中的内容。



解决方法：
把combobox控件的风格改为Drop List，即可在CBN_SELCHANGE响应函数中获取当前选中的内容。


CBN_SELCHANGE响应函数的代码如下：
void
 CTestDlg::OnSelchangeComboTest() 
{
// TODO: Add your control notification handler code here
CString str(_T(""));
m_cbTest.GetWindowText(str);
}


其中m_cbTest为和combobox控件相关联的控件变量。

1.CCOmboBox类：
（1）CCOmboBox.GetCurSel()



函数原型：


int GetCursel( ) const;




返回值：


返回组合框中列表框中当前选中的项的下标。如果没有选中项，则返回CB_ERR。




说明：


本函数用于MFC编程时，调用这个函数来确定哪些项目在组合框中被选中。
（2）CCOmboBox.GetBText()


Gets a string from the list box of a combo box.

intGetLBText( intnIndex, LPTSTRlpszText )const;

voidGetLBText( intnIndex, CString&rString )const;




参数说明


nIndex为列表框中数据的索引值, rString 为字符串,




函数说明


把索引号为nIndex的数据放到rString变量中. 与其对应的GetLBTextLen(int nIndex)函数就是得到索引号为nIndex中数据的长度。
 

写在前面

最近做了一下网易游戏的笔试题，最后一道题是叫你设计一个抽奖九宫格动画，当时有思路但是有很大的瑕疵，故而有了这次git。

开发环境

vuejs框架
	
ajax用的是axios
思路

首先必须将UI设计好；
	
声明一个list对象用于存放九宫格中的内容列表，包括奖项、抽奖按钮、谢谢参与等，然后通过v-for将这些项填充到九宫格中；
	
声明一个activeIndex来标记当前被选中的项；
	
v-bind绑定class值，通过九宫格每个格子的序号是否与activeIndex相对应来赋予不同的class，即样式，这样，被选中的格子就和其他格子区分开来了；
	
抽奖动画实现原理：基于上面的准备，我们只要更改activeIndex的值，就能切换选中格子，再结合setInterval函数就可以形成流畅的动画效果；
	
为抽奖按钮设置一个click事件，事件回调流程: 九宫格先遍历切换3圈，之后再向后台请求数据获得中将号码（九宫格的序号），然后再根据序号遍历到相应位置后给出提示：中奖了或者很遗憾没有中奖；
代码

前端：详见项目代码；
	
后台：后台写一个award接口返回一个对象如：{code:0, data: {award: 1}}，其中code为0表示数据返回正常，data中的award表示中将号码，比如0就代表着谢谢参与；
项目运行结果

抽奖前：

	
执行抽奖后：

项目组件化

1. 为什么要组件化：

组件化能够实现代码的复用，另外像抽奖九宫格这种组件，其仅仅只有一种样式或者只有一种动画效果，绝对是往往不够用的，这类组件如果能够让开发者自定义的化，就会方便很多，通过根据用户的需求进行不同的配置以实现不同需求。

2. 如果需要组件化，组件需要进行哪些配置：


3. 如何实现：

运用vuejs的组件Component机制进行开发，通过添加属性的方式，设置上面2步骤中的各项配置。(主要运用vue实例的props属性参数进行)

4. 组件使用方式：
a. 在src中的components目录下，有一个bonusComponent.vue文件，该文件就是组件化后的组件，我们在要使用的.vue页面中引入它：import bonusComponent from '@/components/bonusComponent';

b. vue实例中添加组件配置：

components: { 'bonusComponent': bonusComponent }

c. 组件使用：

<bonusComponent 
  :cellList="list"
  backStageInterface="http://localhost:8081/award"
  :preDuration="100"
  :behiDuration="200"

  boxBorderRadius="10px"
  :cellSize="150"
  cellBg="yellow"
  cellActiveColor="#ffbbbb"
  bonusBtnBg="#00c6ff"

  :isBox="true"
  boxPadding="50px 100px"
  boxBg="#c80101"
  head="幸运大抽奖"
  foot="感谢您的参与"
  cellRadius="10px"
  :cellSpace="10"
  :bonusBtnShape="false">
</bonusComponent>


上面的各项属性就是我们需要配置的，来看看该栗子的运行结果吧：


5. 组件配置文档：

首先来看下vuejs中组件内配的props:

    /**公共属性 */
    //九宫格抽奖项内容列表
    cellList: {
      type: Array,
      validator: function(value) {
        return value.length === 9
      },
      required: true
    },
    //中奖号码获取接口
    backStageInterface: {
      type: String,
      required: true
    },
    //前期选择动画间隔(默认为100ms)
    preDuration: {
      type: Number,
      default: 100
    },
    //后期选择动画间隔(默认为200ms)
    behiDuration: {
      type: Number,
      default: 200
    },
    //九宫格外框圆角(默认为5px)
    boxBorderRadius: String,
    //九宫格尺寸(默认为100px)
    cellSize: Number,
    //九宫格的背景色(默认为白色)
    cellBg: String,
    //九宫格激活状态下的背景色(默认为灰色)
    cellActiveColor: String,
    //九宫格抽奖按钮背景色(默认为红色)
    bonusBtnBg: String,

    /**盒子模型中独有的属性 */
    //是否使用盒子模型
    isBox: {
      type: Boolean,
      default: false
    },
    //盒子模型的padding值
    boxPadding: {
      type: String,
      default: '100px 100px'
    },
    //盒子模型背景颜色
    boxBg: {
      type: String,
      default: "red"
    },
    //盒子模型头部
    head: {
      type: [String, Boolean],
      default: false
    },
    //盒子模型底部
    foot: {
      type: [String, Boolean],
      default: false
    },
    //盒子模型中九宫格的圆角(默认为5px)
    cellRadius: {
      type: String,
      default: '5px'
    },
    //盒子模型时九宫格的间隔
    cellSpace: {
      type: Number,
      default: 5
    },
    //盒子模型时九宫格抽奖按钮形状(默认为方形)
    bonusBtnShape: {
      type: Boolean,
      default: true
    },

    /**正常盒子模型中的属性 */
    //九宫格外框宽度(默认为5px)
    boxBorderWidth: String,
    //九宫格外框颜色(默认为红色)
    boxBorderColor: String,
    //九宫格边框宽度(非盒子模型时)(默认为2px)
    cellBorderWidth: {
      type: String,
      default: "2px"
    },
    //九宫格边框颜色(非盒子模型时)(默认为红色)
    cellBorderColor: {
      type: String,
      default: "red"
    }


属性列表：


	
公共属性：
cellList：数组类型（Array），必填项，需要输入九条文本标识9个格子的内容；
backStageInterface：字符串类型（String），必填项，后台接口调用地址，用于返回中奖信息，格式为{code: 0, data: {award: 1}}，code标识数据是否返回正常，0标识正常，1表示数据返回错误，award则表示中奖的号码(0-8)，分别代表着九宫格除抽奖按钮之外8个格子对应的8个奖项；
preDuration：数字类型（Number），设置抽奖时奖项遍历前期的动画切换间隔，默认为100，单位为ms；
behiDuration：数字类型（Number），设置抽奖时奖项遍历后期的动画切换间隔，默认为200，单位为ms；
boxBorderRadius：字符串类型（String），九宫格盒子的边框圆角，默认为5px；
cellSize：数字类型（Number），九宫格格子的尺寸，默认为100px；
cellBg：字符串类型（String），九宫格格子的背景色，默认为白色；
cellActiveColor：字符串类型（String），九宫格奖项在激活时（被选中）的背景色，默认为灰色；
bonusBtnBg：字符串类型（String），九宫格抽奖按钮背景色，默认为红色；
	
	

	
盒子模型属性：

	所谓盒子模型就是上面那个栗子运行结果的形式，九宫格被一个大盒子包围，并且可以设置相应的头部和底部文本。

	
isBox：布尔类型（Boolean），标识是否为盒子模型，它有默认值false，即默认为非盒子模型，仅仅是一个九宫格，没有大盒子包围，盒子模型的其他属性配置将会无效；
boxPadding：字符串类型（String），盒子模型时包含九宫格的大盒子的内边距，默认值为'100px 100px'；
boxBg：字符串类型（String），盒子模型时盒子背景颜色，默认为红色；
head；字符串或者布尔类型（String Boolean），标识盒子模型时的头部文本，默认为false，即没有头部文本；
foot：字符串或者布尔类型（String Boolean），标识盒子模型时的底部文本，默认为false，即没有底部文本；
cellRadius：字符串类型（String），标识盒子模型时九宫格格子的圆角，默认为'5px'；
cellSpace：数值类型（Number），盒子模型时九宫格每项的间隔距离，默认为5；
bonusBtnShape: 布尔类型（Boolean），盒子模型时九宫格抽奖按钮的形状，默认为true，标识方形，false为圆形；
	
	

	
非盒子模型：
boxBorderWidth：字符串类型（String），非盒子模型时九宫格外框边框宽度，默认为5px；
boxBorderColor：字符串类型（String），非盒子模型时九宫格外框边框颜色，默认为红色；
cellBorderWidth：字符串类型（String），非盒子模型时九宫格格子边框宽度，默认为2px；
cellBorderColor：字符串类型（String），非盒子模型时九宫格格子边框颜色，默认为红色；
	
6. 盒子模型和非盒子模型：
盒子模型：


非盒子模型：


7. 版本说明：

v1.0.0: 初步组件化实现抽奖九宫格抽奖功能；

问题：

属性太多，设置繁琐；
	
只能进行简单的配置，比如我想要配图标就无能为力了；
	
组件默认为fixed，应该设置一个属性标识组件是否fixed；
下次子版本期望：

简化属性设置，通过传对象的方式来进行配置，写在组件标签上的属性数，增加代码可读性；
	
能够配置图标，增强用户体验性；
	
设置一个属性标识是否fixed，增强灵活配置可控性；
====================

v0.1.0: 未组件化实现抽奖九宫格抽奖功能；

问题：

未组件化，代码组织不好；
下次版本期望：

组件化项目功能；