In the example code, ToolTip text gets above header and footer. Is there a way to hide ToolTip when it is outside of ScrollView?
The idea is to have TextInputs and show tooltip when it have focus. Here I have replaced TextInput with Buttons for simplification.
import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
ColumnLayout {
anchors.fill: parent
Layout.fillWidth: true
spacing: 0
Rectangle {
id: headerRect
Layout.fillWidth: true
height: 150
color: "blue"
z: 1
}
ScrollView {
id: scrollview
Layout.fillWidth: true
Layout.fillHeight: true
ListView{
id: listview
model: {1;2;3;4;5;6;7;8;9}
spacing: 1
delegate: Button {
text: "Button"
ToolTip{
visible: parent.focus? true : false
text: "tooltip text"
}
}
}
}
Rectangle {
id: footerRect
Layout.fillWidth: true
height: 150
color: "blue"
z: 1
}
}
}
use hovered replace focurse
ToolTip{
visible: parent.hovered ? true : false
text: "tooltip text"
}
Related
And now I have a problem with my qml script. here's the simple code:
import QtQuick 2.0
import QtQuick.Window 2.0
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.0
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Rectangle {
id: root
anchors.fill: parent
color: "green"
SystemPalette { id: activePalette }
ColumnLayout {
id: rightPanel
Layout.fillHeight: true
Layout.fillWidth: true
Layout.rightMargin: 10
anchors.fill: parent
Component.onCompleted: {
console.log(this, width, parent, parent.width)
}
ListView {
spacing: 2
Layout.fillHeight: true
Layout.fillWidth: true
model: ListModel {
ListElement {
name: "nihao"
value: "1"
}
ListElement {
name: "fds"
value: "2"
}
ListElement {
name: "fdssd"
value: "4"
}
}
delegate: Component {
// Rectangle {
// color: "yellow"
// height: 40
// width: parent.width
Row {
anchors.fill: parent
spacing: 2
height: 40
width: 200
Rectangle {
color: activePalette.window
height: 25
width: 100
border.color: "white"
border.width: 3
Text {
anchors.centerIn: parent
text: name
}
}
Rectangle {
color: activePalette.window
height: 25
width: 100
border.color: "white"
border.width: 3
Text {
anchors.centerIn: parent
text: value
}
}
}
//}
}
}
}
}
}
The code does't display correctly when I use qmlscene to render it, it even render nothing if the ListModel is too long.
But, if I uncomment out the "Rectangle" code in delegate component, it works well. So I'm comfused with the difference between Reactangle and Row for that they are all inherited from Item. And what should be placed into the delegate component as its direct child?
I have the following code that displays a row of buttons.
I want to have the buttons have the same width but dont seem to be able to get there.
Anybody know how to do this?
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Rectangle {
RowLayout {
id: rowLayout
RoundButton {
id: roundButton
text: "Engage"
}
RoundButton {
id: roundButton1
text: "Disengage"
}
}
}
}
this should do the trick. Make shure RoundButton doesn't set its width and height properties, but uses implicitWidth and implicitHeight so it uses the size of the Layout.
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Rectangle {
RowLayout {
id: rowLayout
width: parent.width
height: 300
RoundButton {
id: roundButton
Layout.fillWidth: true
text: "Engage"
}
RoundButton {
id: roundButton1
Layout.fillWidth: true
text: "Disengage"
}
}
}
}
I have QML element consisting of transparent Rectangle and Image inside of it. The purpose of this element is to show some operation success - if some operation was executed successfully, checkmark icons pops up and then slowly dissapears in time of 1000ms.
Here is the simplified code that should done this job:
import QtQuick 2.5
import QtQuick.Layouts 1.1
Rectangle
{
id: ueActionResultIndicator
property bool ueParamConnectionOk: false
width: 128
height: 128
color: "transparent"
ColumnLayout
{
anchors.fill: parent
Image
{
Layout.fillWidth: true
Layout.fillHeight: true
horizontalAlignment: Qt.AlignHCenter
verticalAlignment: Qt.AlignVCenter
smooth: true
fillMode: Image.PreserveAspectFit
// source: ueParamConnectionOk===true?"qrc:///ueIcons/icons/ueActionOk.png"
// :"qrc:///ueIcons/icons/ueActionCancel.png"
source: "http://www.clker.com/cliparts/0/f/7/0/11954234311954389563ok_mark_h_kon_l_vdal_02.svg.hi.png"
} // Image
} // ColumnLayout
states:
[
State
{
name: "ueStateHidden"
PropertyChanges
{
target: ueActionResultIndicator
opacity: 0.00
} // PropertyChanges
}, // State
State
{
name: "ueStateShown"
PropertyChanges
{
target: ueActionResultIndicator
opacity: 1.00
} // PropertyChanges
} // State
] // states
transitions:
[
Transition
{
from: "ueStateShown"
to: "ueStateHidden"
PropertyAnimation
{
properties: "opacity"
duration: 1000
loops: 3
easing.type: Easing.InOutSine
onStarted:
{
visible=true;
enabled=true;
} // onStarted
onStopped:
{
visible=false;
enabled=false;
} // onStopped
} // PropertyAnimation
} // Transition
] // transitions
Component.onCompleted:
{
state="ueStateHidden";
} // Component.onCompleted
} // Rectangle
and here is parent .QML file triggering it:
import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.1
import QtQuick.Window 2.2
import QtQuick.Controls.Styles 1.4
Window
{
width: 512
height: 512
flags: Qt.FramelessWindowHint
visible: true
ColumnLayout
{
anchors.fill: parent
spacing: 8
Rectangle
{
Layout.fillWidth: true
Layout.fillHeight: true
Layout.margins: 8
radius: 16
border.color: "#4682b4"
border.width: 1
antialiasing: true
gradient: Gradient
{
GradientStop
{
position: 0
color: "#636363"
} // GradientStop
GradientStop
{
position: 1
color: "#303030"
} // GradientStop
} // Gradient
ColumnLayout
{
anchors.fill: parent
RowLayout
{
spacing: 8
Layout.fillWidth: true
Layout.fillHeight: true
Layout.margins: 8
Layout.alignment: Qt.AlignHCenter|Qt.AlignTop
antialiasing: true
Text
{
text: qsTr("APPLICATION SETTINGS")
clip: true
font.bold: true
font.pointSize: 24
textFormat: Text.RichText
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
} // Text
} // RowLayout
ColumnLayout
{
Layout.fillWidth: true
Layout.fillHeight: true
Layout.margins: 8
Layout.alignment: Qt.AlignHCenter|Qt.AlignBottom
TabView
{
Layout.fillWidth: true
Layout.fillHeight: true
Layout.alignment: Qt.AlignHCenter|Qt.AlignVCenter
frameVisible: true
Tab
{
asynchronous: true
title: qsTr("Database")
Layout.fillWidth: true
Layout.fillHeight: true
Layout.alignment: Qt.AlignHCenter|Qt.AlignVCenter
ColumnLayout
{
spacing: 8
Layout.fillWidth: true
Layout.fillHeight: true
Layout.alignment: Qt.AlignHCenter|Qt.AlignVCenter
TextField
{
id: textFieldServerAddress
antialiasing: true
Layout.fillWidth: true
Layout.fillHeight: false
placeholderText: qsTr("database server address")
} // TextField
TextField
{
id: textFieldServerPort
Layout.fillWidth: true
Layout.fillHeight: false
placeholderText: qsTr("database server port")
} // TextField
TextField
{
id: textFieldDatabaseName
Layout.fillWidth: true
Layout.fillHeight: false
placeholderText: qsTr("database name")
} // TextField
TextField
{
id: textFieldDatabaseUsername
Layout.fillWidth: true
Layout.fillHeight: false
placeholderText: qsTr("database access username")
} // TextField
TextField
{
id: textFieldDatabasePassword
Layout.fillWidth: true
Layout.fillHeight: false
placeholderText: qsTr("database access password")
echoMode: TextInput.PasswordEchoOnEdit
} // TextField
RowLayout
{
Layout.fillWidth: true
Layout.fillHeight: false
Layout.alignment: Qt.AlignLeft|Qt.AlignVCenter
spacing: 8
Button
{
Layout.fillWidth: false
Layout.fillHeight: true
Layout.alignment: Qt.AlignLeft|Qt.AlignVCenter
text: qsTr("Test Connection")
onClicked:
{
ueActionResultIndicator.state="ueStateShown";
} // onClicked
} // Button
} // RowLayout
} // ColumnLayout
} // Tab
} // TabView
} // ColumnLayout
} // ColumnLayout
} // Rectangle
} // ColumnLayout
UeActionResultIndicator
{
id: ueActionResultIndicator
} // UeActionResultIndicator
} // Window
Why the checkmark once shown does not slowly dissapear, i.e., why does PropertyAnimation not get started?
You only shown Image.
ueActionResultIndicator.state = "ueStateShown";
For disappear you must add
ueActionResultIndicator.state = "ueStateHidden"
But, anyway, i think, you must refactor this code and run animation from function without states:
Rectangle {
id: rect
width: 100
height: 62
color: "green"
PropertyAnimation
{
id: opacityAnimation
properties: "opacity"
target: rect
from: 0.0
to: 1.0
duration: 1000
loops: 3
easing.type: Easing.InOutSine
onStarted:
{
visible=true;
enabled=true;
} // onStarted
onStopped:
{
visible=false;
enabled=false;
} // onStopped
} // PropertyAnimation
function runAnimation() {
opacityAnimation.running = true
}
}
I am working on QML/Qt app and I have following ListView, names ueUserInfoListView:
ListView
{
id: ueUserInfoListView
antialiasing: true
Layout.alignment: Qt.AlignHCenter|Qt.AlignVCenter
Layout.fillWidth: true
Layout.fillHeight: true
Layout.margins: 8
clip: true
spacing: 64
orientation: ListView.Horizontal
highlightFollowsCurrentItem: true
delegate: Image
{
id: ueUserInfoListViewDelegate
source: "image://uePeopleModel/"+model.ueRoleImage
opacity: 0.3
fillMode: Image.PreserveAspectFit
function ueDoOpacity()
{
if(ueUserInfoListViewDelegate===ueUserInfoListView.currentItem)
opacity=1.0
else
opacity=0.3
}
Behavior on opacity
{
NumberAnimation
{
duration: 300
} // NumberAnimation
} // Behavior
Component.onCompleted:
{
ueUserInfoListViewDelegate.focusChanged.connect(ueDoOpacity)
} // Component.onCompleted
} // delegate
Component.onCompleted:
{
model=uePeopleModel
} // Component.onCompleted
preferredHighlightBegin: width/2-70
preferredHighlightEnd: width/2+70
highlightRangeMode: ListView.StrictlyEnforceRange
currentIndex: count/2
} // ListView
I am tryigin to call ueUserInfoListView from another separated (in terms of file) Item, named ueProductSelector:
import QtQuick 2.5
import QtQuick.Layouts 1.2
import si.mikroelektronika 1.0
Item
{
id: ueProductSelector
antialiasing: true
clip: true
Rectangle
{
id: ueProductSelectorWrapper
radius: 16
gradient: Gradient
{
GradientStop
{
position: 0
color: "#ffffff"
} // GradientStop
GradientStop
{
position: 1
color: "#000000"
} // GradientStop
} // Gradient
border.color: "#4682b4"
border.width: 1
antialiasing: true
anchors.centerIn: parent
anchors.fill: parent
ColumnLayout
{
anchors.margins: parent.radius/2
spacing: 0
antialiasing: true
anchors.fill: parent
anchors.centerIn: parent
GridView
{
id: ueProductGridView
antialiasing: true
clip: true
Layout.fillWidth: true
Layout.fillHeight: true
cellWidth: 144
cellHeight: 144
model: ueProductsModel
delegate: Rectangle
{
radius: 16
clip: true
width: ueProductGridView.cellWidth-8
height: ueProductGridView.cellHeight-8
border.color: "#4682b4"
antialiasing: true
gradient: Gradient
{
GradientStop
{
position: 0
color: "#000000"
ParallelAnimation on color
{
id: ueProductSelectorDelegateMouseAreaAnimation
loops: 1
running: false//ueDelegateMouseArea.pressed
ColorAnimation
{
from: "#4682b4"
to: "#000000"
duration: 100
} // ColorAnimation
} // ParallelAnimation
} // GradientStop
GradientStop
{
position: 1
color: "#ffffff"
} // GradientStop
} // Gradient
MouseArea
{
id: ueDelegateMouseArea
anchors.fill: parent
onClicked:
{
var selectedIndex=ueProductGridView.currentIndex=index;
ueProductSelectorDelegateMouseAreaAnimation.running=true;
ueProductGridView.currentIndex=index;
ueOrdersModel.ueSetRecordValues(ueUserInfoListView.model.get(ueUserInfoListView.currentIndex).ueRoleId,
uePlacesListView.model.get(uePlacesListView.currentIndex).ueRoleId,
ueProductGridView.model.get(selectedIndex).ueRoleProductId,
1);
} // onClicked
} // MouseArea
ColumnLayout
{
anchors.centerIn: parent
anchors.fill: parent
antialiasing: true
spacing: 8
Image
{
Layout.fillWidth: true
Layout.fillHeight: false
Layout.alignment: Qt.AlignCenter|Qt.AlignTop
Layout.topMargin: ueProductSelectorWrapper.radius+4
fillMode: Image.PreserveAspectFit
horizontalAlignment: Image.AlignHCenter
verticalAlignment: Image.AlignVCenter
antialiasing: true
source: "image://ueProductsModel/"+model.ueRoleImage
} // Image
Text
{
Layout.fillWidth: true
Layout.fillHeight: true
Layout.alignment: Qt.AlignCenter|Qt.AlignBottom
Layout.bottomMargin: ueProductSelectorWrapper.radius+4
color: "#000000"
text: model.ueRoleProductName
wrapMode: Text.WordWrap
font.family: "Courier"
textFormat: Text.RichText
font.bold: true
font.pointSize: 10
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
} // Text
} // ColumnLayout
} // delegate
Component.onCompleted:
{
ueProductSelectorOpacityAnimator.running=true
}
} // GridView
} // ColumnLayot
} // Rectangle
} // Item
and I get following error:
qrc:/gui/items/UeProductSelector.qml:126: ReferenceError:
ueUserInfoListView is not defined
Why?
Well, you should not do this. Using an ID of another component in a seperate QML component file is evil!
Try to avoid this at all costs. It will couple your QML components and they are not really reuseable.
So, to solve your problem you should pass the ListView component as a property to your ueProductSelector component:
import QtQuick 2.5
import QtQuick.Layouts 1.2
import si.mikroelektronika 1.0
Item
{
id: ueProductSelector
antialiasing: true
clip: true
property ListView ueUserInfoListView
// [...]
}
Then you should be able to call
ueOrdersModel.ueSetRecordValues(ueUserInfoListView.model.get(ueUserInfoListView.currentIndex).ueRoleId,
uePlacesListView.model.get(uePlacesListView.currentIndex).ueRoleId,
ueProductGridView.model.get(selectedIndex).ueRoleProductId,
1);
in your second component.
The ListView component is passed as a reference of (QObject*) and should not be performance critical.
If the MouseArea was declared in UeDelegate.qml, and UeListView.qml (imaginary file names for the sake of the example) contained a ListView that specifies a UeDelegate as its delegate, this would work. With the information you've given us, we can only assume that the ListView is not an ancestor of the MouseArea.
To elaborate on this concept:
The component instance scope hierarchy extends to out-of-line components, too. In the following example, the TitlePage.qml component creates two TitleText instances. Even though the TitleText type is in a separate file, it still has access to the title property when it is used from within the TitlePage. QML is a dynamically scoped language - depending on where it is used, the title property may resolve differently.
// TitlePage.qml
import QtQuick 2.0
Item {
property string title
TitleText {
size: 22
anchors.top: parent.top
}
TitleText {
size: 18
anchors.bottom: parent.bottom
}
}
// TitleText.qml
import QtQuick 2.0
Text {
property int size
text: "<b>" + title + "</b>"
font.pixelSize: size
}
I have the following custom QML Button:
import QtQuick.Controls 1.4
import QtQuick 2.5
import QtQuick.Layouts 1.2
import QtMultimedia 5.5
Rectangle {
id: ueButton
property string ueText: ""
property string ueIconPath: ""
width: 256
height: 128
signal ueSignalButtonClicked
gradient: Gradient {
GradientStop {
position: 0
color: "#ffffff"
SequentialAnimation on color {
id: ueButtonClickAnimation
loops: 1
running: false
ColorAnimation {
from: "#ffffff"
to: "#000000"
duration: 25
} // ColourAnimation
ColorAnimation {
from: "#000000"
to: "#ffffff"
duration: 25
} // ColorAnimation
} // SequentialAnimation
} // GradientStop
GradientStop {
position: 0.418
color: "#000000"
} // GradientStop
} // Gradient
border.color: "steelblue"
border.width: 1
radius: 4
antialiasing: true
smooth: true
ColumnLayout {
anchors.fill: parent
antialiasing: true
Image {
Layout.fillWidth: true
Layout.fillHeight: true
Layout.alignment: Qt.AlignHCenter|Qt.AlignTop
Layout.margins: 8
asynchronous: true
horizontalAlignment: Image.AlignHCenter
verticalAlignment: Image.AlignVCenter
fillMode: Image.PreserveAspectFit
smooth: true
source: ueIconPath
} // Image
Text {
text: ueText
Layout.fillWidth: true
Layout.fillHeight: true
Layout.alignment: Qt.AlignHCenter|Qt.AlignVCenter
Layout.topMargin: 8
Layout.leftMargin: 8
Layout.rightMargin: 8
Layout.bottomMargin: 16
color: "#ffffff"
font.bold: true
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
font.pointSize: 16
textFormat: Text.RichText
} // Text
} // ColumnLayout
MouseArea {
id: ueButtonMouseArea
antialiasing: true
anchors.fill: parent
onClicked: {
ueButtonClickAnimation.running=true
ueSignalButtonClicked()
}
} // MouseArea
} // ueButton
This works fine, but what I want to do now is to solve the following two specular issues:
If urtext is empty the corresponding text is ignored and whole ColumnLayout place is reserved for Image
If ueIconPath is empty, the corresponding image is ingnored and the whole ColumnLayout is reserved for Text
How can I achieve that?
As #BaCaRoZzo already suggested, using styles is preferable solution in this case since the item itself is still Button and so you can use all its properties and signals, including text property to pass your ueText text.
As for hiding elements inside, you can use visible property as suggested below:
UeButton.qml
Button {
id: ueButton
style: ButtonStyle {
background: Rectangle {
color: control.pressed ? "#CCC" : "#DEDEDE"
border.width: 1
border.color: "#999"
radius: 3
}
label: ColumnLayout {
id: layout
spacing: 10
Image {
Layout.alignment: Qt.AlignHCenter
source: control.iconSource
visible: control.iconSource !== ""
}
Text {
text: control.text
visible: control.text !== ""
}
}
}
}
Now using of this component is similar to regular Button:
UeButton {
anchors.centerIn: parent
text: "Some text"
iconSource: "data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7"
}
Commenting out text or iconSource will change the button view