I want to create a custom dialog in qml without the ok button.
this is my code :
Dialog {
id: DialogId
title: appName
}
when the dialog is opened there is an Ok button.
I'm using QtQuick.Dialogs 1.2
The property standardButtons controls wich buttons are in your dialog.
The default value is StandardButton.Ok
If you don't whant any button you need to re-implement contentItem
For instance:
contentItem: Rectangle {
color: "lightskyblue"
implicitWidth: 400
implicitHeight: 100
Text {
text: "Hello blue sky!"
color: "navy"
anchors.centerIn: parent
}
}
Related
I have a custom QML Buton as shown bellow.
import QtQuick 2.15
import QtQuick.Controls 2.15
Button{
id: dashId
width: 155
height: 40
implicitWidth: 155
implicitHeight: 40
text: 'hello'
flat: true
property color colorNormal: '#353535'
property color colorHovered: '#04b9b9'
property color colorClicked: '#4d4f50'
background: Rectangle{
id: bgColor
radius: 10
color: internal.hoverColor
}
contentItem: Item {
id: buttonItem
visible: true
Text {
id: buttonText
text: dashId.text
anchors.centerIn: parent
color: 'white'
}
}
QtObject{
id: internal
property var hoverColor: if(dashId.down){
dashId.down ? colorClicked : colorNormal
}else{
dashId.hovered ? colorHovered : colorNormal
}
}
}
when hovered, its still have its default hover color on top of custom hover color instead of just custom color.
Am using Qt6 and QtQuick 1.14.1 on Windows 10.
I found the issue.
I had to set highlighted: true and flat: true inside my button.
I had a similar issue. On macOS and Linux, all buttons rendered as expected but on Windows, there was a transition to the wanted hover color and after that the button faded to white.
The issue was solved with:
flat:true
I have made a delegate for listview that contains Combobox. If I open the Combobox and scroll the listview, the Combobox popup is moving with the delegate position, that's ok. But when the delegate goes out of the listview area(Ref the sample image attached), Combobox popup continues to moves even out of the listview area.
How to close the Combobox when the corresponding delegate goes out of the listview area.
Thanks in advance...
Code goes here
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Column {
spacing: 0
anchors.fill: parent
Item {
width: parent.width
height: parent.height * 0.4
Image {
anchors.fill: parent
anchors.margins: 10
source: "https://lh4.googleusercontent.com/proxy/cITVCAj9KJ5Hfwd5iuNDhzdB2pSrMQv2rzTl-vvg23Ifhe2qdCisZBG-MzV35y_r2zijC9X4QOpda9eHzr_hA"
}
}
ListView {
width: parent.width
height: parent.height * 0.7
model: 10
spacing: 5
clip: true
delegate: Rectangle {
width: parent.width
height: 50
color: index % 2 == 0 ? "lightsteelblue" : "steelblue"
Row {
spacing: 25
anchors.centerIn: parent
Label {
text: qsTr("%1").arg(index)
anchors.verticalCenter: parent.verticalCenter
}
ComboBox {
anchors.verticalCenter: parent.verticalCenter
model: ["a", "b", "c"]
}
}
}
}
}
}
If there is no particular goal to keep ComboBox popup opened when scrolling, then add the following property to your ListView:
highlightRangeMode: ListView.StrictlyEnforceRange
This will close ComboBox popup when ListView is being scrolled.
P.S.
Also, resolves your issue with the ComboBox list getting out of view area.
UPDATE on issue with header element hiding below other list items:
Accordingly to the description ListView.StrictlyEnforceRange - the highlight never moves outside of the range. The current item changes if a keyboard or mouse action would cause the highlight to move outside of the range. when an item goes out of range the list changes next item and that makes ComboBox closing its popup, but since header item is below the other ListView items itself (see this paragraph https://doc.qt.io/qt-5/qml-qtquick-listview.html#stacking-order-in-listview , delegate is always above a header) it makes impossible displaying default header here at the top of the other items. I'd suggest you implement your own header beyond the list. Sorry, I might not have known Qt so good to find the other solution.
The following Qml code gives the following output (expected):
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Window 2.11
Window {
height: 200
width: 200
visible: true
Button {
id: root
text: "Text"
anchors.centerIn: parent
Item {
anchors.fill: parent
Text {
text: "Item.Text"
color: "red"
}
}
}
}
The following code (using contentItem) produces a different output:
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Window 2.11
Window {
height: 200
width: 200
visible: true
Button {
id: root
text: "Text"
anchors.centerIn: parent
contentItem: Item {
anchors.fill: parent
Text {
text: "Item.Text"
color: "red"
}
}
}
}
The Qt documentation is not very clear, at least for me. The question is what does the property contentItem do? When it should be used?
Short answer: The contentItem is meant for customizing the control and replaces the existing implementation of the visual foreground element by your text.
Long answer:
A Quick Item has a so called "default property" - the data property. By definition, if you add an item as child of another item, it is instead assigned to the default property. Which means the following example:
Item {
Text { text: "test1"}
}
Is actually identical to:
Item {
data: [
Text { text: "test2"}
]
}
If you know look at your example, in the first variant, you simply append a child item to the root button. Since no further information is given, it is placed at the coordinates (0,0) within it's parent.
The contentItem property however is defined in the documentation as follows:
This property holds the visual content item.
In case of a Button it is an internally used Label to display the text property of the button. It exists to modify the appereance of the button.
In your second example, you "customize" the button by replacing the internal label with your custom Text - but without any code to properly position or fill the item. The correct way to declare a content item can be found in the customization guide:
Button {
id: control
text: qsTr("Button")
contentItem: Text {
text: control.text
font: control.font
opacity: enabled ? 1.0 : 0.3
color: control.down ? "#17a81a" : "#21be2b"
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
// ...
}
You could either define it as part of a custom style, or create a MyButton.qml where do exactly this and can then use MyButton in other QML files, giving you a custom styled button whilest keeping the API intact (like beeing able to set the text via the text property etc.)
I hope this was sufficient enough to help you understand how it works.
I'm using a TextArea to display multi-line text with embedded <IMG ...> tags in the delegate for a ListView. I have it set to read-only (and not disabled) because I need hyperlinks in the text to be clickable so I need to make use of its onLinkActivated event handler. This is normally something that would call for a Label (which does not handle mouse wheel events), but a Label does not render line-breaks correctly when the text includes <IMG ...> tags in the HTML.
The problem I'm having is that a TextArea handles mouse wheel events even when it is read-only, so if the cursor happens to be over one of the visible TextArea controls, the ListView will not respond to mouse wheel events (and so it does not scroll). In other words, the TextArea is capturing the mouse wheel events and I want it to not do this.
I see in the docs that controls have a wheelEnabled: property, but TextArea does not seem to support this.
Update: here is a minimum code sample that demonstrates the problem:
import QtQuick.Controls 1.4 as Controls
Rectangle {
id: test
color: "white"
width: 300
anchors {
left: parent.left
top: parent.top
bottom: parent.bottom
}
Controls.ScrollView {
id: _scrollview
anchors.fill: parent
ListView {
anchors.fill: parent
model: 100
delegate: Rectangle {
id: tableRow
width: test.width
height: 50
color: "yellow"
TextArea {
width: test.width / 2
height: tableRow.height
readOnly: true
text: "Row # " + index
}
}
}
}
}
If you hold the mouse cursor over the right side of this listview (i.e. not over the TextArea control in the row), the mouse wheel works as expected. But if you hold the mouse cursor over the TextArea in any of the rows, the ListView will not scroll with the mouse wheel (because the readOnly TextView is capturing the events).
This is actually pretty easy, too bad I wasted the bounty. All this requires is a MouseArea positioned over the TextArea like so:
MouseArea {
anchors.fill: txtTester
onPressed: {
mouse.accepted = false
}
onReleased: {
mouse.accepted = false
}
property int scrollValue: 15
onWheel: {
if (wheel.angleDelta.y < 0) {
//make sure not to scroll too far
if (!_scrollview.flickableItem.atYEnd)
_scrollview.flickableItem.contentY += scrollValue
}
else {
//make sure not to scroll too far
if (!_scrollview.flickableItem.atYBeginning)
_scrollview.flickableItem.contentY -= scrollValue
}
}
}
This ignores press and release events so clicking on hyperlinks in the TextArea still works, but it intercepts mouse wheel events and applies them to moving the ScrollView as if the TextArea were not there.
Try this out:
import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Controls 1.3
Window {
visible: true
width: 400
height: 200
TextArea {
id: text
anchors.fill: parent
text: "Current\ntext\n\\to\nmove\ndown\ndown\ndown
\ndown\ndown\ndown\ndown\ndown\ndown\ndown"
flickableItem.interactive: false
}
}
TextArea has flickableItem.enabled property. Since you're stuck with !t 5.6 this should work for you.
EDIT: changed to flickableItem.interactive instead.
In my QML Text element I want to have a hyperlink to a website and managed to do so with it looking like one etc. but when I click or touch it nothing happens, the link is supposed to open in a the default browser.
Text {
id: link_Text
text: '<html><style type="text/css"></style>google</html>'
}
Any idea what I'm doing wrong?
Ok I just found that I have to add this:
onLinkActivated: Qt.openUrlExternally(link)
I did not originally consider something like this because I thought if the string was correctly formatted it would open the link on its own.
If you also want to change the cursor on Hover, you can do this combination:
Text {
id: link_Text
text: '<html><style type="text/css"></style>google</html>'
onLinkActivated: Qt.openUrlExternally(link)
MouseArea {
id: mouseArea
anchors.fill: parent
acceptedButtons: Qt.NoButton // Don't eat the mouse clicks
cursorShape: Qt.PointingHandCursor
}
}
I was faced with a task of imitating a hyperlink: When a user hovers on it, the text should look like a hyperlink. But when a user clicks on the link, a customer handler should be called instead of opening URL. Maybe this will be useful for someone.
Text{
id: hyperlinkButtonText
text: "Hyperlink button"
color: application.primaryColor
font.pixelSize: 12
font.bold:true
MouseArea{
id: mouseHyperlinkArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: {
// to do something on clicking the link
}
}
}
Rectangle{ /*Here is an underline item for the text above*/
visible: mouseHyperlinkArea.containsMouse
anchors.top:hyperlinkButtonText.bottom
anchors.topMargin: -1
width:hyperlinkButtonText.width
height: 0.5
color: application.primaryColor
}