Display big image in QListWidget - qt

I want to use QListWidget to display big images, e.g. 3508×4961 size in pixels, each list item will display one image. The image is set in a Qlabel and the Qlabel is set into the QListWidgetItem by setItemWidget(). When my program is running, the list item cannot display the entire image because the image is too large. It only displays the upper part of an image. When I scroll down, the list item changes to the next image immediately instead of showing the lower part of the current image gradually. Does anyone know how to show the lower part of each image by scrolling?
Here is my code,
QImage *image = new QImage("/home/sk/image1.png");
QLabel *label = new QLabel;
label->setPixmap(QPixmap(QPixmap::fromImage(*image)));
QListWidgetItem *ite = new QListWidgetItem;
auto size = label->sizeHint();
ite->setSizeHint(label->sizeHint());
size = ite->sizeHint();
ui->listWidget->addItem(ite);
ui->listWidget->setItemWidget(ite, label);
image = new QImage("/home/sk/image2.png");
label = new QLabel;
label->setPixmap(QPixmap(QPixmap::fromImage(*image)));
ite = new QListWidgetItem;
ite->setSizeHint(label->sizeHint());
ui->listWidget->addItem(ite);
ui->listWidget->setItemWidget(ite, label);
image = new QImage("/home/sk/image3.png");
label = new QLabel;
label->setPixmap(QPixmap(QPixmap::fromImage(*image)));
ite = new QListWidgetItem;
ite->setSizeHint(label->sizeHint());
ui->listWidget->addItem(ite);
ui->listWidget->setItemWidget(ite, label);

have you tried changing the scroll mode to ScrollPerPixel
setVerticalScrollMode
and
setHorizontalScrollMode
ui->listWidget->setVerticalScrollMode(QListWidget::ScrollPerPixel);
and in order to change the scroll step
ui->listWidget->verticalScrollBar()->setSingleStep(10);
ui->listWidget->verticalScrollBar()->setPageStep(20);
these values will be used for scrolling

Related

Placing buttons on opposite sides of an adjustable window in JavaFX

