PyGobject（二十八）布局容器之Revealer

Gtk.Revealer

Gtk.Revealer可以以动画的方式控制其子控件的显示与隐藏

继承关系

Gtk.Revealer是Gtk.Bin的直接子类

Methods

方法修饰词	方法名及参数
static	new ()
	get_child_revealed ()
	get_reveal_child ()
	get_transition_duration ()
	get_transition_type ()
	set_reveal_child (reveal_child)
	set_transition_duration (duration)
	set_transition_type (transition)

Virtual Methods

Properties

Name	Type	Flags	Short Description
child-revealed	bool	r	子部件是否已经显示，只读
reveal-child	bool	r/w/c/en	设置子部件是否显示
transition-duration	int	r/w/c/en	动画持续时间，单位毫秒
transition-type	Gtk.RevealerTransitionType	r/w/c/en	动画类型

Signals

Name	Short Description

例子

一

代码：

#!/usr/bin/env python3
# Created by xiaosanyu at 16/7/12
# section 032
# 
# author: xiaosanyu
# website: yuxiaosan.tk \
#          http://blog.csdn.net/a87b01c14
# created: 16/7/12

TITLE = "Revealer"
DESCRIPTION = """
The Gtk.Revealer widget is a container which animates the transition of its child from invisible to visible.

The style of transition can be controlled with Gtk.Revealer.set_transition_type().
"""

import gi

gi.require_version("Gtk", "3.0")
from gi.repository import Gtk, Gdk, GLib
import random


class RevealerWindow(Gtk.Window):
    def __init__(self):
        Gtk.Window.__init__(self, title="Revealer Example")
        fixed = Gtk.Fixed()
        fixed.set_size_request(200, 200)
        revealer = Gtk.Revealer()
        self.image = Gtk.Image.new_from_icon_name("help-about", Gtk.IconSize.MENU)
        revealer.add(self.image)
        revealer.set_reveal_child(True)
        revealer.set_transition_duration(1000)
        revealer.set_transition_type(Gtk.RevealerTransitionType.CROSSFADE)
        fixed.add(revealer)
        _, w, h = Gtk.IconSize.lookup(Gtk.IconSize.MENU)
        self.width = fixed.get_size_request()[0] - w
        self.height = fixed.get_size_request()[1] - h
        self.add(fixed)
        GLib.timeout_add(1000, self.timeout, fixed, revealer)

    def timeout(self, fixed, revealer):
        isshow = revealer.get_reveal_child()
        if not isshow:
            self.image.modify_bg(Gtk.StateType.NORMAL,
                                 Gdk.Color.from_floats(random.random(), random.random(), random.random()))
            x, y = int(self.width * random.random()), int(self.height * random.random())
            fixed.move(revealer, x, y)
        revealer.set_reveal_child(not isshow)
        return True


def main():
    win = RevealerWindow()
    win.connect("delete-event", Gtk.main_quit)
    win.show_all()
    Gtk.main()


if __name__ == "__main__":
    main()

代码解析

revealer = Gtk.Revealer()

创建一个Revealer

self.image = Gtk.Image.new_from_icon_name("help-about", Gtk.IconSize.MENU)
revealer.add(self.image)

创建一个Image,添加到revealer容器中。

revealer.set_reveal_child(True)
revealer.set_transition_duration(1000)
        revealer.set_transition_type(Gtk.RevealerTransitionType.CROSSFADE)

设置revealer显示子部件，设置动画时间为1S，设置动画风格为淡入淡出

GLib.timeout_add(1000, self.timeout, fixed, revealer)

def timeout(self, fixed, revealer):
    isshow = revealer.get_reveal_child()
    if not isshow:
        self.image.modify_bg(Gtk.StateType.NORMAL,                            
        Gdk.Color.from_floats(random.random(), 
        random.random(), random.random()))
        x, y = int(self.width * random.random()), 
        int(self.height * random.random())
        fixed.move(revealer, x, y)
    revealer.set_reveal_child(not isshow)
    return True

创建一个不间断定时器(timeout方法返回True)。然后随机更改revealer的位置和背景颜色。

二

代码：

#!/usr/bin/env python3
# Created by xiaosanyu at 16/7/12
# section 033
# 
# author: xiaosanyu
# website: yuxiaosan.tk \
#          http://blog.csdn.net/a87b01c14
# created: 16/7/12

TITLE = "Revealer_created_by_ui"
DESCRIPTION = ""

import gi

gi.require_version("Gtk", "3.0")
from gi.repository import Gtk, Gdk, GLib, Gio
import os


class RevealerWindow():
    def __init__(self):
        self.count = 0
        self.builder = Gtk.Builder.new_from_file(os.path.join(os.path.dirname(__file__), '../../Data/revealer.glade'))
        window = self.builder.get_object("window")
        window.connect("destroy", self.on_destroy)
        self.timeout = GLib.timeout_add(1000, self.reveal_one)
        window.show_all()
        Gtk.main()

    def reveal_one(self):
        global count
        revealer = self.builder.get_object("revealer%d" % self.count)

        revealer.set_reveal_child(True)

        self.count += 1
        if self.count >= 9:
            GLib.Source.remove(self.timeout)
            self.timeout = 0
            return False

        else:
            return True

    def on_destroy(self, window, *args):
        if self.timeout:
            GLib.Source.remove(self.timeout)
        Gtk.main_quit(*args)


def main():
    RevealerWindow()


if __name__ == "__main__":
    main()

revealer.glade

<?xml version="1.0" encoding="UTF-8"?>
<interface>
  <!-- interface-requires gtk+ 3.6 -->
  <object class="GtkWindow" id="window">
    <property name="border_width">5</property>
    <property name="default_width">300</property>
    <property name="default_height">300</property>
    <property name="title">Revealer</property>
    <child>
      <object class="GtkGrid">
        <property name="visible">1</property>
        <property name="halign">center</property>
        <property name="valign">center</property>
        <child>
          <object class="GtkRevealer" id="revealer0">
            <property name="visible">1</property>
            <property name="transition-duration">2000</property>
            <property name="transition-type">crossfade</property>
            <child>
              <object class="GtkImage">
                <property name="visible">1</property>
                <property name="icon-name">face-cool-symbolic</property>
                <property name="icon-size">6</property>
              </object>
            </child>
          </object>
          <packing>
            <property name="left-attach">2</property>
            <property name="top-attach">2</property>
          </packing>
        </child>
        <child>
          <object class="GtkRevealer" id="revealer1">
            <property name="visible">1</property>
            <property name="transition-duration">2000</property>
            <property name="transition-type">slide-up</property>
            <child>
              <object class="GtkImage">
                <property name="visible">1</property>
                <property name="icon-name">face-cool-symbolic</property>
                <property name="icon-size">6</property>
              </object>
            </child>
          </object>
          <packing>
            <property name="left-attach">2</property>
            <property name="top-attach">1</property>
          </packing>
        </child>
        <child>
          <object class="GtkRevealer" id="revealer2">
            <property name="visible">1</property>
            <property name="transition-duration">2000</property>
            <property name="transition-type">slide-right</property>
            <child>
              <object class="GtkImage">
                <property name="visible">1</property>
                <property name="icon-name">face-cool-symbolic</property>
                <property name="icon-size">6</property>
              </object>
            </child>
          </object>
          <packing>
            <property name="left-attach">3</property>
            <property name="top-attach">2</property>
          </packing>
        </child>
        <child>
          <object class="GtkRevealer" id="revealer3">
            <property name="visible">1</property>
            <property name="transition-duration">2000</property>
            <child>
              <object class="GtkImage">
                <property name="visible">1</property>
                <property name="icon-name">face-cool-symbolic</property>
                <property name="icon-size">6</property>
              </object>
            </child>
          </object>
          <packing>
            <property name="left-attach">2</property>
            <property name="top-attach">3</property>
          </packing>
        </child>
        <child>
          <object class="GtkRevealer" id="revealer4">
            <property name="visible">1</property>
            <property name="transition-duration">2000</property>
            <property name="transition-type">slide-left</property>
            <child>
              <object class="GtkImage">
                <property name="visible">1</property>
                <property name="icon-name">face-cool-symbolic</property>
                <property name="icon-size">6</property>
              </object>
            </child>
          </object>
          <packing>
            <property name="left-attach">1</property>
            <property name="top-attach">2</property>
          </packing>
        </child>
        <child>
          <object class="GtkRevealer" id="revealer5">
            <property name="visible">1</property>
            <property name="transition-duration">2000</property>
            <property name="transition-type">slide-up</property>
            <child>
              <object class="GtkImage">
                <property name="visible">1</property>
                <property name="icon-name">face-cool-symbolic</property>
                <property name="icon-size">6</property>
              </object>
            </child>
          </object>
          <packing>
            <property name="left-attach">2</property>
            <property name="top-attach">0</property>
          </packing>
        </child>
        <child>
          <object class="GtkRevealer" id="revealer6">
            <property name="visible">1</property>
            <property name="transition-duration">2000</property>
            <property name="transition-type">slide-right</property>
            <child>
              <object class="GtkImage">
                <property name="visible">1</property>
                <property name="icon-name">face-cool-symbolic</property>
                <property name="icon-size">6</property>
              </object>
            </child>
          </object>
          <packing>
            <property name="left-attach">4</property>
            <property name="top-attach">2</property>
          </packing>
        </child>
        <child>
          <object class="GtkRevealer" id="revealer7">
            <property name="visible">1</property>
            <property name="transition-duration">2000</property>
            <child>
              <object class="GtkImage">
                <property name="visible">1</property>
                <property name="icon-name">face-cool-symbolic</property>
                <property name="icon-size">6</property>
              </object>
            </child>
          </object>
          <packing>
            <property name="left-attach">2</property>
            <property name="top-attach">4</property>
          </packing>
        </child>
        <child>
          <object class="GtkRevealer" id="revealer8">
            <property name="visible">1</property>
            <property name="transition-duration">2000</property>
            <property name="transition-type">slide-left</property>
            <child>
              <object class="GtkImage">
                <property name="visible">1</property>
                <property name="icon-name">face-cool-symbolic</property>
                <property name="icon-size">6</property>
              </object>
            </child>
          </object>
          <packing>
            <property name="left-attach">0</property>
            <property name="top-attach">2</property>
          </packing>
        </child>
      </object>
    </child>
  </object>
</interface>

代码解析，创建一个定时器，依次从glade布局文件中提取一个revealer部件，总共有9个。依靠Grid的相对布局产生动画效果

附录

Gtk.RevealerTransitionType

class Gtk.RevealerTransitionType
Bases: GObject.GEnum

NONE = 0

没有动画

CROSSFADE = 1

淡入淡出

SLIDE_RIGHT = 2

从左侧滑入

SLIDE_LEFT = 3

从右侧滑入

SLIDE_UP = 4

从底部滑入

SLIDE_DOWN = 5

从顶部滑入




代码下载地址：http://download.csdn.net/detail/a87b01c14/9594728