Question

我想基本上有一个图像/绘图表面作为主要小部件，但后来有一些可以显示的面板或小部件。

----------------

      Image

----------------
xxxxxxxxxxxxxxxx
----------------

xxx基本上是用户可以用来与应用程序交互的东西（gtk小部件），但是他们可以最小化它，应用程序可以最小化它（比如幻灯片放映）。

所以，一个paned允许用户调整大小以适应他们，但我还需要能够完全最小化并恢复它的大小（许多应用程序都有像展示底层小部件的Photoshop的箭头）并且还能够做到这很容易编程。

这是因为应用程序将有两种模式：主要查看图像，其中没有其他任何东西应该被看到，然后编辑模式具有浮动工具栏和底部区域，提供更高级的编辑功能和东西。用户和应用程序需要能够轻松地在这些模式之间切换。

有什么想法吗？我是gtk的新手所以这可能是显而易见的。我认为一个垂直paned工作正常，我可以添加一个小按钮，可用于扩展或折叠底部容器部分...但我看到那里的揭示者，似乎它可能会为我做这一切，但不是确定如何使用它。

Answer 1

嗯，这个问题在很多方面都非常广泛，因为有很多方法，设计意见等等。

事实上Gtk Paned是最好的选择，虽然它符合你的目的。关于GtkRevealer，它是一个不错的选择并与GtkOverlay结盟，它可以很好地工作。

GtkRevealer基本上是一个小部件容器，可以使用方法/函数set_reveal_child切换可见性。此操作可以进行动画过渡。

GtkOverlay允许小部件堆叠在一起。

这是一个简单的例子。不确定我是否完全理解你的目标：

右上角的按钮会切换编辑/查看模式，编辑模式显示＆＃34;工具栏＆＃34;在底部。

这是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()

＆＃34;工具栏＆＃34;按钮是虚拟按钮，预制件没有动作......它只是一个简单的模型。

您可以遵循许多其他方法，因此不确定此问题是否符合SO指南，因为它对答案含糊不清。祝你好运。

PS：对于绘图区域，GtkImage，您可以使用其他一些图像。为避免许可证问题，我已经使用了一些非常基本的东西:)如果需要，可以将glade文件更改为指向另一个图像或保存名为idea.png的图像。

GTK的揭示者和paned

1 个答案: