增加侧边栏

作为另一个实用的功能，我们增加一个显示GtkMenuButton,GtkRevealer和GtkListBox的侧边条。

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <interface>
  3.   <!-- interface-requires gtk+ 3.8 -->
  4.   <template class="ExampleAppWindow" parent="GtkApplicationWindow">
  5.     <property name="title" translatable="yes">Example Application</property>
  6.     <property name="default-width">600</property>
  7.     <property name="default-height">400</property>
  8.     <child>
  9.       <object class="GtkBox" id="content_box">
  10.         <property name="visible">True</property>
  11.         <property name="orientation">vertical</property>
  12.         <child>
  13.           <object class="GtkHeaderBar" id="header">
  14.             <property name="visible">True</property>
  15.             <child type="title">
  16.               <object class="GtkStackSwitcher" id="tabs">
  17.                 <property name="visible">True</property>
  18.                 <property name="margin">6</property>
  19.                 <property name="stack">stack</property>
  20.               </object>
  21.             </child>
  22.             <child>
  23.               <object class="GtkToggleButton" id="search">
  24.                 <property name="visible">True</property>
  25.                 <property name="sensitive">False</property>
  26.                 <style>
  27.                   <class name="image-button"/>
  28.                 </style>
  29.                 <child>
  30.                   <object class="GtkImage" id="search-icon">
  31.                     <property name="visible">True</property>
  32.                     <property name="icon-name">edit-find-symbolic</property>
  33.                     <property name="icon-size">1</property>
  34.                   </object>
  35.                 </child>
  36.               </object>
  37.               <packing>
  38.                 <property name="pack-type">end</property>
  39.               </packing>
  40.             </child>
  41.             <child>
  42.               <object class="GtkMenuButton" id="gears">
  43.                 <property name="visible">True</property>
  44.                 <property name="direction">none</property>
  45.                 <property name="use-popover">True</property>
  46.                 <style>
  47.                   <class name="image-button"/>
  48.                 </style>
  49.               </object>
  50.               <packing>
  51.                 <property name="pack-type">end</property>
  52.               </packing>
  53.             </child>
  54.           </object>
  55.         </child>
  56.         <child>
  57.           <object class="GtkSearchBar" id="searchbar">
  58.             <property name="visible">True</property>
  59.             <child>
  60.               <object class="GtkSearchEntry" id="searchentry">
  61.                 <signal name="search-changed" handler="search_text_changed"/>
  62.                 <property name="visible">True</property>
  63.               </object>
  64.             </child>
  65.           </object>
  66.         </child>
  67.         <child>
  68.           <object class="GtkBox" id="hbox">
  69.             <property name="visible">True</property>
  70.             <child>
  71.               <object class="GtkRevealer" id="sidebar">
  72.                 <property name="visible">True</property>
  73.                 <property name="transition-type">slide-right</property>
  74.                 <child>
  75.                  <object class="GtkScrolledWindow" id="sidebar-sw">
  76.                    <property name="visible">True</property>
  77.                    <property name="hscrollbar-policy">never</property>
  78.                    <property name="vscrollbar-policy">automatic</property>
  79.                    <child>
  80.                      <object class="GtkListBox" id="words">
  81.                        <property name="visible">True</property>
  82.                        <property name="selection-mode">none</property>
  83.                      </object>
  84.                    </child>
  85.                  </object>
  86.                 </child>
  87.               </object>
  88.             </child>
  89.             <child>
  90.               <object class="GtkStack" id="stack">
  91.                 <signal name="notify::visible-child" handler="visible_child_changed"/>
  92.                 <property name="visible">True</property>
  93.               </object>
  94.             </child>
  95.           </object>
  96.         </child>
  97.       </object>
  98.     </child>
  99.   </template>
  100. </interface>

这些代码将每个文件中相关的词做成按钮显示在侧边条上。但我们将考虑用这些代码去添加一个工具菜单。

像我们所希望的，这个工具菜单在一个GtkBuilder ui file中被指定。

  1. <?xml version="1.0"?>
  2. <interface>
  3.   <!-- interface-requires gtk+ 3.0 -->
  4.   <menu id="menu">
  5.     <section>
  6.       <item>
  7.         <attribute name="label" translatable="yes">_Words</attribute>
  8.         <attribute name="action">win.show-words</attribute>
  9.       </item>
  10.     </section>
  11.   </menu>
  12. </interface>

为了连接菜单项和show-words设置，我们用了GAction对应于给定的GSettings。

  1. ...
  3. static void
  4. example_app_window_init (ExampleAppWindow *win)
  5. {
  7. ...
  9.   builder = gtk_builder_new_from_resource ("/org/gtk/exampleapp/gears-menu.ui");
  10.   menu = G_MENU_MODEL (gtk_builder_get_object (builder, "menu"));
  11.   gtk_menu_button_set_menu_model (GTK_MENU_BUTTON (priv->gears), menu);
  12.   g_object_unref (builder);
  14.   action = g_settings_create_action (priv->settings, "show-words");
  15.   g_action_map_add_action (G_ACTION_MAP (win), action);
  16.   g_object_unref (action);
  17. }
  19. ...

(full source)

我们的应用程序如今是这样的：

getting-started-app8.png