Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Moving a widget inside a layout



  • I am having trouble moving a widget inside another widget.
    My main widget is in a QHBoxlayout
    My child widget is within the main widget’s layout (the tumbler highlighted in yellow in the pic) which I need to relocate
    https://ibb.co/vmvXnPh

    I have tried quickWidgettum->move(200,200); which does nothing.
    Any ideas?

    mstrWnd = new QWidget;														
    		mstrWnd->setObjectName(STR_MASTER_WINDOW_NAME);									
    mstrWnd->setWindowTitle(getSettingI(MSTR_APP_TITLE));						
    		mstrWnd->setGeometry(getSettingI(MSTR_APP_X).toInt(),						
    			getSettingI(MSTR_APP_Y).toInt(),										
    			getSettingI(MSTR_APP_WIDTH).toInt(),									
    			getSettingI(MSTR_APP_HEIGHT).toInt());									
    		mstrWnd->setWindowFlags(Qt::FramelessWindowHint | Qt::Window);
    		mstrWnd->setWindowState(Qt::WindowFullScreen);
    
    		QHBoxLayout* laos = new QHBoxLayout();
    		mstrWnd->setLayout(laos);
    
    		QQuickView* quickView = new QQuickView(QUrl::fromLocalFile(QDir::currentPath() + "\\Resources\\videos\\aos.qml"));
    quickView->setResizeMode(QQuickView::SizeRootObjectToView);
    quickWidgettum = new QWidget;
    		quickWidgettum = QWidget::createWindowContainer(quickView);
    		
    		laos->addWidget(quickWidgettum);
    
    QML –
    
    import QtQuick 2.12
    import QtQuick.Window 2.2
    import QtQuick.Controls 2.12
    
    Rectangle {
        width: frame.implicitWidth + 10
        height: frame.implicitHeight + 10
    
        function formatText(count, modelData) {
            var data = count === 12 ? modelData + 1 : modelData;
            return data.toString().length < 2 ? "0" + data : data;
        }
    
        FontMetrics {
            id: fontMetrics
        }
    
        Component {
            id: delegateComponent
    
            Label {
                text: formatText(Tumbler.tumbler.count, modelData)
                opacity: 1.0 - Math.abs(Tumbler.displacement) / (Tumbler.tumbler.visibleItemCount / 2)
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                font.pixelSize: fontMetrics.font.pixelSize * 1.25
            }
        }
    
        Frame {
            id: frame
            padding: 0
            anchors.centerIn: parent
    
            Row {
                id: row
    
                Tumbler {
                    id: hoursTumbler
                    model: 12
                    delegate: delegateComponent
                }
    
                Tumbler {
                    id: minutesTumbler
                    model: 60
                    delegate: delegateComponent
                }
    
                Tumbler {
                    id: amPmTumbler
                    model: ["AM", "PM"]
                    delegate: delegateComponent
                }
            }
        }
    }
    


  • @celica

    Do you want to change the position of your widget inside the same layout or just "move" it to another layout?

    widget->move() cannot work, because your widget is not floating (its position is limited to layout boundings and size policies).

    What happens if you just add your QML Widget to the other BoxLayout?



  • @Pl45m4 Ah, OK.
    Yes exactly I just to move it within the same "laos" layout.
    They are both in that layout.
    Whats happening is the tumbler (quickWidgettum ) is centering on the running application screen totally independent of the main (mstrWnd) widget.

    Im not sure what you mean by the other BoxLayout?
    I thought I just had one Boxlayout (laos)



  • @celica

    Ok I see, just one layout. Where do you want to place your Tumbler widget (this clock thing).

    Is everything we see on this screenshot just one widget or multiple widgets (QML) on one mainwindow? Because your layout is empty and set to your mstrWnd, but it appeared too far right to be in an empty layout.... Where does this date-stuff come from and in which layout is it? If you want to place your time widget above the "cancel / set"-buttons, you'll need at least one QVBoxLayout.



  • @Pl45m4 The layout should be as attached image - https://ibb.co/M7tN1LG
    Yes you're correct it should be above the cancel/set.

    Everything you see is one widget on one mainwindow apart from the tumbler which I cant move into place.
    I can position eveything in the main window correctly.

    The tumbler is the quick-widget incorporating QML (quickWidgettum ) which is out of place and is always in the middle of the screen for some reason.
    So the main window is in a QHBoxLayout
    I have the tumbler widget in the same QHBoxLayout.
    Do you mean I need to place the tumbler in a seperate QVBoxlayout?



  • @celica said in Moving a widget inside a layout:

    Do you mean I need to place the tumbler in a seperate QVBoxlayout?

    I would integrate the tumbler into your main widget (VBoxLayout). If you place it above (in terms of depth) your widget without any layout, it's hard to keep the tumbler in place, when you resize or move your whole window



  • @Pl45m4 Yes that is what I have
    Main widget is in QHBoxlayout
    Tumbler widget is then added to this layout



  • @celica

    Not the layout where the main widget is in (MainWindow central widget layout), but the widget's layout itself. So you basically add your tumbler to your other (QML-) widget stuff and position it above the buttons.

    How do you create the other stuff (temperature/ liquid gauges and skales)?



  • @Pl45m4 Oh..The other stuff is created in another class called systemsettings.cpp

    (It is one widget containing everything - labels buttons etc)

    This doesn't have a layout though.

    systemSettings::systemSettings(QWidget *parent) :QLabel(parent)
    {
    slBacklight = new QSlider(Qt::Horizontal, 0);
    slBacklight = new QSlider(this);
    slBacklight->setObjectName(QString::fromUtf8("slBacklight"));
    slBacklight->setGeometry(QRect(465, 440, 340, 42));
    slBacklight->setOrientation(Qt::Horizontal);
    slBacklight->setStyleSheet(QString::fromUtf8("QSlider::groove { border: 1px; background: rgba(0, 0, 0, 0); image: url(:/InCommand/Resources/images/system/settings/backlightday_1.png); } QSlider::groove:disabled { background: #efefef; } QSlider::handle { image: url(:/InCommand/Resources/images/system/settings/backlightsliderday.png); border: 0px solid #5c5c5c; border-radius: 3px; width: 60px; height: 30px; } QSlider::handle:disabled { background: #D3D0CD; } QSlider::sub-page:qlineargradient{ background: #333333; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 7px;border-bottom-left-radius: 7px;}"));
    slBacklight->setMaximum(255);
    slBacklight->setMinimum(10);
    slBacklight->setVisible(false);

    //slBacklight->setValue(gSettingsList[gSettings::sysFullBrightnessValue].toInt(NULL, 10));
    connect(slBacklight, SIGNAL(valueChanged(int)), this, SLOT(slBacklightValueChanged(int)));
    connect(slBacklight, SIGNAL(sliderReleased()), this, SLOT(slBacklightReleased()));
    
    systemSettings::state = bsNormal;									//By default toggled state button state is at normal
    systemSettings::pressable = false;									//By default bar is not pressable on its own
    systemSettings::uiMode = bdnDay;									//By default bar is initialised to day mode image
    
    connect(this, SIGNAL(clicked()), this, SLOT(slotClicked()));		//Connect widgets clicked() signal to it's slotClicked slot
    connect(this, SIGNAL(released()), this, SLOT(slotReleased()));		//Connect widgets released() signal to it's slotReleased slot
    
    statbutts[0] = new statusButton(this);
    statbutts[1] = new statusButton(this);
    statbutts[2] = new statusButton(this);
    statbutts[3] = new statusButton(this);
    statbutts[4] = new statusButton(this);
    statbutts[5] = new statusButton(this);
    statbutts[6] = new statusButton(this);
    statbutts[7] = new statusButton(this);
    statbutts[8] = new statusButton(this);
    statbutts[9] = new statusButton(this);
    statbutts[10] = new statusButton(this);
    statbutts[11] = new statusButton(this);
    statbutts[12] = new statusButton(this);
    statbutts[13] = new statusButton(this);
    statbutts[14] = new statusButton(this);
    statbutts[15] = new statusButton(this);
    statbutts[16] = new statusButton(this);
    statbutts[17] = new statusButton(this);
    statbutts[18] = new statusButton(this);
    statbutts[19] = new statusButton(this);
    statbutts[20] = new statusButton(this);
    statbutts[21] = new statusButton(this);
    statbutts[22] = new statusButton(this);
    statbutts[23] = new statusButton(this);
    
    //Fade out all icons on start-up
    for (int i = 0; i < 24; i++)
    {
    	statbutts[i]->fadeIn();
    	statbutts[i]->setVisible(false);
    }
    
    //Connect the 3 menu buttons with their function
    for (int i = 0; i < 3; i++)
    {
    	QObject::connect(statbutts[i], SIGNAL(statbuttclcked()), this, SLOT(didmenuclicked()));
    }
    //cancel
    for (int i = 3; i < 4; i++)
    {
    	QObject::connect(statbutts[i], SIGNAL(statbuttclcked()), this, SLOT(cancelclicked()));
    }
    //set
    for (int i = 4; i < 5; i++)
    {
    	QObject::connect(statbutts[i], SIGNAL(statbuttclcked()), this, SLOT(setclicked()));
    }
    //date
    for (int i = 7; i < 10; i++)
    {
    	QObject::connect(statbutts[i], SIGNAL(statbuttclcked()), this, SLOT(datemenuclicked()));
    }
    
    //distance 
    for (int i = 10; i < 12; i++)
    {
    	QObject::connect(statbutts[i], SIGNAL(statbuttclcked()), this, SLOT(distmenuclicked()));
    }
    //temp 
    for (int i = 12; i < 14; i++)
    {
    	QObject::connect(statbutts[i], SIGNAL(statbuttclcked()), this, SLOT(tempmenuclicked()));
    }
    
    //liquid
    for (int i = 14; i < 17; i++)
    {
    	QObject::connect(statbutts[i], SIGNAL(statbuttclcked()), this, SLOT(liquidmenuclicked()));
    }
    
    //brightness
    for (int i = 17; i < 19; i++)
    {
    	QObject::connect(statbutts[i], SIGNAL(statbuttclcked()), this, SLOT(brightmenuclicked()));
    }
    
    //time
    for (int i = 20; i < 22; i++)
    {
    	QObject::connect(statbutts[i], SIGNAL(statbuttclcked()), this, SLOT(timemenuclicked()));
    }
    
    //Cancel right hand side
    for (int i = 22; i < 23; i++)
    {
    	QObject::connect(statbutts[i], SIGNAL(statbuttclcked()), this, SLOT(cancelleftclicked()));
    }
    //Set left hand side
    for (int i = 23; i < 24; i++)
    {
    	QObject::connect(statbutts[i], SIGNAL(statbuttclcked()), this, SLOT(setleftclicked()));
    }
    
    QFont STSFONT;
    STSFONT.setPointSize(12);
    STSFONT.setBold(false);
    
    QFont LOCATIONFONT;
    LOCATIONFONT.setPointSize(20);
    LOCATIONFONT.setBold(false);
    
    QFont WEATHERFONT;
    WEATHERFONT.setPointSize(40);
    WEATHERFONT.setBold(false);
    
    QPalette WEATHERPALETTE_NM;
    WEATHERPALETTE_NM.setColor(QPalette::WindowText, QColor(0, 188, 189));
    
    //WHITE
    QPalette DIDPALETTE_DM;
    DIDPALETTE_DM.setColor(QPalette::WindowText, QColor(255, 255, 255));
    
    //BLACK
    QPalette WEATHERPALETTE_DM;
    WEATHERPALETTE_DM.setColor(QPalette::WindowText, QColor(0, 0, 0));
    
    //LIGHT BLUE
    QPalette WEATHERPALETTEVALUE_NM;
    WEATHERPALETTEVALUE_NM.setColor(QPalette::WindowText, QColor(183, 231, 235));
    
    //DARK BLUE
    QPalette WEATHERPALETTEVALUE_DM;
    WEATHERPALETTEVALUE_DM.setColor(QPalette::WindowText, QColor(0, 188, 189));
    
    /*Settings*/
    LabelSett1 = new QLabel(this);
    LabelSett1->setGeometry(QRect(DID_X, DID_Y, TEMP_W, TEMP_H));
    LabelSett1->setAttribute(Qt::WA_TranslucentBackground);
    LabelSett1->setText("Set Date");
    LabelSett1->setFont(STSFONT);
    LabelSett1->setPalette(WEATHERPALETTE_DM);
    LabelSett1->setVisible(false);
    
    LabelSett2 = new QLabel(this);
    LabelSett2->setGeometry(QRect(DID1_X, DID1_Y, TEMP_W, TEMP_H));
    LabelSett2->setText("Distance Units");
    LabelSett2->setFont(STSFONT);
    LabelSett2->setPalette(WEATHERPALETTE_DM);
    LabelSett2->setVisible(false);
    
    LabelSett3 = new QLabel(this);
    LabelSett3->setGeometry(QRect(DID2_X, DID2_Y, TEMP_W, TEMP_H));
    LabelSett3->setAttribute(Qt::WA_TranslucentBackground);
    LabelSett3->setText("Temperature Units");
    LabelSett3->setFont(STSFONT);
    LabelSett3->setPalette(WEATHERPALETTE_DM);
    LabelSett3->setVisible(false);
    
    LabelSett4 = new QLabel(this);
    LabelSett4->setGeometry(QRect(DID3_X, DID3_Y, TEMP_W, TEMP_H));
    LabelSett4->setText("Liquid Volume Units");
    LabelSett4->setFont(STSFONT);
    LabelSett4->setPalette(WEATHERPALETTE_DM);
    LabelSett4->setVisible(false);
    
    LabelSett5 = new QLabel(this);
    LabelSett5->setGeometry(QRect(DID4_X, DID4_Y, TEMP_W, TEMP_H));
    LabelSett5->setAttribute(Qt::WA_TranslucentBackground);
    LabelSett5->setText("Adaptive Brightness");
    LabelSett5->setFont(STSFONT);
    LabelSett5->setPalette(WEATHERPALETTE_DM);
    LabelSett5->setVisible(false);
    
    LabelSett6 = new QLabel(this);
    LabelSett6->setGeometry(QRect(DID5_X, DID5_Y, TEMP_W, TEMP_H));
    LabelSett6->setText("Backlight Level");
    LabelSett6->setFont(STSFONT);
    LabelSett6->setPalette(WEATHERPALETTE_DM);
    LabelSett6->setVisible(false);
    
    LabelSett7 = new QLabel(this);
    LabelSett7->setGeometry(QRect(DID6_X, DID6_Y, TEMP_W, TEMP_H));
    LabelSett7->setText("Set Time");
    LabelSett7->setFont(STSFONT);
    LabelSett7->setPalette(WEATHERPALETTE_DM);
    LabelSett7->setVisible(false);
    
    LabelSett8 = new QLabel(this);
    LabelSett8->setGeometry(QRect(DID7_X, DID7_Y, TEMP_W, TEMP_H));
    LabelSett8->setText("Time Format");
    LabelSett8->setFont(STSFONT);
    LabelSett8->setPalette(WEATHERPALETTE_DM);
    LabelSett8->setVisible(false);
    
    LabelSett9 = new QLabel(this);
    LabelSett9->setGeometry(QRect(DID8_X, DID8_Y, TEMP_W, TEMP_H));
    LabelSett9->setText("Date Format");
    LabelSett9->setFont(STSFONT);
    LabelSett9->setPalette(WEATHERPALETTE_DM);
    LabelSett9->setVisible(false);
    

    }



  • @celica said in Moving a widget inside a layout:

    This doesn't have a layout though.

    How is your resize behavior then? I think your buttons will get messed up without any layout(if you just place them somewhere on your widget)

    Back to your tumbler: I would place it on your systemSettings widget. Either by widget promotion or you add them directly to your layout / to the place (above the buttons), where it should be. So your setting-widget contains the clock / time widget

    EDIT:
    Something like this:
    MainWindow.png

    Here's the layout structure I was thinking of (ofc ugly as hell, but it's just to show the structure, didnt want to use QML for that):
    TumblerLayout.png

    EDIT_2: The 3 buttons at the top shouldn't be included in the systemSettings-widget actually.... That black box should start below the three "menu" buttons.



  • @Pl45m4 that layout looks great..thanks a lot.

    I actually made a bit of progress
    If you look at my qml and the line
    anchors.centerIn: parent

    This was what was preventing the tumbler from moving and always centering it in the application window

    By removing this I can position it wherever I want by altering the x and y coordinates of the qml rectangle.
    Thanks again for helping



  • @celica

    Yes, it can work like this, but if you set your QML tumbler widget to fixed x-/y-coordinates, you will probably face some unwanted behavior while resizing or moving the whole program window.



  • @Pl45m4 oh yes. Good point.
    For me though it will never be resized as it will reside on one hardware type only


Log in to reply