Создание собственного всплывающего окна, которое меняет высоту в зависимости от содержимого и при необходимости добавляеCSS

Разбираемся в CSS
Ответить Пред. темаСлед. тема
Anonymous
 Создание собственного всплывающего окна, которое меняет высоту в зависимости от содержимого и при необходимости добавляе

Сообщение Anonymous »

Ниже приведены два макета, которые я сделал в Paint, чтобы продемонстрировать, что я пытаюсь сделать. Я хочу построить постройку, соответствующую следующим критериям:
  • Размер по горизонтали должен быть фиксированным.
  • Размер по вертикали должен быть фиксированным.
  • Размер по вертикали должен быть фиксированным.
  • Размер по вертикали должен быть фиксированным. быть минимальным, но при необходимости может расширяться.
  • Если описание (белая часть) всплывающего окна увеличивается до размера, оно больше не помещается на экране (с некоторым запасом c) , затем должна появиться полоса прокрутки.
  • Размер заголовка (желтого раздела) не должен меняться.
  • Описание может быть чем угодно, иногда текстом. , иногда другой виджет, иногда изображения.
[img]https://i.stack. imgur.com/YxBSQ.png[/img]

Изображение

Вот что я сделал на данный момент:
  • Я сделал белую часть, чтобы быть QWidget, чтобы упростить замену дочернего виджета другим.
  • Я зафиксировал ширину по горизонтали, задав отступ основного кадра.
Я не знаю, куда идти дальше. Я не хочу использовать QMessageBox, так как хочу иметь полный контроль над дизайном, а также понимать, как все работает.
Вот файл .ui:

Код: Выделить всё


Popup



0
0
480
800




480
800



Frame


0.000000000000000


background-color: rgba(0, 0, 0, 0.5);


QFrame::NoFrame


QFrame::Plain


0



72


72




Qt::Vertical



0
254







true



336
80




336
800



.QWidget{
border-radius: 10px;
background-color: rgba(255, 255, 255,1);
}



0


QLayout::SetMinAndMaxSize


0


0


0


0





0
0




0
80




Sans Serif
18
true



background-color: #FFBF00;
padding:10px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;


Lorem Ipsum


Qt::AlignCenter


true






background-color:white





Qt::ScrollBarAsNeeded


Qt::ScrollBarAlwaysOff


QAbstractScrollArea::AdjustToContents


true


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html><head><meta name="qrichtext" content="1" /><meta charset="utf-8" /><style type="text/css">
p, li { white-space: pre-wrap; }
hr { height: 1px; border-width: 0; }
li.unchecked::marker { content: "\2610"; }
li.checked::marker { content: "\2612"; }
</style></head><body style=" font-family:'Ubuntu'; font-size:11pt; font-weight:400; font-style:normal;">
<p align="center" style="-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><br /></p></body></html>


Qt::NoTextInteraction












Qt::Vertical



0
254










Класс всплывающего окна:
header:

Код: Выделить всё

#ifndef POPUP_H
#define POPUP_H

#include 

namespace Ui {
class Popup;
}

class Popup : public QFrame
{
Q_OBJECT

public:
explicit Popup(QWidget *parent = nullptr);
void setDescription(const QString &text);
~Popup();

private:
Ui::Popup *ui;
};

#endif // POPUP_H

источник:

Код: Выделить всё

#include "popup.h"
#include "ui_popup.h"

Popup::Popup(QWidget *parent) :
QFrame(parent),
ui(new Ui::Popup)
{
ui->setupUi(this);
ui->teDescription->setFrameStyle(QFrame::NoFrame);
ui->teDescription->setAlignment(Qt::AlignCenter);
}

void Popup::setDescription(const QString &text)
{
ui->teDescription->setText(text);
}

Popup::~Popup()
{
delete ui;
}

Main.cpp:

Код: Выделить всё

#include "mainwindow.h"

#include 

#include "popup.h"
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
MainWindow w;
Popup pop;
pop.setDescription("This is a \nTest\nto\nsee\n\nhow\nwell it works\nThis is a \nTest\nto\nsee\n\nhow\nwell it works\nThis is a \nTest\nto\nsee\n\nhow\nwell it works\nThis is a \nTest\nto\nsee\n\nhow\nwell it works\nThis is a \nTest\nto\nsee\n\nhow\nwell it works\nThis is a \nTest\nto\nsee\n\nhow\nwell it works\nThis is a \nTest\nto\nsee\n\nhow\nwell it works\nThis is a \nTest\nto\nsee\n\nhow\nwell it works\nThis is a \nTest\nto\nsee\n\nhow\nwell it works\nThis is a \nTest\nto\nsee\n\nhow\nwell it works\nThis is a \nTest\nto\nsee\n\nhow\nwell it works\nThis is a \nTest\nto\nsee\n\nhow\nwell it works\nThis is a \nTest\nto\nsee\n\nhow\nwell it works\n");
// w.show();
pop.show();
w.setGeometry(0,0,480, 800);
return a.exec();
}

Главное окно используется по умолчанию и не используется.
Вот как оно выглядит сейчас
Изображение


Подробнее здесь: https://stackoverflow.com/questions/782 ... scroll-bar
Реклама
Ответить Пред. темаСлед. тема

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

Вернуться в «CSS»