GTK的啓示和paned

Question

我想本質上有一個圖像/繪圖表面作爲主要部件，但然後有某種可以顯示的面板或小部件。

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

     Image 

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

的XXX基本的東西（GTK控件），用戶可以用它來與應用程序交互，但他們可以將其最小化和應用程序可以將其最小化（比如對幻燈片放映）。

所以，一個paned允許用戶調整大小以適合他們，但我也需要能夠完全最小化和恢復它的大小（許多應用程序都有像photoshop那樣展示底層控件的箭頭），並且還能夠以編程方式輕鬆完成。

這是因爲應用程序將有兩種模式：主要觀看圖像，其中沒有別的東西可以看到，然後編輯模式有一個浮動工具欄和底部區域，提供更高級的編輯功能和東東。用戶和應用程序需要能夠輕鬆地在這些模式之間切換。

任何想法？我是gtk的新手，所以這可能很明顯。我覺得一個垂直的paned可以正常工作，我可以添加一個小按鈕，可以用來展開或摺疊底部容器部分......但是我在那裏看到了啓示器，它似乎可以爲我做這一切，但不能確定如何使用它。

Answer 1

嗯，這個問題在許多方面是非常廣闊的，因爲有許多方法，設計意見等

其實GtkPaned是不是雖然它會適合你的目的的最佳選擇。關於GtkRevealer，這是一個不錯的選擇，並與GtkOverlay結盟，它會很好地工作。

GtkRevealer基本上是一個小部件容器，它使用方法/功能set_reveal_child切換可視性。這個動作可以有一個動畫過渡。

GtkOverlay允許小部件堆疊在彼此之上。

這是一個簡單的例子。不知道如果我明白究竟你的目標：

右上方的按鈕會切換編輯/查看模式與呈現出底部「工具欄」編輯模式。

這裏是空地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() 

「工具欄」按鈕是虛擬按鈕和瓶坯沒有動作......這只是一個簡單的樣機。

還有很多其他方法可以遵循，所以不確定這個問題是否適合SO指導方針，因爲它對答案是模糊的。祝你好運。 PS：對於繪圖區域GtkImage，您可以使用其他一些圖像。爲了避免許可證問題，我使用了一些非常基本的東西:)如果需要，可將glade文件更改爲指向另一個圖像或保存名爲idea.png的圖像。