这篇文章讲下自适应盒子
-
什么是自适应盒子
简单来说, 就是一个盒子里有非常多个子控件, 这个盒子会根据窗口大小自动调整每行控件的数量.
Flowbox 1
Flowbox 2
flowbox需要放在一个可滚动的窗口(Gtk.ScrolledWindow)中
否则Flowbox会因为空间不足而超过你的屏幕, 就像这样
Failed Flowbox
Gtk.ScrolledWindow -> 继承自Gtk.Bin, 也是容器的一种, 这个比较像窗口, 里面只能放一个子控件, 如果子控件的显示区域不足, 他就会自动添加一个滚动条(Scroll bar)来显示全部内容
使用方法 直接 使用add(child) 方法来添加子控件, 下面会用到
如何创建一个Flowbox
实例化Gtk.Flowbox self.flowbox = Gtk.Flowbox()
添加控件只需要 self.flowbox.add(child) 就可以了
示例
Flowbox 1
原始码实现
import gi
gi.require_version("Gtk", "3.0")
from gi.repository import Gtk
class MyWindow(Gtk.Window):
def __init__(self):
super(MyWindow, self).__init__(title="Flowbox")
self.flowbox = Gtk.FlowBox(max_children_per_line=30)
self.scroll_window = Gtk.ScrolledWindow()
self.scroll_window.add(self.flowbox)
self.flowbox_child_create(self.flowbox)
self.add(self.scroll_window)
def flowbox_child_create(self, flowbox):
for i in range(0, 50):
flowbox.add(Gtk.Button(label=f"{i}"))
win = MyWindow()
win.connect("destroy", Gtk.main_quit)
win.show_all()
Gtk.main()
如果不想让子控件填充至全窗口
加一个valign的属性
self.flowbox = Gtk.FlowBox(max_children_per_line=30, valign=Gtk.Align.START)
效果是这样的
再看看上面的图, 找下区别
常用属性
- column_spacing 列间隔 int
- row_spacing 行间隔
- homogeneous 每个子控件是否拥有相同尺寸 bool
- max_children_per_line 每行最多子控件数量 int
- min_children_per_line 每行最少子控件数量 int
- selection_mode 选择模式, 接受 Gtk.SelectionMode
Gtk.SelectionMode 枚举类型
NONE = 0 无法选择
SINGLE = 可以有0个或1个被选择
BROWSE = 必须有一个被选择
MULTIPLE = 可以选择多个
常用方法
-
add(child) 添加控件
-
insert(widget, position) 插入控件在第几个位置, 如果position为负数或大于当前flowbox的长度, 则添加在末尾
-
remove(child) 移除控件
-
get_child_at_index(index) 获取第n号的控件
-
get_child_at_pos(left, top) 通过坐标来获取控件
坐标
-
get_selected_children() 获取选择的控件, 返回一个GLib.List, 其实就是一个列表, 可以索引
-
select_all() 选择所有的控件(只有当选择模式是mutiple的时候有效)
-
select_child(child) 选择控件
-
unselect_all() 取消选择所有的控件(只有当选择模式是mutiple的时候有效)
-
unselect_child(child) 取消选择控件
-
select_foreach(func, *data) 为所有选择的控件执行某个函数
-
然后就是一个设置和获取属性的方法, 很简单, 不写了
-
例如, 设置column_spacing就是 set_column_spacing(int), 获取就是get_column_spacing()
常用信号
- add 添加
- remove 移除
- destroy flowbox被摧毁
- selected-children-changed 选择的子控件改变
- select-all 选择所有
- unselect-all 取消选择所有
欢迎大家留言, 下篇文章讲下堆叠容器(stack)和堆叠切换器(stack switch) 我不知道这个控件的中文是什么, 所以翻译可能有点怪, 哈哈
网友评论