基本上Kivy中的UI组件都是继承Widget，掌握好Widget就基本上掌握了UI组件的使用。

1. Widget的设计理念；
2. Widget的基本使用；

一、Widget组件的默认值与一些默认行为

（1）Widget不是布局，Widget不会改变其包含的子组件的位置与大小。
（2）Widget的默认大小是100*100。
（3）Widget的size_hint默认是1*1，如果其父组件是一个布局组件，则其大小是父组件中的布局需要的大小。
（4）on_touch_down(), on_touch_move(), on_touch_up() 等函数不进行组件边界范围判定（碰撞判定），需要调用collide_point()
来判定。
下面使用例子说明：【 UI01_Widget_default.py 】

#coding=utf-8
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.graphics import Color
from kivy.graphics import Rectangle
from kivy.core.window import Window

class MyWidget(Widget):
    # 3. on_touch_down(), on_touch_move(), on_touch_up() 不检测Widget的触发边界
    # 点击Widget区域之外，事件照样触发。
    def on_touch_up(self, touch):
        print(touch)

class WidgetApp(App):
    def build(self):
        widget=MyWidget()

        #1. size与size_hint的默认值。
        print("大小:(%d,%d)"%(widget.width,widget.height))         #(100，100)
        print("大小提示(%d,%d)"%(widget.size_hint[0],widget.size_hint[1]))                #(1,1)

        widget.size = (Window.size[0] / 2, Window.size[1] / 2,)     #是窗体一般大小。

        with widget.canvas:
            Color(0,255,255)
            Rectangle(pos=widget.pos, size=widget.size)

        #2. 不改变子组件的位置与大小
        widget2=Widget()
        widget.add_widget(widget2)

        with widget2.canvas:
            Color(255,0,255)
            Rectangle(pos=widget2.pos, size=widget2.size)

        return widget

app=WidgetApp()
app.run()

运行控制台输出：

控制台输出说明Widget的大小默认值

运行界面

说明Widget不是布局，不会改变子组件大小位置（紫色为子组件Widget，父组件大小设置得与窗体一样大小）,点击组件以外的区域也会触发事件

二、Widget的设计理念

1. 事件驱动的属性设计

  所谓事件驱动的属性设计是指每个属性都可以绑定一个事件，当属性改变，可以触发一个事件。
  属性的事件是通过回调函数（on_属性名）实现。
代码如下：【 UI01_Widget_eventdriven.py 】

#coding=utf-8
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.graphics import Color
from kivy.graphics import Rectangle
from kivy.core.window import Window

class WidgetApp(App):
    def build(self):
        widget=Widget()
        #2. 使用on_<属性名>绑定一个事件方法。
        widget.on_size=self.changeSize()
        #3.改变size会触发change方法的调用。
        widget.size=(Window.size[0]/2,Window.size[1]/2,)
        with widget.canvas:
            Color(0,255,255)
            Rectangle(pos=widget.pos, size=widget.size)
        return widget

    #1.实现一个事件方法
    def changeSize(self):
        print("Size Change")

app=WidgetApp()
app.run()

当程序启动，会改变size属性，导致帮定的事件方法被调用。

当size属性改变，属性绑定的事件函数被调用的输出

2. 组件与图形分离的设计

  组件与图形分离，就是不按照传统的图形图像绘制实现套路，提供一个draw或者paint类似的方法，并提供一个图像绘制对象来集中实现图形图像的绘制（这个在Java Swing或者JavaFX，C++的Qt都是这个套路），传统的套路下，实现图像绘制一般会override绘制函数，并重新实现绘制过程。这样的缺点是必须要继承Widget，Override绘制函数。
  组件与图形分离的技术实际上C中惯用模式，通过开启一个绘制环境，在环境开始后，任何独立的绘制都影响绘制效果，绘制完毕后关闭绘制环境，之后的绘制就没有效果。在Kivy中这个绘制环境就是Canvas，在Widget中有这个成员。而绘制的函数与Canvas没有任何代码上的设计关联关系，这样实现绘制与Widget组件的宽耦合设计模式。
  组件与图形分离的编程模式在Python语言中特别容易实现，利用with语句块自动开启与自动关闭一个环境，编程模式如下:

  with  widget组件.canvas:                    #绘制环境开始
        绘制的相关操作
  pass                                       #绘制环境结束

下面使用简单代码说明这种绘制模式(代码绘制了一个白色矩形用来做背景，绘制了一个黄色线条)：【 UI01_Widget_graphics.py 】

#coding=utf-8
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.graphics import Color
from kivy.graphics import Rectangle
from kivy.graphics import *
from kivy.core.window import Window

class WidgetApp(App):
    def build(self):
        widget=Widget()
        widget.size=Window.size
        #Kivy不提供专门的图形绘制函数，而是采用组件与绘制分离模式，这样，可以在任何地方实现图形绘制。
        with widget.canvas:
            #设置颜色
            Color(255,255,255)
            #绘制一个与Widget一样大小的矩形
            Rectangle(pos=widget.pos, size=widget.size)
            Color(255, 255, 0)
            Line(points=[0,0,widget.size[0],widget.size[1]],width=5)
            print(widget.size)
        return widget

