• 增加侧边栏

    增加侧边栏

    作为另一个实用的功能，我们增加一个显示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