GridLayout中如何设置一个按钮占两个位置,就像我截图的那样

Posted 2023-04-16

思路：对窗体应用边界布局，在NORTH上放置一个文本框，在CENTER上放置一个面板，面板上放置计算器的相应按钮

//GridFrame.Java

import java.awt.*;

import javax.swing.*;

class GridFrame extends JFrame

         //定义面板，并设置为网格布局，4行4列，组件水平、垂直间距均为3

          JPanel p=new JPanel(new GridLayout(4,4,3,3));

          JTextArea t=new JTextArea();        //定义文本框

          //定义字符串数组，为按钮的显示文本赋值

         //注意字符元素的顺序与循环添加按钮保持一致

          String str[]="7","8","9","/","4","5","6","*","1","2","3","-","0",".","=","+";

     public GridFrame(String s)

                   super(s);  //为窗体名称赋值

        setLayout(new BorderLayout());     //定义窗体布局为边界布局

        JButton btn[];                             //声明按钮数组

        btn=new JButton[str.length];     //创建按钮数组

                   //循环定义按钮，并添加到面板中

        for(int i=0;i<str.length;i++)

               btn[i]=new JButton(str[i]);

               p.add(btn[i]);

        

                    //将文本框放置在窗体NORTH位置

            getContentPane().add(t,BorderLayout.NORTH);     

            //将面板放置在窗体CENTER位置

            getContentPane().add(p,BorderLayout.CENTER);   

            setVisible(true);

            setSize(250,200);

            setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

            setLocationRelativeTo(null);               //让窗体居中显示

        

      public static void main(String[] args)

         GridFrame gl=new GridFrame("网格布局计算机！");

        

 

 

程序执行结果如下图：

参考技术A //在gridlayout网格7，0位置，插入占两列一行的按钮0，位置根据自己的需要修改
gridLayout->addWidget(btn_equal,7,0,1,2);
//在gridlayout网格6，4位置，插入占两行一列的按钮=，位置根据自己的需要修改
gridLayout->addWidget(btn_equal,6,4,2,1);

两行一列的按钮没法直接排好，需要添加语句：
btn_equal（你的按钮名）->setSizePolicy(QSizePolicy::Expanding,QSizePolicy::Expanding);本回答被提问者采纳 参考技术B 先定好你控件所在的layout_row和layout_column,然后用android:layout_columnSpan="2" 参考技术C 这个，看来，要先设计两个的位置的，再嵌入两个一个位置的。追问

能说具体一点不？刚学，还不太懂

如何在QML中使用按钮，GroupBox，文本和ProgressBar设置基本的GridLayout

[抱歉，这个问题很简单，但是我正在查看有关如何使用GridLayout，Buttons，Text和GroupBox中的ProgressBar设置QML的官方文档。我正在尝试实现的布局如下：

问题我遇到的问题是我正在努力实现上述布局。我在理解如何在页面内以正确的方式放置元素时遇到一些问题。

到目前为止我所做的：

1]我发现了一个非常有用的example，为了理解这个概念，我成功地复制了它。

[2）另外，我碰到了this other source，因为它可以解释并阐明GridLayout的某些功能，但仍然无法完全解决问题，因此很有帮助。

3）此source也有帮助，但不能再向前推进。

[4）除了上述几点，我还研究了offcial documentation。官方文档很有用，但仍然无法正确设置我要在页面中定位的组件。

编辑

最新的修改使我向前迈进，现在它的布局看起来更好并且接近于我要实现的目标。

我想出了一种使用GridLayout的方法（只是因为我仍然没有第二种选择可以放心使用），因此可以更好地使用它。我发现的解决方案是为需要的每个条目使用GroupBox，但是我仍然遇到一些剩余的问题，如您在发布的EDITS中看到的那样，我不确定原因，例如：] >

1

）为什么当我在两列中使用TextField时，GridLayout区域位于左侧？似乎所有组件都只推送到一列。我希望TextField（和相关的Text）位于中间。

2]

第一个TextField正确地将文本放在中间。我对其他文本也做了相同的操作，但是它们仍然在左侧，不确定发生了什么。

3）

尽管我在Button Test和目标中使用了Clear List，但为什么第一个按钮和最后一个按钮分别columns: 2和GridLayout只占据布局的一列他们俩都占据了整行。

[4）

尽管添加了ProgressBar，但仍然看不到，并且不确定为什么不能在TextField中写入。

5）

调试器无错误

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLmltZ3VyLmNvbS90SDJOY1Y0LnBuZyJ9” alt =“混淆布局”>

最新更新和编辑

根据最新评论并提供最新更新。我仍然需要解决几个尚存的疑问：

1]