app=WidgetApp()
app.run()

运行结果如下：

在Widget中绘制图形

3. 组件边界检测设计

  Widget的事件处理，需要检测Widget的范围，否则在Widget组件外也会触发事件。为了保障只有在点击Widget材触发，需要做碰撞模式的边界判定，Widget组件中边界检测函数声明如下：

#判定（x，y）是否在Widget框内，在就返回True，否则返回False。
Widget.collide_point(x, y)

下面是测试代码：【 UI01_Widget_collide.py 】

#coding=utf-8
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.graphics import Color
from kivy.graphics import Rectangle
from kivy.core.window import Window

class TheWidget(Widget):
    def on_touch_down(self, touch):
        print(self.size,self.pos)
        print(self.collide_point(*touch.pos))


class TheApp(App):
    def build(self):
        parent_widget=Widget()
        with parent_widget.canvas:
            Color(255,0,0)
            Rectangle(pos=parent_widget.pos,size=Window.size)
        child_widget = TheWidget()
        with child_widget.canvas:
            Color(0,255,0)
            Rectangle(pos=child_widget.pos,size=child_widget.size)
        parent_widget.add_widget(child_widget)
        return parent_widget
    

TheApp().run()

  在绿色Widget区域点击返回True，在区域外返回False。不管在区域内外，事件都会触发，需要自己处理点击是否在Widget组件内还是组件外。
  在上面例子中，我们使用了两个Widget，原因是直接放在Window中的Widget尽管设置了size属性，但是在Widget添加在Window中的时候，Widget的size会设置成与Window的size一样大小。但是在Widget中的Widget不会。
运行界面如下：

运行界面

下面是在绿色Widget中点击一次，在外面点击一次的输出:

三、Widget的基本使用

  有些属性在后面使用说明，比如id与ids，cls(在kv语言的时候说明)，size_hint（在布局的时候说明）属性。

1. Widget构造

  class kivy.uix.widget.Widget(**kwargs)

其中**kwargs可是是Widget任何有效的属性，参数设置方式：

属性名=属性值

下面是Widget常用的属性：
基本属性

画布，透明与失效属性

集合属性

布局几何属性

下面是通过构造器使用属性的例子：【 UI01_Widget_property.py 】

#coding=utf-8
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.graphics import Color
from kivy.graphics import Rectangle
from kivy.graphics import *
from kivy.core.window import Window

class WidgetApp(App):
    def build(self):
        widget=Widget(opacity=0.5,size=Window.size)
        with widget.canvas:
            #设置颜色
            Color(255,255,255)
            #绘制一个与Widget一样大小的矩形
            Rectangle(pos=widget.pos, size=widget.size)

        return widget

app=WidgetApp()
app.run()

因为窗体背景是黑色，Widget是白色，设置为半透明后，显式效果是灰色。

通过构造器设置Widget的opacity属性

2. 事件使用

3. addWidget与remove_widget方法

add_widget(widget, index=0, canvas=None)
    widget：被添加的组件
    index：添加的索引位置，默认是0，就是插入到组件列表的第一个，但是最后绘制并显式。
    canvas：字符串参数，画布处理。取值'befoe','after',或者None。

remove_widget(widget)

4. 碰撞判定方法

5. export_to_png把组件导出为图像方法

export_to_png(filename, *args)

args参数没有使用。

6. Widget树访问

7. 容器与组件坐标变换

下面是方法使用的例子代码：【 UI01_Widget_method.py 】

#coding=utf-8
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.graphics import *
from kivy.core.window import Window

class MyWidget(Widget):
    def on_touch_down(self, touch):
        print("点击位置：",touch.pos)
        print("local:",self.to_local(*touch.pos,relative=True))
        print("parent:", self.to_parent(*touch.pos,relative=True))
        print("widget:", self.to_widget(*touch.pos,relative=True))
        print("window:", self.to_window(*touch.pos,relative=True))

class WidgetApp(App):
    def build(self):
        widget=Widget(size=Window.size)
        with widget.canvas:
            #设置颜色
            Color(255,0,255)
            #绘制一个与Widget一样大小的矩形
            Rectangle(pos=widget.pos, size=widget.size)

        mywidget=MyWidget(size=(400,400),pos=(200,200))
        with mywidget.canvas:
            #设置颜色
            Color(0,0,255)
            #绘制一个与Widget一样大小的矩形
            Rectangle(pos=mywidget.pos, size=mywidget.size)

        widget.add_widget(mywidget)

        widget.export_to_png("img.png")

        return widget

app=WidgetApp()
app.run()

其中运行效果:

带窗体的界面效果

控制台输出效果：

坐标转换的输出效果

注意：其中relative参数设置为True，从中可以看出触摸事件返回的触摸点，实际是window坐标系下的坐标点。

export_to_png函数的保存的图像效果：

export_to_png保存的图像效果

资源

1. 本文使用的资源同统一下载路径： https://github.com/QiangAI/PythonSkill/tree/master/KivyUI
2. Kivy的官方参考路径：https://kivy.org/doc/stable/api-kivy.uix.widget.html