GTK Reveler und Paned

Question

Ich möchte im Wesentlichen eine Bild/Zeichnungsoberfläche als das Hauptwidget haben, aber dann eine Art von Panel oder Widget, die aufgedeckt werden können.

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

     Image 

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

Die xxx sind im Grunde stuff (GTK Widgets), dass der Benutzer mit der App interagieren können, aber sie können es minimieren und die App es (sagen für eine Diashow) zu minimieren.

Also, ein paned erlaubt dem Benutzer, die Größe an sie anzupassen, aber ich brauche auch die Fähigkeit vollständig zu minimieren und wiederherzustellen seine Größe (ein Pfeil, den viele Apps wie photoshop, die das zugrunde liegende Widget offenbaren) und auch können Mach das leicht programmatisch.

Dies liegt daran, dass die App zwei Modi haben wird: Die Hauptansicht des Bildes, in der nichts anderes zu sehen ist und dann einen Bearbeitungsmodus mit einer schwebenden Werkzeugleiste und einem unteren Bereich, der erweiterte Bearbeitungsfunktionen und bietet Sachen. Der Benutzer und die App müssen einfach zwischen diesen Modi wechseln können.

Irgendwelche Ideen? Ich bin neu bei GTK, also könnte das offensichtlich sein. Ich dachte mir, eine vertikale Platte würde gut funktionieren, und ich kann einen kleinen Knopf hinzufügen, der benutzt werden kann, um den unteren Behälterteil zu erweitern oder zu kollabieren ... aber ich sah den Enthüller dort und es scheint, als könnte es das alles für mich tun, aber nicht sicher, wie man es benutzt.

Answer 1

Nun, diese Frage ist sehr breit in vielen Aspekten, da es viele Ansätze, Design Meinungen sind usw.

In der Tat GtkPaned ist nicht die beste Option, obwohl es Ihre Zwecke passen würde. In Bezug auf GtkRevealer ist es eine gute Option und in Verbindung mit GtkOverlay würde es gut funktionieren.

GtkRevealer ist im Grunde ein Widget-Container, der die Sichtbarkeit mit der Methode/Funktion set_reveal_child umschaltet. Diese Aktion kann einen animierten Übergang haben.

Mit GtkOverlay können Widgets übereinander gestapelt werden.

Hier ist ein einfaches Beispiel. Nicht sicher, ob ich genau Ihr Ziel verstanden:

Die obere rechte Taste würde bearbeiten/Ansichts-Modi mit dem Bearbeitungsmodus umschalten einer „Symbolleiste“ auf der Unterseite zeigt. Hier

ist die Lichtung ui-Datei (mit dem Namen idea.ui sonst den Code ändern Änderungen widerzuspiegeln):

<?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> 

Und da Sie keine Programmiersprache angegeben habe, aus Gründen der Einfachheit habe ich eine einfache Python verwendet Code einige dynamische Verhalten der Schaltfläche geben:

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

die „Toolbar“ Tasten sind Dummy-Tasten und die Vorform keine Aktionen ... es ist nur eine einfache Attrappe.

Es gibt viele andere Ansätze, denen Sie folgen können, also nicht sicher, ob diese Frage den SO-Richtlinien entspricht, da sie vage bezüglich der Antworten ist. Viel Glück aber.

PS: Für den Zeichenbereich, GtkImage, können Sie ein anderes Bild verwenden. Um Lizenzprobleme zu vermeiden, habe ich etwas sehr einfaches verwendet :) Wenn Sie möchten, ändern Sie die Lichtung Datei, um auf ein anderes Bild zu zeigen oder speichern Sie ein Bild mit dem Namen idea.png.