Textview and some buttons in column GTK

Question

I'm trying to create a layout with an text view and in the 2nd column 4 buttons aligned vertically. I tried reading documentation but the window isn't rendered or button stay aligned horizontally.

<?xml version="1.0" encoding="UTF-8"?>
<interface>
  <object id="window" class="GtkWindow">
    <property name="title">Test</property>
    <property name="resizable">False</property>
    <child>
      <object class="GtkGrid">
        <child>
          <object class="GtkTextView" id="viewww">
            <property name="overwrite">True</property>
            <property name="visible">True</property>
            <property name="monospace">True</property>
            <property name="input_purpose">GTK_INPUT_PURPOSE_DIGITS</property>
            <property name="width-request">400</property>
            <property name="height-request">200</property>
            <property name="left_margin">10</property>
            <property name="right_margin">10</property>
            <property name="top_margin">10</property>
            <property name="bottom_margin">10</property>
          </object>
        </child>

        <child>
          <object class="GtkButton">
            <property name="label">READ</property>
            <packing>
              <property name="left_attach">0</property>
              <property name="top_attach">1</property>
            </packing>
          </object>
        </child>

        <child>
          <object class="GtkButton">
            <property name="label">WRITE</property>
            <packing>
              <property name="left_attach">0</property>
              <property name="top_attach">2</property>
            </packing>
          </object>
        </child>
      </object>
    </child>
  </object>
</interface>

This is an example with packing, but the window isn't rendering anything. Is this a problem with GTK?

I tried packaging, nested grids but nothing works.

Which language are you writing the application in? C? Can we see the application code for the window? — Brian Reading, May 22 '23 at 15:40

Mohammed Sadiq · Answer 1 · 2023-07-03T04:58:52.610

Your example seems to be using packing, which is only present in GTK3 (btw, the placement of packing tag is wrong in your example. It should be within child, not object). In GTK4, you can use layout tag to get similar results.

Example .ui file for GTK4 (generated with gtk4-builder-tool simplify --3to4 window.ui after applying some fixes):

<?xml version="1.0" encoding="UTF-8"?>
<interface>
  <requires lib="gtk" version="4.0"/>
  <object id="window" class="GtkWindow">
    <property name="title">Test</property>
    <property name="resizable">0</property>
    <property name="child">
      <object class="GtkGrid">

        <child>
          <object class="GtkTextView" id="viewww">
            <property name="overwrite">1</property>
            <property name="monospace">1</property>
            <property name="input-purpose">digits</property>
            <property name="width-request">400</property>
            <property name="height-request">200</property>
            <property name="left-margin">10</property>
            <property name="right-margin">10</property>
            <property name="top-margin">10</property>
            <property name="bottom-margin">10</property>
          </object>
        </child>

        <child>
          <object class="GtkButton">
            <property name="label">READ</property>
            <layout>
              <property name="column">0</property>
              <property name="row">1</property>
            </layout>
          </object>
        </child>

        <child>
          <object class="GtkButton">
            <property name="label">WRITE</property>
            <layout>
              <property name="column">0</property>
              <property name="row">2</property>
            </layout>
          </object>
        </child>

      </object>
    </property>
  </object>
</interface>

Play with the column and row values to get the desired output, if you want to change the layout.

For preview save the content to some file, eg:window.ui and do gtk4-builder-tool preview window.ui

Textview and some buttons in column GTK

1 Answers1