How to set Layout.alignment multiple times? - qt

How in Rowlayout or ColumnLayout center an element and keep them in order so no matter how scaled the first object the second will always be after it.
ColumnLayout {
id: currentMusicRow
anchors.horizontalCenterOffset: wrapper.width / -4.5
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: parent.top
anchors.topMargin: 20
Rectangle {
id: currentPicBackground
x: 273
y: 20
width: 260
height: 260
color: "#151515"
Layout.alignment: parent.AlignHCenter
Image {
id: currentMusicPic
x: 2
y: 2
anchors.fill: parent
anchors.margins: 2
source: "images/maxresdefault.jpg"
fillMode: Image.Stretch
}
}
RowLayout {
id: titleMusicLayout
width: 222
height: 29
Layout.horizontalCenter: parent.AlignCenter
Layout.bottomMargin: -50
Layout.bottom: currentPicBackground.AlignBottom
Text {
id: band
width: 155
height: 28
color: "#f2f2f2"
text: qsTr("Glad Boris")
font.italic: false
font.weight: Font.Medium
style: Text.Normal
font.underline: false
font.family: "Acme"
font.bold: false
font.pixelSize: 22
MouseArea {
id: bandMouseArea
width: 123
height: 28
anchors.centerIn: parent
hoverEnabled: true
}
}
Text {
id: diveder
width: 13
height: 28
color: "#f2f2f2"
text: "/"
font.bold: false
font.pixelSize: 22
font.family: "Tahoma"
}
Text {
id: musicName
width: 103
height: 28
color: "#f2f2f2"
text: "relaxation"
font.weight: Font.Light
font.bold: false
font.pixelSize: 20
font.family: "Acme"
MouseArea {
id: musicNameMouseArea
width: 103
height: 28
anchors.centerIn: parent
hoverEnabled: true
}
}
It shows an error because I set alignment multiple times but I need somehow to keep my texts(inside RowLayout) lower than my rectangle/image(inside ColumnLayout) EVEN IF THE IMAGE IS SCALED UP MORE (The texts have to be fixed to the bottom of it).

Related

Scroll a text by mouse Click and hold like a touch screen

I need to scroll by mouse click ,the code bellow works very well when scroll bars clicked or on wheel,BUT I need by mouse click and hold in anywhere in text.
ScrollView {
id: scrollView
x: 15
y: 38
width: 647
height: 168
visible: true
spacing: 2
focusPolicy: Qt.ClickFocus
clip: true
Text {
id: text1
x: -17
y: -27
opacity: 1
visible: true
color: "#ffffff"
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
anchors.bottom: parent.bottom
font.pixelSize: 16
verticalAlignment: Text.AlignVCenter
wrapMode: Text.WrapAnywhere
font.preferShaping: false
font.kerning: false
font.styleName: "Bold"
style: Text.Normal
font.weight: Font.Medium
font.bold: true
clip: true
anchors.topMargin: 0
anchors.bottomMargin: -8
anchors.leftMargin: 0
anchors.rightMargin: 0
font.family: "Courier New"
}
}
You can use a Flickable instead of ScrollView.
A really basic sample would be like this.
Flickable {
width: 200; height: 100
contentWidth: text.width; contentHeight: text.height
// These create default scroll bars for both orientations.
// You could modify the scroll bars if you want.
ScrollBar.vertical: ScrollBar{}
ScrollBar.horizontal: ScrollBar{}
Text{ id: text; width: 200; height: 300; text: "Some long text here" }
}

QML RowLayout Alignment looks wrong

I am using QT Designer to create a dynamic view for a certain component in my application. However, the 'apple' and 'Food:' text items within the RowLayout aren't aligned properly. I am trying to make it so that the baseline of those texts are aligned. I'm not sure how I can do that.
Note: I could set a custom margin just for the apple, but I would like to avoid that as I want my layout to be as dynamic as possible for different screen sizes/resolutions
import QtQuick 2.0
import QtQuick.Controls.Material 2.12
import QtQuick.Layouts 1.12
Item {
id: item1
width: 500
height: 300
x: 177
y: 258
Rectangle {
id: container
anchors.centerIn: parent
anchors.fill: parent
color: "black"
anchors.left: parent.left
anchors.right: parent.right
ColumnLayout{
anchors.left: parent.left
anchors.top: parent.top
anchors.leftMargin: 16
anchors.topMargin: 16
spacing: 0
Text {
id: category
x: 194
y: 227
width: 92
color: "#FFFFFF"
text: qsTr("Category")
font.pixelSize: 18
font.family: "Roboto Medium"
}
RowLayout{
spacing: 2
Text {
id: categoryTitle
width: 365
height: 10
color: "#FFFFFF"
text: qsTr("Food: ")
font.pixelSize: 60
verticalAlignment: Text.AlignBottom
Layout.alignment: Qt.AlignLeft | Qt.AlignBottom
font.family: "Roboto"
}
Text {
id: categoryItem
height: 62
width: 365
color: "#FFFFFF"
text: qsTr("apples")
font.pixelSize: 30
verticalAlignment: Text.AlignBottom
Layout.alignment: Qt.AlignLeft | Qt.AlignBottom
font.family: "Roboto"
}
}
}
}
}
What it looks like right now:
Instead of:
Layout.alignment: Qt.AlignLeft | Qt.AlignBottom
use
Layout.alignment: Qt.AlignLeft | Qt.AlignBaseline

ListView cannot load delegate from another qml file

i want to use ListViewDelegate.qml as a delegate for my list view items on my Kos.qml. but it giving me this error. i also try using loader but it seems didn't work, i try to remove the curly braces and it load the Kos.qml page but it didn't render the list view
file:/ngomahyukv2/Kos.qml:55: ListViewDelegate is not a type
File name case mismatch
#Kos.qml
i use another file PageBackground.qml as a background
import QtQuick 2.4
import QtQuick.Controls 2.3
PageBackground {
id: kos
width: 640
height: 480
Text {
id: element
x: 6
y: 20
width: 24
height: 32
color: "#ffffff"
text: qsTr("<")
font.strikeout: false
styleColor: "#ffffff"
font.underline: false
font.italic: false
font.bold: true
font.pixelSize: 25
MouseArea {
id: mouseArea
anchors.rightMargin: 0
anchors.bottomMargin: 0
anchors.leftMargin: 0
anchors.topMargin: 0
anchors.fill: parent
onClicked: kosloader.source = ""
}
}
ListView {
id: listView
x: 0
y: 69
width: 640
height: 410
model: ListModel{
// need to be in for loop and data from database
ListElement{
imagePath : "static/Bisnis-kos-kosan.png"
kosName : "Kos Name"
kosAlamat : "Jalan Lorem"
kosJumlahKamar: "5"
kosGender : "Laki-laki"
kosHarga: "7000000"
kosProfile: "KosSpec.qml"
ownerContact: "instgram.com"
}
}
delegate: ListViewDelegate { }
}
Loader{
id: kosspec
visible: false
source: ""
}
}
#ListViewDelegate.qml
import QtQuick 2.0
import QtQuick.Controls 2.13
Item {
id: listviewdelegate
Image {
id: idthumbnail
x: 8
y: 8
width: 227
height: 158
source: imagePath
fillMode: Image.PreserveAspectCrop
}
Text {
id: idnamakos
x: 252
y: 8
text: kosName
font.bold: true
font.family: "Verdana"
wrapMode: Text.WordWrap
font.pixelSize: 22
}
Text {
id: idalamat
x: 251
y: 40
width: 301
height: 17
text: qsTr("Alamat : " + kosAlamat)
wrapMode: Text.WordWrap
font.pixelSize: 12
font.family: "Verdana"
}
Text {
id: idjumlahkamar
x: 252
y: 63
width: 240
height: 14
text: qsTr("Jumlah Kamar : " + kosJumlahKamar)
wrapMode: Text.WordWrap
font.pixelSize: 12
font.family: "Verdana"
}
Text {
id: idgender
x: 251
y: 83
width: 265
height: 14
text: qsTr("Gender : " + kosGender)
wrapMode: Text.WordWrap
font.pixelSize: 12
font.family: "Verdana"
}
Text {
id: idharga
x: 251
y: 103
width: 373
height: 14
text: qsTr("Harga : " + kosHarga)
wrapMode: Text.WordWrap
font.pixelSize: 12
elide: Text.ElideNone
font.family: "Verdana"
}
Button {
id: buttonCek
x: 510
y: 131
width: 96
height: 35
visible: true
font.family: "Verdana"
font.pixelSize: 16
background: Rectangle{
color: "#ef3644"
anchors.fill: parent
}
contentItem: Text {
id: cek
text: "CEK"
anchors.fill: parent
verticalAlignment: Text.AlignVCenter
font.bold: true
font.pointSize: 10
horizontalAlignment: Text.AlignHCenter
color: "#ffffff"
}
MouseArea {
id: mouseAreaCek
anchors.fill: parent
onClicked: {
kosspec.visible = true
kosspec.source = kosProfile
}
}
}
Button {
id: buttonHubungi
x: 400
y: 131
width: 96
height: 35
font.family: "Verdana"
visible: true
contentItem: Text {
id: name1
color: "#ef3644"
text: "HUBUNGI"
anchors.fill: parent
font.bold: true
font.pointSize: 10
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
}
background: Rectangle {
color: "#00f1f0f0"
border.width: 4
border.color: "#ef3644"
anchors.fill: parent
}
font.pixelSize: 16
MouseArea {
id: mouseAreaHubungi
anchors.fill: parent
onClicked: {
Qt.openUrlExternally (ownerContact);
}
}
}
ToolSeparator {
id: toolSeparator
x: 5
y: 172
width: 600
height: 15
orientation: Qt.Horizontal
}
}
As the error message says, it seems to have to do with the casing of your file. Custom types need to begin with a capital letter, but also check that you have got the V and D in the correct case.
Also, is the file in the same directory? Do you have files named the same but with different casing in parallel? Directories?
I'm pretty confident that the issue is in the file name, or the name of a file that interferes with the file name. However, if you want to create a type module and refer to the file that way, you can also poke at using qmldir files: https://doc.qt.io/qt-5/qtqml-modules-qmldir.html .
But try to find something odd in your files first.

Animation on QML not showing?

I have 3 pages :
Main.qml : contains topbar.qml and menubar.qml as static and Audio.qml which is loaded dynamiacally.
In would like to animate menubar ( options buttons) but nothing is showing.
Here is the 4 files. It seems that the Z order is not working.
**Topbar.qml**
import QtQuick 2.0
Item {
id:root
width: 736
height: 55
z:100
FontLoader {
id: regular
source: "fonts/DINPro-Regular.otf"
}
Rectangle {
id: rectangle1
anchors.fill: parent
color: "black"
Text {
id: text1
color: "#ffffff"
text: qsTr("18:00")
anchors.top: parent.top
anchors.topMargin: 16
anchors.bottom: parent.bottom
anchors.bottomMargin: 8
anchors.left: parent.left
anchors.leftMargin: 332
anchors.right: parent.right
anchors.rightMargin: 332
font.pixelSize: 24
font.family: regular.name
}
}
}
Main.QML
import QtQuick 2.0
import QtQuick.Window 2.2
import Controllers 1.0
import "Logic.js" as Controller_Js
Window {
visible: true
id: root
width: 800
height: 480
maximumHeight: height
maximumWidth: width
minimumHeight: height
minimumWidth: width
color: "#000000"
Component.onCompleted: {
Controller_Js.setCurrentPage(Controller.homeView)
loader.source = "Home.qml"
console.log("module controllers", Controller.homeView)
}
FontLoader {
id: regular
source: "fonts/DINPro-Regular.otf"
}
FontLoader {
id: medium
source: "fonts/DINPro-Medium.otf"
}
FontLoader {
id: bold
source: "fonts/DINPro-Bold.otf"
}
TopBar {
id: topbar
x:58
y:0
width: 742
height: 55
}
MenuBar {
id: menuBar1
width: 58
height: 480
}
Item{
id: page
x: 64
y:54
width: 736
height: 426
Loader{
id: loader
x: 0
y: 0
width: 736
height: 428
asynchronous: true
}
MenuBar.qml : short example where i call my animation
Item {
id: optionsBut
x: 8
y: 164
width: 48
height: 52
Image {
id: image2
x: 3
y: 0
width: 37
source: "assets/RT-actionbar-sub-menu.png"
}
MouseArea {
id: mousesubmenu
x: -2
y: -15
width: 53
height: 67
onClicked: {
Controller.statesubmenu="ShowSubmenu"
console.log("state submenu",Controller.statesubmenu )
}
}
}
my animation component : Submenu which have 2 states ; show and hide. In debugger it tell me state : "show" but nothing appears in my screen.
Rectangle {
id: root
x: -382
y: 0
width: 318
height: 425
color: "#282827"
border.width: 0
visible: true
z: 2000
state: Controller.statesubmenu
MouseArea {
anchors.fill: paren
onClicked: mouse.accepted = false
}
Rectangle {
id: item1
width: 317
height: 70
color: "#00000000"
Text {
x: 94
y: 18
width: 100
height: 35
color: "#ffffff"
text: qsTr("Sources")
font.pixelSize: 27
font.family: regular.name
}
Rectangle {
width: 317
height: 1
y:70
color: "#40D8D8D8"
}
}
Rectangle {
id: item2
y: 70
width: 317
height: 70
color: "#00000000"
Text {
x: 94
y: 18
width: 122
height: 35
color: "#ffffff"
text: qsTr("Settings")
font.pixelSize: 27
font.family: regular.name
}
Rectangle {
width: 317
height: 1
y:70
color: "#40D8D8D8"
}
}
Rectangle {
id: item3
x: 0
y: 141
width: 317
height: 70
color: "#00000000"
Text {
x: 94
y: 18
color: "#ffffff"
text: qsTr("Audio Effects")
font.pixelSize: 27
font.family: regular.name
}
Rectangle {
width: 317
height: 1
y:70
color: "#40D8D8D8"
}
}
Rectangle {
id: item4
x: 0
y: 212
width: 317
height: 70
color: "#00000000"
Text {
x: 94
y: 18
color: "#ffffff"
text: qsTr("My stations")
font.pixelSize: 27
font.family: regular.name
}
Rectangle {
width: 317
height: 1
y:70
color: "#40D8D8D8"
}
}
states: [
State {
name: "ShowSubmenu"
PropertyChanges {
target: root
x: 0
}
},
State {
name: "HideSubmenu"
PropertyChanges {
target: root
x : -382
z: 100
visible: true
}
}
]
transitions: [
Transition {
NumberAnimation {
property: "x"
easing.type: Easing.InOutQuad
}
}
]
}
I found the mistake: I did not call the submenu in the loaded page that's why nothing was showing.
now it works nice. I just add :
SubMenuAudio{
id:mysub
}
Thanks

QML ListView won't respond on mouse click

Hi all I have tried several things but I can't make my ListView to response to mouse click.
Here is my code of ListView:
ListView {
id: listview1
x: 0
y: 82
// width: 574
// height: 967
width: window.width
height: window.height
visible: true
keyNavigationWraps: false
boundsBehavior: Flickable.DragAndOvershootBounds
opacity: 1
maximumFlickVelocity: 2500
anchors.leftMargin: 0
highlightMoveSpeed: 489
contentWidth: 0
preferredHighlightEnd: 2
spacing: 5
highlightRangeMode: ListView.NoHighlightRange
snapMode: ListView.SnapToItem
anchors.bottomMargin: 0
anchors.rightMargin: 0
anchors.topMargin: 82
anchors.fill: parent
model: myModel
delegate:Component {
//id: contactDelegate
Item {
property variant myData: model
width: 574; height: 90
Column {
x: 12
y: 0
width: 562
height: 90
anchors.rightMargin: 0
anchors.bottomMargin: 0
anchors.leftMargin: 12
anchors.topMargin: 0
anchors.fill: parent
spacing: 2
Text { text: '<b>ID: </b> ' + id_korisnika ; verticalAlignment: Text.AlignTop; wrapMode: Text.NoWrap; horizontalAlignment: Text.AlignHCenter; color:"steelblue"; font.family: "Helvetica"; font.pointSize: 10 }
Text { text: '<b>Ime: </b> ' + ime_korisnika ; horizontalAlignment: Text.AlignHCenter; color:"steelblue"; font.family: "Helvetica"; font.pointSize: 10 }
Text { text: '<b>Prezime: </b> ' + prezime_korisnika; horizontalAlignment: Text.AlignHCenter; color:"steelblue"; font.family: "Helvetica"; font.pointSize: 10 }
Text { height: 16; text: '<b>Broj telefona: </b> ' + broj_korisnika ; verticalAlignment: Text.AlignVCenter; horizontalAlignment: Text.AlignHCenter; color:"steelblue"; font.family: "Helvetica"; font.pointSize: 10 }
Text { text: '<b>Adresa: </b> ' + adresa_korisnika ; horizontalAlignment: Text.AlignHCenter; color:"steelblue"; font.family: "Helvetica"; font.pointSize: 10 }
MouseArea {
id: mouse_area1
z: 1
hoverEnabled: false
anchors.fill: parent
}
}
}
}
//delegate: contactDelegate
highlight: Rectangle {color:"black"; radius: 5; opacity: 0.7
}
focus: true
}
I have tried to put my code in all areeas but I can't make it work. any suggestion is nice.
See KeyInterction sample from QtCreator. There is your answer :)
You can see sample delegate as follow:
ListViewDelegate:
Item {
id: container
width: ListView.view.width; height: 60; anchors.leftMargin: 10; anchors.rightMargin: 10
Rectangle {
id: content
anchors.centerIn: parent; width: container.width - 40; height: container.height - 10
color: "transparent"
antialiasing: true
radius: 10
Rectangle { anchors.fill: parent; anchors.margins: 3; color: "#91AA9D"; antialiasing: true; radius: 8 }
}
Text {
id: label
anchors.centerIn: content
text: "List element " + (index + 1)
color: "#193441"
font.pixelSize: 14
}
MouseArea {
id: mouseArea
anchors.fill: parent
hoverEnabled: true
onClicked: {
container.ListView.view.currentIndex = index
container.forceActiveFocus()
}
}
}
The key is MouseArea section.
Good luck - S.M.Mousavi
i dont see onClicked handler code in your MouseArea (mouse_area1). How are you trying to capture/respond the mouse click.
Try following code and see what happens.
MouseArea {
id: mouse_area1
z: 1
hoverEnabled: false
anchors.fill: parent
onClicked:{
console.log("test");
}
}

Resources