GTK 显示器和窗格
GTK revealer and paned
我基本上希望有一个 image/drawing 表面作为主要小部件,然后有某种可以显示的面板或小部件。
----------------
Image
----------------
xxxxxxxxxxxxxxxx
----------------
xxx 基本上是用户可以用来与应用程序交互的东西(gtk 小部件),但他们可以将其最小化,应用程序也可以将其最小化(比如幻灯片放映)。
因此,A paned 允许用户调整大小以适合他们,但我还需要能够完全最小化和恢复它的大小(许多应用程序都像 photoshop 一样显示底层小部件的箭头)并且还能够以编程方式轻松完成此操作。
这是因为该应用程序将有两种模式:图像的主要查看模式,其中不应显示任何其他内容,然后是编辑模式,该模式具有浮动工具栏和底部区域,可提供更高级的编辑功能和东西。用户和应用程序需要能够轻松地在这些模式之间切换。
有什么想法吗?我是 gtk 的新手,所以这可能很明显。我认为垂直窗格可以正常工作,我可以添加一个小按钮,可用于展开或折叠底部容器部分......但我在那里看到了显示器,它似乎可以为我做这一切,但不是确定如何使用它。
嗯,这个问题在很多方面都非常广泛,因为有很多方法,设计意见等
事实上 GtkPaned 并不是最好的选择,尽管它可以满足您的目的。关于 GtkRevealer,它是一个不错的选择,与 GtkOverlay 结合使用会很好。
GtkRevealer 基本上是一个小部件容器,可以使用 method/function set_reveal_child
切换可见性。此动作可以有动画过渡。
GtkOverlay 允许小部件相互堆叠。
这是一个简单的例子。不确定我是否完全理解您的目标:
右上角的按钮将切换 edit/view 模式,编辑模式在底部显示 "toolbar"。
这里是 glade ui 文件(命名为 idea.ui
否则更改代码以反映更改):
<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated with glade 3.20.0 -->
<interface>
<requires lib="gtk+" version="3.20"/>
<object class="GtkWindow" id="window1">
<property name="can_focus">False</property>
<child>
<object class="GtkOverlay">
<property name="visible">True</property>
<property name="can_focus">False</property>
<child>
<object class="GtkImage">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="pixbuf">idea.png</property>
</object>
<packing>
<property name="index">-1</property>
</packing>
</child>
<child type="overlay">
<object class="GtkRevealer" id="revealer1">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="transition_type">crossfade</property>
<child>
<object class="GtkButtonBox">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="halign">center</property>
<property name="valign">end</property>
<property name="margin_bottom">20</property>
<property name="layout_style">expand</property>
<child>
<object class="GtkButton">
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="receives_default">True</property>
<property name="valign">center</property>
<child>
<object class="GtkImage">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="icon_name">document-edit-symbolic.symbolic</property>
</object>
</child>
</object>
<packing>
<property name="expand">True</property>
<property name="fill">True</property>
<property name="position">0</property>
</packing>
</child>
<child>
<object class="GtkButton">
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="receives_default">True</property>
<child>
<object class="GtkImage">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="icon_name">edit-cut-symbolic.symbolic</property>
</object>
</child>
</object>
<packing>
<property name="expand">True</property>
<property name="fill">True</property>
<property name="position">1</property>
</packing>
</child>
<child>
<object class="GtkButton">
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="receives_default">True</property>
<child>
<object class="GtkImage">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="icon_name">edit-clear-all-symbolic.symbolic</property>
</object>
</child>
</object>
<packing>
<property name="expand">True</property>
<property name="fill">True</property>
<property name="position">2</property>
</packing>
</child>
<child>
<object class="GtkButton">
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="receives_default">True</property>
<child>
<object class="GtkImage">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="icon_name">color-select-symbolic.symbolic</property>
</object>
</child>
</object>
<packing>
<property name="expand">True</property>
<property name="fill">True</property>
<property name="position">3</property>
</packing>
</child>
<child>
<object class="GtkButton">
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="receives_default">True</property>
<child>
<object class="GtkImage">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="icon_name">format-text-bold-symbolic.symbolic</property>
</object>
</child>
</object>
<packing>
<property name="expand">True</property>
<property name="fill">True</property>
<property name="position">4</property>
</packing>
</child>
<child>
<object class="GtkButton">
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="receives_default">True</property>
<child>
<object class="GtkImage">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="icon_name">preferences-color-symbolic.symbolic</property>
</object>
</child>
</object>
<packing>
<property name="expand">True</property>
<property name="fill">True</property>
<property name="position">5</property>
</packing>
</child>
<child>
<object class="GtkButton">
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="receives_default">True</property>
<child>
<object class="GtkImage">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="icon_name">folder-publicshare-symbolic.symbolic</property>
</object>
</child>
</object>
<packing>
<property name="expand">True</property>
<property name="fill">True</property>
<property name="position">6</property>
</packing>
</child>
<child>
<object class="GtkButton">
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="receives_default">True</property>
<child>
<object class="GtkImage">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="icon_name">view-app-grid-symbolic.symbolic</property>
</object>
</child>
</object>
<packing>
<property name="expand">True</property>
<property name="fill">True</property>
<property name="position">7</property>
</packing>
</child>
<style>
<class name="linked"/>
</style>
</object>
</child>
</object>
</child>
<child type="overlay">
<object class="GtkButton" id="button1">
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="receives_default">True</property>
<property name="halign">end</property>
<property name="valign">start</property>
<property name="margin_right">20</property>
<property name="margin_top">20</property>
<property name="relief">none</property>
<child>
<object class="GtkImage">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="icon_name">open-menu-symbolic.symbolic</property>
</object>
</child>
</object>
<packing>
<property name="index">1</property>
</packing>
</child>
</object>
</child>
</object>
</interface>
并且由于您没有指定任何编程语言,为了简单起见,我使用了一个简单的 python 代码来为按钮提供一些动态行为:
import gi
gi.require_version('Gtk', '3.0')
from gi.repository import Gtk
def onMenuClicked(self):
revealer.set_reveal_child(not revealer.get_reveal_child())
builder = Gtk.Builder()
builder.add_from_file("idea.ui")
window = builder.get_object("window1")
revealer = builder.get_object("revealer1")
menuButton = builder.get_object("button1")
menuButton.connect ("clicked", onMenuClicked)
window.connect ("destroy", Gtk.main_quit)
window.show_all()
Gtk.main()
"toolbar" 按钮是虚拟按钮,不执行任何操作...这只是一个简单的模型。
您可以遵循许多其他方法,所以不确定这个问题 suits SO guidelines 因为它的答案含糊不清。不过祝你好运。
PS: 绘图区GtkImage,可以使用其他图片。为了避免许可问题,我使用了一些非常基本的东西 :) 如果你愿意,可以更改 glade 文件以指向另一个图像或保存一个名为 idea.png
的图像。
我基本上希望有一个 image/drawing 表面作为主要小部件,然后有某种可以显示的面板或小部件。
----------------
Image
----------------
xxxxxxxxxxxxxxxx
----------------
xxx 基本上是用户可以用来与应用程序交互的东西(gtk 小部件),但他们可以将其最小化,应用程序也可以将其最小化(比如幻灯片放映)。
因此,A paned 允许用户调整大小以适合他们,但我还需要能够完全最小化和恢复它的大小(许多应用程序都像 photoshop 一样显示底层小部件的箭头)并且还能够以编程方式轻松完成此操作。
这是因为该应用程序将有两种模式:图像的主要查看模式,其中不应显示任何其他内容,然后是编辑模式,该模式具有浮动工具栏和底部区域,可提供更高级的编辑功能和东西。用户和应用程序需要能够轻松地在这些模式之间切换。
有什么想法吗?我是 gtk 的新手,所以这可能很明显。我认为垂直窗格可以正常工作,我可以添加一个小按钮,可用于展开或折叠底部容器部分......但我在那里看到了显示器,它似乎可以为我做这一切,但不是确定如何使用它。
嗯,这个问题在很多方面都非常广泛,因为有很多方法,设计意见等
事实上 GtkPaned 并不是最好的选择,尽管它可以满足您的目的。关于 GtkRevealer,它是一个不错的选择,与 GtkOverlay 结合使用会很好。
GtkRevealer 基本上是一个小部件容器,可以使用 method/function set_reveal_child
切换可见性。此动作可以有动画过渡。
GtkOverlay 允许小部件相互堆叠。
这是一个简单的例子。不确定我是否完全理解您的目标:
右上角的按钮将切换 edit/view 模式,编辑模式在底部显示 "toolbar"。
这里是 glade ui 文件(命名为 idea.ui
否则更改代码以反映更改):
<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated with glade 3.20.0 -->
<interface>
<requires lib="gtk+" version="3.20"/>
<object class="GtkWindow" id="window1">
<property name="can_focus">False</property>
<child>
<object class="GtkOverlay">
<property name="visible">True</property>
<property name="can_focus">False</property>
<child>
<object class="GtkImage">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="pixbuf">idea.png</property>
</object>
<packing>
<property name="index">-1</property>
</packing>
</child>
<child type="overlay">
<object class="GtkRevealer" id="revealer1">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="transition_type">crossfade</property>
<child>
<object class="GtkButtonBox">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="halign">center</property>
<property name="valign">end</property>
<property name="margin_bottom">20</property>
<property name="layout_style">expand</property>
<child>
<object class="GtkButton">
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="receives_default">True</property>
<property name="valign">center</property>
<child>
<object class="GtkImage">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="icon_name">document-edit-symbolic.symbolic</property>
</object>
</child>
</object>
<packing>
<property name="expand">True</property>
<property name="fill">True</property>
<property name="position">0</property>
</packing>
</child>
<child>
<object class="GtkButton">
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="receives_default">True</property>
<child>
<object class="GtkImage">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="icon_name">edit-cut-symbolic.symbolic</property>
</object>
</child>
</object>
<packing>
<property name="expand">True</property>
<property name="fill">True</property>
<property name="position">1</property>
</packing>
</child>
<child>
<object class="GtkButton">
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="receives_default">True</property>
<child>
<object class="GtkImage">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="icon_name">edit-clear-all-symbolic.symbolic</property>
</object>
</child>
</object>
<packing>
<property name="expand">True</property>
<property name="fill">True</property>
<property name="position">2</property>
</packing>
</child>
<child>
<object class="GtkButton">
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="receives_default">True</property>
<child>
<object class="GtkImage">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="icon_name">color-select-symbolic.symbolic</property>
</object>
</child>
</object>
<packing>
<property name="expand">True</property>
<property name="fill">True</property>
<property name="position">3</property>
</packing>
</child>
<child>
<object class="GtkButton">
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="receives_default">True</property>
<child>
<object class="GtkImage">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="icon_name">format-text-bold-symbolic.symbolic</property>
</object>
</child>
</object>
<packing>
<property name="expand">True</property>
<property name="fill">True</property>
<property name="position">4</property>
</packing>
</child>
<child>
<object class="GtkButton">
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="receives_default">True</property>
<child>
<object class="GtkImage">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="icon_name">preferences-color-symbolic.symbolic</property>
</object>
</child>
</object>
<packing>
<property name="expand">True</property>
<property name="fill">True</property>
<property name="position">5</property>
</packing>
</child>
<child>
<object class="GtkButton">
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="receives_default">True</property>
<child>
<object class="GtkImage">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="icon_name">folder-publicshare-symbolic.symbolic</property>
</object>
</child>
</object>
<packing>
<property name="expand">True</property>
<property name="fill">True</property>
<property name="position">6</property>
</packing>
</child>
<child>
<object class="GtkButton">
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="receives_default">True</property>
<child>
<object class="GtkImage">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="icon_name">view-app-grid-symbolic.symbolic</property>
</object>
</child>
</object>
<packing>
<property name="expand">True</property>
<property name="fill">True</property>
<property name="position">7</property>
</packing>
</child>
<style>
<class name="linked"/>
</style>
</object>
</child>
</object>
</child>
<child type="overlay">
<object class="GtkButton" id="button1">
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="receives_default">True</property>
<property name="halign">end</property>
<property name="valign">start</property>
<property name="margin_right">20</property>
<property name="margin_top">20</property>
<property name="relief">none</property>
<child>
<object class="GtkImage">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="icon_name">open-menu-symbolic.symbolic</property>
</object>
</child>
</object>
<packing>
<property name="index">1</property>
</packing>
</child>
</object>
</child>
</object>
</interface>
并且由于您没有指定任何编程语言,为了简单起见,我使用了一个简单的 python 代码来为按钮提供一些动态行为:
import gi
gi.require_version('Gtk', '3.0')
from gi.repository import Gtk
def onMenuClicked(self):
revealer.set_reveal_child(not revealer.get_reveal_child())
builder = Gtk.Builder()
builder.add_from_file("idea.ui")
window = builder.get_object("window1")
revealer = builder.get_object("revealer1")
menuButton = builder.get_object("button1")
menuButton.connect ("clicked", onMenuClicked)
window.connect ("destroy", Gtk.main_quit)
window.show_all()
Gtk.main()
"toolbar" 按钮是虚拟按钮,不执行任何操作...这只是一个简单的模型。
您可以遵循许多其他方法,所以不确定这个问题 suits SO guidelines 因为它的答案含糊不清。不过祝你好运。
PS: 绘图区GtkImage,可以使用其他图片。为了避免许可问题,我使用了一些非常基本的东西 :) 如果你愿意,可以更改 glade 文件以指向另一个图像或保存一个名为 idea.png
的图像。