ProgressBar看起来仍然很奇怪，并且不会根据窗口的宽度进行扩展。为此，我也继续使用official documentation，但仍然不知道为什么。

[2）

Button Test和窗口的上边界之间仍然没有空格。

3）

GroupBox或RowLayout不在窗口的宽度范围内延伸。为此，我咨询了以下对source有用的ColumnLayout，但它似乎不适用于其他地方。

我在本练习中使用的代码如下，已对其进行了修改，您只能复制/粘贴，它将起作用：

main.qml

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Controls.Styles 1.4
import QtQuick.Layouts 1.12
import QtQuick.Controls 1.4 as QQC1

ApplicationWindow {
    visible: true
    width: 640
    height: 520
    title: qsTr("GridLayout Example")
    id: testwindow

    ColumnLayout {
//        anchors.fill: parent
//        anchors.margins: 35
        spacing: 10
        width: parent.width
        Button {
            id: buttonTest
            text: "Button Test"
            Layout.fillWidth: true
            font.pointSize: 20
        }
        GroupBox {
            id: box1
            title: "Connection"
            font.pointSize: 20
            Layout.alignment: parent.width
            spacing: 10
            GridLayout {
                width: parent.width
                columns: 1
                RowLayout {
                    spacing: 200
                    Layout.fillWidth: true
                    Layout.fillHeight: false
                    Label {
                        id: textField
                        text: "Eddie"
                        font.pointSize: 15
                    }
                    Text {
                        id: connected
                        text: "Not-Connected"
                        color: "red"
                        font.pointSize: 15
                        horizontalAlignment: Text.AlignRight
                    }
                }
            }
        }
        GroupBox {
            id: box2
            title: "Log-In Info"
            font.pointSize: 20
            width: parent.width
            spacing: 10
            GridLayout {
                width: parent.width
                columns: 1
                RowLayout {
                    spacing: 200
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    Layout.alignment: parent.width

                    Label {
                        id: textField3
                        text: "Status"
                        font.pointSize: 15
                    }
                    Text {
                        id: logInStatus
                        text: "Logged In"
                        color: "red"
                        font.pointSize: 15
                        horizontalAlignment: Text.AlignRight
                    }
                }
            }
        }
        GroupBox {
            id: box3
            title: "Log-In ID"
            font.pointSize: 20
            width: parent.width
            spacing: 10
            GridLayout {
                width: parent.width
                columns: 1
                RowLayout {
                    spacing: 200
                    Layout.fillWidth: true;
                    Layout.fillHeight: true
                    Label {
                        id: textField5
                        text: "Logged in as:"
                        font.pointSize: 15
                    }
                    Text {
                        id: loggedInAs
                        text: "Name"
                        color: "red"
                        font.pointSize: 15
                        horizontalAlignment: Text.AlignRight
                    }
                }
            }
        }
        GroupBox {
            id: box4
            title: "Email"
            font.pointSize: 20
            width: parent.width
            spacing: 10
            GridLayout {
                width: parent.width
                columns: 1
                RowLayout {
                    spacing: 200
                    Layout.fillWidth: true;
                    Layout.fillHeight: true
                    Label {
                        id: textField7
                        text: "Email:"
                        font.pointSize: 15
                    }
                    Text {
                        id: notSentEmail
                        text: "Not Sent"
                        color: "red"
                        font.pointSize: 15
                        horizontalAlignment: Text.AlignRight
                    }
                }
            }
        }
        Button {
            id: buttonClearList
            text: "Clear List"
            Layout.fillWidth: true
            font.pointSize: 20
        }
        QQC1.ProgressBar {
            ProgressBar {
                Layout.fillWidth: true

                anchors {
                    left: parent.left
                    right: parent.right
                    bottom: parent.bottom
                    leftMargin: -parent.leftMargin
                    rightMargin: -parent.rightMargin
                }
            }
        }

    }
}
我如何实现上述布局？在过去的几天中，我一直在努力工作，以了解如何正确地将组件放置到布局中，并从文档中研究anchor属性。非常感谢您指出正确的方向，如果这个问题很简单，对不起。 

很抱歉，如果这个问题很简单，但是我正在查看有关如何在QML中使用按钮，文本，GroupBox和ProgressBar设置GridLayout的官方文档。我正在尝试实现的布局是...

答案

花了我几天的时间，但我达到了我想要的布局，请参见打印屏幕下方：