I have two buttons that I'd like to use in my display screen: a reset button, and a settings button.
The problem is, I want them on opposite sides of the window (reset in the top right corner and settings in the top left) while being the same height. When I expand the window, however, the buttons stay in the same place, but I want them to move with the window walls.
I first tried using setAlignment of my reset button to Pos.*TOP_RIGHT* and the settings button to top left, but it comes out with the settings button being on top of the reset button.
resetButton = new Button("Reset Gameboard");this.setTop(resetButton);
resetBox = new HBox(resetButton);
resetBox.setAlignment(Pos.TOP_RIGHT);
backButton = new Button("Back to Settings");
this.setTop(backButton);
backBox = new HBox(backButton);
backBox.setAlignment(Pos.TOP_LEFT);
resetbackBox = new HBox(backButton, resetButton);
this.setTop(resetbackBox);`
I currently am using (below) which during the initial window appears to be working and correctly spaced, but as soon as you expand the window the reset button doesn't follow it, although the settings button does.
`resetButton = new Button("Reset Gameboard");
this.setTop(resetButton);
resetBox = new HBox(resetButton);
resetBox.setAlignment(Pos.TOP_RIGHT);
backButton = new Button("Back to Settings");
this.setTop(backButton);
backBox = new HBox(backButton);
backBox.setAlignment(Pos.TOP_LEFT);
resetbackBox = new HBox(backButton, resetButton);
resetbackBox.setSpacing(380);
this.setTop(resetbackBox);`
The problem start from this line:
resetbackBox.setSpacing(380);
You have setted a fixed spacing value. To fix that you can easily add a component to HBox called Region, this component allow to set a grow area between two buttons:
Button resetButton = new Button("Reset Gameboard");
Button backButton = new Button("Back to Settings");
Region region = new Region();
HBox.setHgrow(region, Priority.ALWAYS);
HBox topHBox = new HBox(backButton, region, resetButton);
this.setTop(resetbackBox);

How to add widgets to QToolbox item

I need to auto generate some UI forms in code to display message contents.
I want to use QToolbox, with an item for each message type. I then want to add labels and line edit to the contents of each tab, depending on the message protocol. I cannot seem to programaticaly add widget items to the toolbox item.
Below is my current code segment. The ui->frame is just a container for the toolbox. I will worry later about layout.
In my code, I create a frame and then some labels with parent set to the frame. Then I add the frame as an item to the toolbox.
QToolBox *qtbMainToolbox = new QToolBox(ui->frame);;
qtbMainToolbox->setGeometry(0,0,2000,900);
QFrame *frm1 = new QFrame;
QLabel *lbl1 = new QLabel(frm1);
QLabel *lbl2 = new QLabel(frm1);
QLabel *lbl3 = new QLabel(frm1);
QLabel *lbl4 = new QLabel(frm1);
iRetVal - qtbMainToolbox->addItem(frm1 ,"Test");
There is no visible element in your widgets; icon or any text.
You have to Set icon or Text to Your QLabel.
QToolBox *qtbMainToolbox = new QToolBox(ui->frame);;
qtbMainToolbox->setGeometry(0,0,2000,900);
QFrame *frm1 = new QFrame;
QLabel *lbl1 = new QLabel("Hello World",frm1);
iRetVal - qtbMainToolbox->addItem(frm1 ,"Test");
try above code.

QMainWindow : Set widgets size with respect to screen size

I have a Qt class which inherits from QMainWindow. The constructor of the class creates two widgets which are added to a horizontal layout object as follows:
MyWindow::MyWindow()
{
resize(QDesktopWidget().availableGeometry(this).size());
display = new MyWidget(this);
display->setSizePolicy(QSizePolicy::Expanding,
QSizePolicy::Expanding);
current = new MyWidget(this);
current->setSizePolicy(QSizePolicy::Expanding,
QSizePolicy::Expanding);
QHBoxLayout *layout = new QHBoxLayout();
layout->addWidget(display);
layout->addWidget(current);
QFrame* frame = new QFrame();
frame->setFrameShape(QFrame::StyledPanel);
frame->setLayout(layout);
setCentralWidget(frame);
show();
}
This currently shows the widget side of side of each other. However, what I would like to do is have one of the widgets take 30% of the horizontal space while the other one occupies the other 70%. I would also like the widgets to expand or contract if one resizes the main window but keeping these ratios.
When you place a widget into a layout you can specify its stretch factor:
QHBoxLayout *layout = new QHBoxLayout();
layout->addWidget(display, 3);
layout->addWidget(current, 7);
http://doc.qt.io/qt-5/qboxlayout.html#addWidget

Qt- How to position UI elements like this?

I am creating a UI in Qt that has a QDockWidget containing a QPushButton and QLineEdit. Please refer to the attached mock-up. I have created the widget components and successfully got them up and running. However they are not positioned the way I want them to. Both the elements should float to the left making the extra space to the right stretch when the window is resized.
The code-
this->searchField = new QLineEdit; //"this" is a QDockWidget subclassed Object
searchField->setFixedWidth(200);
mainMenu = new Menu();
QHBoxLayout *layout= new QHBoxLayout;
QSpacerItem *filler = new QSpacerItem(1000, 10);
layout->addWidget(mainMenu->getMenuBar());
layout->addWidget(this->searchField);
layout->addSpacerItem(filler);
Any suggestion or help would be awesome!
Thanks for your time :)
http://qt-project.org/doc/qt-4.8/layout.html
http://qt-project.org/doc/qt-4.8/qboxlayout.html#addStretch
void QBoxLayout::addStretch ( int stretch = 0 )
Adds a stretchable space (a QSpacerItem) with zero minimum size and stretch factor stretch to the end of this box layout.
So this is what your new code would look like:
this->searchField = new QLineEdit;
searchField->setFixedWidth(200);
mainMenu = new Menu();
QHBoxLayout *layout= new QHBoxLayout;
layout->addWidget(mainMenu->getMenuBar());
layout->addWidget(this->searchField);
layout->addStretch(); // Added this
Hope that helps.

Displaying Images Side-by-Side in Qt with Scrollbars

I'm a Qt newbie. I want to display 2 images side-by-side using Qt. Using Qt's Image Viewer Example, I want to add another scrollable image display, such that both images are displayed side-by-side.
The example code has this snippet for the ctor:
ImageViewer::ImageViewer()
{
imageLabel = new QLabel;
imageLabel->setBackgroundRole(QPalette::Base);
imageLabel->setSizePolicy(QSizePolicy::Ignored, QSizePolicy::Ignored);
imageLabel->setScaledContents(true);
scrollArea = new QScrollArea;
scrollArea->setBackgroundRole(QPalette::Dark);
scrollArea->setWidget(imageLabel);
setCentralWidget(scrollArea);
...
If I understand it correctly, I want to get imageLabel to be only half width of the screen while another QLabel is displayed on the other half.
How can I do this?
Thanks.
If I understand correctly, this here should suffice:
// Left image
imageLabelLeft = new QLabel;
imageLabelLeft->setBackgroundRole(QPalette::Base);
imageLabelLeft->setSizePolicy(QSizePolicy::Ignored, QSizePolicy::Ignored);
imageLabelLeft->setScaledContents(true);
scrollAreaLeft = new QScrollArea;
scrollAreaLeft->setBackgroundRole(QPalette::Dark);
scrollAreaLeft->setWidget(imageLabelLeft);
// Right image
imageLabelRight = new QLabel;
imageLabelRight->setBackgroundRole(QPalette::Base);
imageLabelRight->setSizePolicy(QSizePolicy::Ignored, QSizePolicy::Ignored);
imageLabelRight->setScaledContents(true);
scrollAreaRight = new QScrollArea;
scrollAreaRight->setBackgroundRole(QPalette::Dark);
scrollAreaRight->setWidget(imageLabelRight);
// Do the layout
QWidget *centralWidget = new QWidget;
QHBoxLayout *layout = new QHBoxLayout(centralWidget);
layout->addWidget(scrollAreaLeft);
layout->addWidget(scrollAreaRight);
setCentralWidget(centralWidget);

Resources