I have a QMessagebox with a custom background image. Since there is some stuff on the top side of the background image I want to see, the text of the messagebox should be lowered. Does anybody know how I can do this? I already tried throwing in some white lines using br, so:
popup.setText("<font size =5 color =white ><br>""<br>""<br>""Are you sure you
want to erase the memory</font> ");
but this screws up the background picture. Is there any way I can move the "box" that contains the text to a lower position?
You could try to get the QMessageBox' layout, get the label which holds your text and increment the labels margin. This probably is a hack and might make your project unportable. Construct your QMessageBox, call hack and then exec the box.
void hack(QMessageBox* pMessageBox)
{
QGridLayout* grid = qobject_cast<QGridLayout*>(pMessageBox->layout());
if (grid)
{
QLabel* label = qobject_cast<QLabel*>((grid->itemAtPosition(0,1))->widget());
if (label)
{
label->setMargin(label->margin()+5); // whatever is suitable
}
}
}
Related
I'm trying to remove the down arrow from a combobox. All the solutions I have found just make the arrow disappear, for example this one.
Is there a way to remove completely the space where the arrow appears and fill the box just with the text of the selected choice?
If you want to completely elimnate the arrow & arrow button space, you can try with the below custom ComboBox.
The below code is setting the arrow button and arrow nodes size to 0 and asking to rerender the comboBox. The null check is to let this changes apply only once.
public class MyComboBox<T> extends ComboBox<T>{
Region arrowBtn ;
#Override
protected void layoutChildren() {
super.layoutChildren();
if(arrowBtn==null){
arrowBtn= (Region)lookup(".arrow-button");
arrowBtn.setMaxSize(0,0);
arrowBtn.setMinSize(0,0);
arrowBtn.setPadding(new Insets(0));
Region arrow= (Region)lookup(".arrow");
arrow.setMaxSize(0,0);
arrow.setMinSize(0,0);
arrow.setPadding(new Insets(0));
// Call again the super method to relayout with the new bounds.
super.layoutChildren();
}
}
}
UPDATE :
Based on the suggestion of #kleopatra, we can get the same behaviour using css as well (without the need to create a new class for ComboBox).
.combo-box .arrow-button,
.combo-box .arrow{
-fx-max-width:0px;
-fx-min-width:0px;
-fx-padding:0px;
}
The below image will tell you the difference of a normal combox box and this custom combo box. The left one is the normal comboBox, you can see the list cell when inspecting with ScenicView. The right one is the custom one. The list cell is completely occupied suppressing the arrow space.
I am trying to code a text editor from scratch in C++ using Qt/QML. For drawing the text I use a Canvas with a Context2D , which looks roughly like this:
function drawString(text, x, y, font) {
var ctx = getContext("2d");
ctx.font = font;
ctx.fillStyle = "black";
ctx.fillText(qsTr(text), x, y);
ctx.stroke();
}
In order to graphically represent a selected area, I want to invert the selecion, for instance place a black rectangle over an area and make the text white.
For this I will use ctx.globalCompositeOperation = "xor"
So the problem I ran into is: when I draw a text with the function above in black, and then afterwards paint the same text in the same location in white I would expect this canvas to be white again. Instead there is still some kind of outline of the text visible (like there is a shadow).
I already tried switching off all shadow parameters but it didn't solve my problem.
Here is a screenshot so you get a better idea of what it looks like:
Nevermind, I found the problem myself. The antialiasing property was set to true, which caused the effect. By setting it to false the text doesn't look as pretty but the shadow is gone.
1) How can I wrap text in a QGraphicsTextItem to fit a fixed rectangle, with width and height ?
Right now I am experimenting with creating a text, getting its bounding rectangle, and resizing it to fit the box - but I can't get wrapping.
class TTT: public QGraphicsTextItem {
TTT() {
{
setPlainText("abcd");
qreal x = m_itemSize.width()/boundingRect().width();
qreal y = m_itemSize.height()/boundingRect().height();
scale(x, y);
}
void paint(QPainter* painter, const QStyleOptionGraphicsItem* option, QWidget* widget) {
// experiment with clip regions
// text gets covered by hole in clip
QRegion r0(boundingRect().toRect());
QRegion r1(QRect(5, 5, 10, 10), QRegion::Ellipse);
QRegion r2 = r0.subtracted(r1);
painter->setClipRegion(r2);
painter->setBrush(Qt::yellow);
painter->drawRect(boundingRect());
QGraphicsTextItem::paint(painter, option, widget);
}
}
What makes wrapping happen, how can I trigger it ?
Right now, as I keep typing, the box is automatically expanding.
2) Is it possible to wrap the text in a QGraphicsItem / QGraphicTextItem subclass in a shape that is not a rectangle ?
(Something like in the image above)
I tried to use clipRegion, see code above, but I guess it is not the right way to go, clipping cuts the text but did not wrap.
Maybe it would... If I could figure out how to wrap text in the first place ?
Qt 4.8
You did not specify Qt version but try:
void QGraphicsTextItem::setTextWidth(qreal width)
Sets the preferred width for the item's text. If the actual text is wider than >the specified width then it will be broken into multiple lines.
If width is set to -1 then the text will not be broken into multiple lines >unless it is enforced through an explicit line break or a new paragraph.
The default value is -1.
In answer to 1) I'd opt not to use the QGraphicsTextItem, but draw the text directly in your QGraphicsItem's paint function using the drawText overloaded function, which takes a QTextOption parameter.
Using this, you can set the WrapMode, for example, with a call to
QTextOption::setWrapMode(QTextOption:: WordWrap)
As for 2) with a non-rectangular shape, I don't think Qt will do this for you.
Doing it yourself you can use QFontMetrics, to work out just how much text would fit in each line, depending upon where it lies within its bounding item.
Alternatively, you could adapt the concept of a text-to-path method.
I am subclassing QTabWidget to add a QTabBar, who's tabs stretch over the whole width of the tabBar. Therefore I am setting the expanding property to true. This doesn't seem to change anything about the behavior of the tabs.
Did anyone encounter the same problem? I use Qt 4.6 in combination with
TabWidget::TabWidget(QWidget *parent)
{
tabBar = new QTabBar(this);
tabBar->setIconSize(QSize(160,160));
tabBar->setExpanding(true);
setTabBar(tabBar);
}
EDIT: has been solved, here is how I implemented it, in case anyone is interested:
tabBar = new QTabBar(this);
tabBar->setExpanding(true);
layout = new QVBoxLayout(this);
setLayout(layout);
stackedLayout = new QStackedLayout();
layout->addWidget(tabBar);
layout->addLayout(stackedLayout);
connect(tabBar, SIGNAL(currentChanged(int)), stackedLayout, SLOT(setCurrentIndex(int)));
void MainWindow::addTab(QWidget *widget, const QIcon &icon, const QString &label) {
tabBar->addTab(icon, label);
stackedLayout->addWidget(widget);
}
From the QTabBar source code:
// ... Since we don't set
// a maximum size, tabs will EXPAND to fill up the empty space.
// Since tab widget is rather *ahem* strict about keeping the geometry of the
// tab bar to its absolute minimum, this won't bleed through, but will show up
// if you use tab bar on its own (a.k.a. not a bug, but a feature).
To get around this "feature", you can create your own tab widget using a QTabBar above a widget with a QStackedLayout.
5.2.0 onwards
QTabWidget::tab-bar {
min-width: 999999px;
}
It will work. No need to use any combination. You can use QTabWidget. Daniel ans is correct.
Building on #baysmith's answer, an easier way to force the QTabWidget to let the QTabBar expand, is to set a stylesheet on your QTabWidget that looks something like this:
QTabWidget::tab-bar {
width: 999999px;
}
Or another ridiculously large number. If your QTabWidget has the tabs going vertically instead of horizontally, use 'height' instead:
QTabWidget::tab-bar {
height: 999999px;
}
This seems to work fine for me, with Qt 5.0.1. The tabs expand to fill the space, each getting an equal portion. However, it seems like they intentionally leave enough empty space for one more tab, regardless. But the rest of the space is filled as desired. The empty space might be reserved for the tear/scroll buttons, incase too many tabs get added - but I'm not sure.
I have a question that might seem "basic" but I just cannot figure out how to do it...
I have a box and I'd like to change the borderColor. Till there, nothing special. Just a box.bordercolor = xxxxxx...
BUT, I'd like to have the top and bottom border with one color, and the left and right border with another color... And that's the part where I'm stuck.
Any tips? Suggestions?
Thanks for your help and time! ;)
Regards,
BS_C3
#Senz
Hi!
Unfortunately, I won't be able to share the code without making it "incomprehensible"...
But this is the idea... We have 2 main components: ArrowButton and Navigator.
ArrowButton is a hbox containing a label and an image (this image is the arrow tip and it changes depeding on the state of the ArrowButton).
Navigator is a hbox containing a series of ArrowButton. An ArrowButton overlaps the arrowButton on its right in order to create the pointed end of the button.
And then you just create a whole bunch of functionnalities around these components.
I hope this helps... Do not hesitate if you have some more questions =)
Regards.
I noticed you are asking about the Flex 3 SDK. Skins are a good approach. They have changed somewhat in Flex 4(for the better IMHO). If you are wanting to use the Flex Drawing API, then just extend the Box class into a custom class that would look something like this:
public class MultiColorBorderBox extends Box
{
// You could add getters/setters or constructor parameters to be able to change these values.
private var topColor:uint = 0xFF0000;
private var rightColor:uint = 0x00FF00;
private var bottomColor:uint = 0x0000FF;
private var leftColor:uint = 0xFF00FF;
private var borderWidth:Number = 20;
public function MultiColorBorderBox()
{
super();
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
// This just ensures you dont have content under your border
this.setStyle("paddingLeft", borderWidth);
this.setStyle("paddingRight", borderWidth);
this.setStyle("paddingTop", borderWidth);
this.setStyle("paddingBottom", borderWidth);
var g:Graphics = this.graphics; // This creates a new Graphics object and sets it to the MultiColorBorderBox graphics object. Since Box (superclass) descends from a Sprite object, it has a graphics object automatically.
g.clear();
g.moveTo(0,0); // Moves the position to the top left corner
g.lineStyle(borderWidth, topColor); // Sets the line style with the width and color
g.lineTo(unscaledWidth, 0); // Draws the top border from top left to top right corners
g.lineStyle(borderWidth, rightColor); // Changes the line style
g.lineTo(unscaledWidth, unscaledHeight); // Draws the line from top right to bottom right
g.lineStyle(borderWidth, bottomColor); //Changes the bottom border style
g.lineTo(0, unscaledHeight); // Draws the line from bottom right to bottom left
g.lineStyle(borderWidth, leftColor); // Changes the border color
g.lineTo(0,0); // Closes the box by drawing from bottom left to top left
}
I'm pretty sure you're going to have to create a borderSkin to accomplish this. I believe these are created in an external program, such as Flash Professional; but more info is in the docs.
I don't think that Flex makes any distinction between top/bottom borders and left/right borders. Creating a skin would certainly be the nifty-slick way to do it. A programmatic way might be to use box.graphics to draw your border by hand. I'd start by trying to override the updateDisplayList() function to draw your border...
I finally did a pretty simple thing.
I guess I wasn't detailed enough regarding the specifications.
The actual aim was to create a navigator with arrow shaped buttons.
Each button had to be highlighted when it was selected. And this http://www.freeimagehosting.net/uploads/bcd0d762d7.jpg is how the navigator looked like.
Each button is actually an HBox containing a Box (with a label) and an Image (for the arrow tip), with a horizontalGap = 0.
I didn't think about adding a glowfilter to the button. So I was trying to just change the colors of the top and bottom part of the Box...
So, the glowfilter in the button worked pretty well.
Sorry for the lack of explanations about the context >_< And thanks for your answers!!
Regards.