I want to create a custom drop-down box with text inside. The problem is, when I resize my Rectangle to fold it the Text stays on screen.
Rectangle {
id: dropdown
height: 200
width: 200
color: "red"
Behavior on height {
NumberAnimation {
duration: 1000;
easing.type: Easing.InQuad
}
}
Text {
id: text
anchors.left: parent.left
anchors.top: parent.top
text: "foobar"
}
}
How to solve this?
Ok. I have it thanks to jbache.
I need to put clip:true inside dropdown. According to the documentation of clip:
This property holds whether clipping is enabled. The default clip value is false.
If clipping is enabled, an item will clip its own painting, as well as the painting of its children, to its bounding rectangle.
Hence, by setting the property to true, I can ensure that also the child Text will be correctly hidden on drop-down dismiss.
Related
I've been looking everywhere online but cannot find a working solution. When the application is used on a Desktop computer or laptop, it works fine. Mouse clicks are working, it's when we try with a device with a touch screen like surface pro, that's when problems appear.
I have tried adding to the cpp file that calls the QQuickwidget the flag responsible for detecting touch events and it works with some buttons but other widgets or items are not responding.
AppName *AppName::createInstance(QWidget *parent)
{
instanceUsageCounter++;
if (instance == nullptr)
{
ui = new Ui::AppName();
instance = new AppName();
ui->setupUi(parent);
ui->dc_stackWidget->setCurrentIndex(0);
ui->widget_qml->setAttribute(Qt::WA_AcceptTouchEvents);
QCoreApplication::setAttribute(Qt::AA_SynthesizeMouseForUnhandledTouchEvents);
}
return instance;
}
Comboboxes for example.
What exactly needs to be added to make the app detect both mouse clicks and touch events and wokr properly? What exactly is missing?
This is a part in my QML code that worked when I added a TapHandler:
RoundButton
{
id: playButton
icon.source: "qrc:/Resourese/Images/Utility/play.png"
icon.color: "white"
icon.height: playButton.height*0.5
icon.width: playButton.width*0.5
width: settingsButton.width
height: width
radius: width/2
x: width + settingsButton.x + parent.width*0.015
y: settingsButton.y
// x: settingsButton.x
// y: height + settingsButton.y + parent.height*0.015
TapHandler
{
gesturePolicy: TapHandler.ReleaseWithinBounds
onTapped: playButtonClicked();
}
onClicked:
{
playButtonClicked();
}
background: Rectangle
{
//border.color: "#14191D"
color: playButton.hovered || playButton.pressed ? "#3a5470":"#5f758d"
width: playButton.width
height: width
radius: width/2
}
}
Here you will see that there is an onClick and above it is the* TapHandler* that was added recently to add the ability for the boutton to be triggerd when touched on a touch screen. This only worked when the flag in the cpp file was added.
Now look at this:
Rectangle
{
id: settingsCell_R7_C3
Layout.fillHeight: true
Layout.fillWidth: true
Layout.columnSpan: 3
Layout.rowSpan: 1
Layout.row: 6
Layout.column: 0
color: "transparent"
Button
{
text: "Save settings"
font.pixelSize: 30
width: parent.width*0.8
height: parent.height*0.7
anchors.centerIn: settingsCell_R7_C3
TapHandler
{
gesturePolicy: TapHandler.ReleaseWithinBounds
onTapped: applySettings()
}
onClicked: applySettings()
}
}
This Rectangle is within a gridlayout that is inside a Pop up when a Round button similar to the above gets clicked it triggers the pop up window that contains the Rectangle above. The button in this Rectangle when touched is within focus, but not triggered.
I'm learning how to make Plasmoids with QML, and I'm using Plasmoidviewer to view the package as I build it.
However, when I launch it, my widget is clipped into the lower right corner, like this:
If I resize the window a bit, then resize it back to the original size, the widget snaps into view:
The main.qml is just a simple Hello World:
Item {
//Plasmoid.preferredRepresentation: Plasmoid.compactRepresentation
Plasmoid.preferredRepresentation: Plasmoid.fullRepresentation
Plasmoid.fullRepresentation: Rectangle {
color: "blue"
opacity: 0.3
Layout.minimumWidth: label.implicitWidth
Layout.minimumHeight: label.implicitHeight
Layout.preferredWidth: 640 * PlasmaCore.Units.devicePixelRatio
Layout.preferredHeight: 480 * PlasmaCore.Units.devicePixelRatio
PlasmaComponents.Label {
id: label
anchors.fill: parent
text: "Hello World!"
horizontalAlignment: Text.AlignHCenter
}
}
}
Any idea why this is happening, and how I can get the widget to be displayed in the center of plasmoidviewer? This is really annoying to develop with.
I'm using Qml 5.12 and basically trying to set an implicitWidth to a GridLayout.
For that, I have a purple rectangle and set the rectangle's width to the GridLayout.
The red rectangle fit with the GridLayout so I can see the width of my GridLayout.
Here's my code:
Rectangle { anchors.fill: gl; color: "red"; opacity: 0.22 }
Rectangle { id: rect; width: 350; height: 30; color: "purple"; }
GridLayout
{
id: gl
y: 35
implicitWidth: rect.width
columns: 2
Label { text: "This is a test" }
SpinBox { Layout.alignment: Qt.AlignRight }
}
If I run the code, I expect to have my both rectangle with the same width.
But the actual result is that the red rectangle is smaller. So the implicitWidth was not considerate.
Can anybody tell my why ?
Thank's !
The GridLayout compute its own implicitWidth based on its children's implicitWidth. So the value you set gets overwritten by the computed one.
implicitWidth is the width an Item wants to have (and the one it would have if no width is explicitely set). Setting it based on something else than its children or some internal value makes little sense.
Here you want the GridLayout to be the exact size of your Rectangle so just set its width property.
I'm trying to get something in a ScrollView to expand in width to fit the screen. The ScrollView is anchored to the main window.
For example purposes, a Rectangle:
ScrollView {
anchors.fill: parent //mainWindow
Rectangle {
color: "light grey"
height: 1000
width: mainWindow.width
}
}
But when the vertical scrollbar appears, it obscures the Rectangle. I can sort of fix it by using a magic constant:
width: mainWindow.width - 20
But what if somebody has bigger scrollbars on their computer? Also it leaves an ugly empty space on the right when the vertical scrollbar is invisible.
Is there a way to automatically learn what the available space is inside of a ScrollView?
There is no need to explicitly adjust to scroll bar. You can just make it to fill the entire available parent space or so. And if you want specify margins:
ScrollView {
id: scrollView
anchors.fill: parent // mainWindow ?
anchors.centerIn: parent // anchoring as asked
anchors.margins: 20
contentItem:
Rectangle {
id: rectScroll
width: scrollView.viewport.width // set as viewport
height: 1000 // set to what you need
}
}
The original issue was solved mainly due to the width property of Rectangle set to parent.parent.width or scrollView.viewport.width as it is more adequate. The latter is definitely better, as long as the width of precisely viewport of scroll area and not the parent width (which in general not guaranteed to contain only this ScrollView).
Is there a way in cascades to get font size for a given text and fixed width?
I was trying with:
TextField{
autoFit: TextAutoFit.FitToBounds
}
But the text always appear left align. The requirement is to center align text with variable font size label render in fixed rect.
If you want just to center align text, you'd need to use textStyle.textAlign property like that:
textStyle.textAlign: TextAlign.Center
In order to center align text with variable font size label render in fixed rect, you basically need to specify the desired width and height of that rectangle for a Label use textStyle.textAlign property mentioned above and choose the font size via respective textStyle.fontSize Label property. Text aligning will be done by Cascades automatically (of course, if your text couldn't be fit in specified width/height it'd be cut off):
import bb.cascades 1.0
Page {
Container {
layout: DockLayout {}
horizontalAlignment: HorizontalAlignment.Fill
verticalAlignment: VerticalAlignment.Fill
Label {
horizontalAlignment: HorizontalAlignment.Center
verticalAlignment: VerticalAlignment.Center
maxWidth: 300
minWidth: maxWidth
maxHeight: 100
minHeight: maxHeight
multiline: true
text: "Some very very very very very long text here"
textStyle.textAlign: TextAlign.Center
textStyle.fontSize: FontSize.XLarge
}
}
}
I'd recommend this approach for achieving the goal set.
However, if you really want to get absolute values of font being used in a widget, use textStyle.fontSize property for this (TextStyle official documentation).
There are no font metrics in BB10 Cascades at the moment so you won't be able to find out if the font does not fit in the label and resize it.
You can use sort of hack with layoutUpdateHandler to get some rough resizing, but I wouldn't recommend it. If the text changes frequently you will see flickering, but if it's only set once then it might be okay. Change the text set in "onCreationCompleted" to see if the text resizes for you.
Container {
id: root
implicitLayoutAnimationsEnabled: false
background: Color.Cyan
property int width: 500
property string text: ""
property double textSize: 20
layout: DockLayout {
}
attachedObjects: [
LayoutUpdateHandler {
onLayoutFrameChanged: {
if (layoutFrame.width > root.width) {
root.textSize = root.textSize - 1
}
}
}
]
Label {
implicitLayoutAnimationsEnabled: false
maxWidth: root.width
text: root.text
textStyle {
fontSize: FontSize.PointValue
fontSizeValue: root.textSize
}
}
Label {
implicitLayoutAnimationsEnabled: false
text: root.text
opacity: 0
textStyle {
fontSize: FontSize.PointValue
fontSizeValue: root.textSize
}
}
onCreationCompleted: {
root.text = "Hello World AAAAAAAA"
}
}