I have a Widget as QML component in Qt Quick application which is to be used in various screens to display contents.
How can I use this particular QML component to adjust according to the items in it.
If it's a generic Item you can't: you have to manually set the container's size to fit its content.
The only QML components that fits their content are the Row, Column and Grid elements.
coming in way late, but if you want to have an update-able component you can set the model for the component to any list model like:
Component{
id:comp1
model:model1
}
ListModel {
id: model1
ListElement{
name:"a"
}
ListElement{
name: "b"
}
}
Component {
id: fruitDelegate
Row {
spacing: 10
Text { text: name }
}
}
ListView {
id:listView1
anchors.fill: parent
model: fruitModel
delegate: fruitDelegate
contentWidth: Screen.width
}
then you can update the listview at will
TextInput{
id: text_input1
width:parent.width * 0.80
text:"waddup?"
}
Button {
id: button2
anchors.left: text_input1.right
text: qsTr("Send")
onClicked: {
listView1.model.append( {name: text_input1.text, colorCode:"Red" });
/*text_input1.text = ""*/
}
}
Related
I have a row for a listview delegate with buttons on it. On click of a button, i need a dialog to open just below that button. I tried mapToItem property and partially succeeded but this listview is scrollable and on scrolling the dialog stays in its initial position. Unsure of how to get it working. Also, new to posting questions. Kindly ignore if I am being vague and help me out.
The dialog i want to open is placed outside of this delegate. I have provided a short outline of my code.
Listview{
delegate: Row{
Button1{
}
Button2{
id: button2Id
onCheckedChanged{
var coords = button2Id.mapToItem(null,0,0)
dialogId.x = coords.x
dialogId.y= coords.y
dialogId.visible = true
}
}
}
}
//dialog rect outside of my listview
Rectangle{
id: dialogId
}
You could add the dialog to the highlight item of the list. I have modified your example a little so that I could test it. I encapsulated your Rectangle in an Item because ListView controls the size and position of the root object of the highlight. The Rectangle then just has to be anchored to the bottom of that Item.
ListView {
id: lv
width: 200
height: parent.height
model: 50
spacing: 1
currentIndex: -1
delegate: Row {
spacing: 1
height: 40
Button {
text: index
}
Button {
id: button2Id
text: ">"
onClicked: {
lv.currentIndex = index;
}
}
}
highlight: Item { // ListView controls the size/pos of this Item
z: 1
Rectangle {
id: dialogId
anchors.top: parent.bottom // Anchor to bottom of parent
width: 200
height: 100
color: "red"
}
}
}
UPDATE:
Here is a way to keep the dialog directly under the button without calculating margins. I put it in a Loader so that each item in the list doesn't always carry the whole dialog around with it. It might make a performance difference.
The ugly part of this solution is the z-ordering. Each item in the list is drawn after the one that comes sequentially before it. (I'm not actually sure if that's even guaranteed.) That means the dialog gets drawn underneath any item that comes after it in the list. I was able to get around that by changing the z value of each item in the list to be less than the item before it.
ListView {
id: lv
width: 200
height: parent.height
model: 50
spacing: 1
currentIndex: -1
delegate: Row {
z: lv.count - index // <<- z-value fix
spacing: 1
height: 40
Button {
text: index
}
Button {
id: button2Id
text: ">"
onClicked: {
lv.currentIndex = index;
}
Loader {
anchors.top: parent.bottom
asynchronous: true
sourceComponent: (index === lv.currentIndex) ? dialogComp : null
}
}
}
}
Component {
id: dialogComp
Rectangle {
id: dialogId
width: 200
height: 100
color: "red"
}
}
i want to add a Component dynamically to an ColumnLayout in a TabView/Tab. But i've not found a possibility to do this. The problem is that i have no correct parent reference to my ColumnLayout for the createObject call.
Because the Tab dynamically loads a Component I've encapsulated the ColumnLayout in a Component.
In the QML Debugger i can solve the following path: objForm.tabView.tabStatus.tabStatusLoader.colLayout, but i cant use this as an correct parent.
It seems not be in the scope.
TypeError: Cannot read property 'tabStatus' of undefined
ObjForm.ui.qml
Item {
id: item1
width: 400
height: 400
property QtObject object
property Component compLayout
TabView {
id: tabView
anchors.fill: parent
Tab {
id: tabStatus
title: "status"
Loader {
id: tabStatusLoader
sourceComponent: compLayout
}
}
}
}
ObjForm.qml
ObjectViewForm {
id: objForm
anchors.fill: parent
object: someObj
compLayout: Component {
id: layoutComp
ColumnLayout {
id: colLayout
spacing: 2
}
}
onObjectChanged: {
// Here i want to add the someLabel Component to the ColumnLayout
someLabel.createObject(*PARENT*)
}
Component {
id: someLabel
Row {
property string text
property string label
spacing: 5
Label {
text: parent.label
}
Label {
text: parent.text
}
}
}
Does anyone know how to solve this or can make a better suggestion?
ok I've found a solution by myself. Instead to include the ColumnLayout into the Component, i've pulled it out and made an alias property to publish it. With this it was possible to add objects to my ColumnLayout. But the ColumnLayout got the wrong parent(objForm) instead of the Component.
A Component cant be a parent because a QQuickItem* is expected instead of a QObject* and additional can't include properties except for 'id'. Therefore a dummy Item was needed.
To reparent the ColumnLayout the Item needs a Component.onCompleted function where the parent will be set.
ObjectViewForm {
id: objForm
anchors.fill: parent
object: someObj
property alias componentLayout: colLayout
compLayout: Component {
id: layoutComp
Item {
id: dummy
Component.onCompleted: {
colLayout.parent = dummy
}
}
}
ColumnLayout {
id: colLayout
spacing: 2
}
The following code works and shows my items correctly, but I get the warning
qrc:/TableDelegate.qml:24: ReferenceError: name is not defined
I think it is because the ListView tries to access the model when it is empty and can not reference the item properties. I assume I am not doing to it correctly but I do not know how to do it better.
So my question is: how to get rid of the warning by doing it the right way?
TableDelegate.qml:
import QtQuick 2.0
import QtQuick.Layouts 1.1
Item {
property color bgcolor: 'transparent'
property alias box: rowBox
height: 40
width: parent.width
Rectangle {
id: rowBox
anchors.fill: parent
color: bgcolor
RowLayout {
anchors.fill: parent
Rectangle {
id: tableNameColumn
color: 'transparent'
Layout.fillHeight: true
Layout.fillWidth: true
Text {
anchors.centerIn: parent
color: textcolor
text: name // <--- here is `name`
}
}
// More Columns ...
}
}
MouseArea {
anchors.fill: parent
onClicked: {
view.currentIndex = index
}
}
}
And I use it like this
TableView.qml:
// ...
ListModel {
id: model
}
ListView {
id: view
model: model
anchors.fill: parent
highlight: delegate_highlighted
highlightFollowsCurrentItem: true
delegate: delegate
}
Component {
id: delegate
TableDelegate {
bgcolor: 'transparent';
}
}
Component {
id: delegate_highlighted
TableDelegate {
bgcolor: 'lightsteelblue'
box.border.color: 'black'
box.radius: 3
}
}
// ...
You use a TableDelegate for the highlight. That is wrong.
The ListView creates 1 instance of the highlight item, that will be drawn as a background for the currently selected item, It may also move between items as transition when the current item changes. It should only be a rectangle or whatever you want to use.
In your example, the highlight item is a full delegate, that wants to access model data, which it cannot.
I previously asked how to implement a Master Details View in Qt/QML here: How to implement a master-details view Qt/QML on an Android tablet?.
Having continued working on this, I came out with the following mockup QML layout:
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
import QtQuick.Controls 1.4
Item {
y: 50
Layout.fillHeight: true
width: appWindow.width
RowLayout {
id: mainLayout
anchors.fill: parent
ListModel {
id: navigation
ListElement {
item: "Item 1"
}
ListElement {
item: "Item 2"
}
ListElement {
item: "Item 3"
}
ListElement {
item: "Item 4"
}
ListElement {
item: "Item 5"
}
ListElement {
item: "Item 6"
}
ListElement {
item: "Item 7"
}
ListElement {
item: "Item 8"
}
ListElement {
item: "Item 9"
}
ListElement {
item: "Item 10"
}
ListElement {
item: "Item 11"
}
}
ScrollView{
Layout.fillHeight: true
verticalScrollBarPolicy: Qt.ScrollBarAlwaysOn
horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff
ListView {
id: listview
Layout.fillHeight: true
Layout.preferredWidth: 300
contentWidth: 300
model: navigation
delegate: Rectangle {
id: wrapper
width: 300
height: 50
Text {
id: itemInfo
text: item
color: "red"
}
}
}
}
Rectangle {
x: 300
y: 50
Layout.preferredWidth: appWindow.width - listview.width-4
height: appWindow.height - 50
color: "green"
border.width: 1
}
}
}
The master view is essentially a ListView with a number of items (each item represents a selectable element, which will trigger an update of the details view, which is currently represented by the green rectangle (see attached screenshot below)
At the moment I am still having a couple of issues with the following points:
How should I modify the Layout so that the ListView covers the entire screen height?
When I "scroll" through the ListView, I have noticed a lot of screen flickering? How can I minimize this?
How can I prevent the entire upper status bar (where device system information such as battery charge is shown) from being displayed?
Edit: Modified the code by adding the ListView in a ScrollView. In this case, the ScrollView's height is the same as the screen height, which is also what I wanted (minus a 50 offset at the top, see Figure below). I think that the ListView is behaving as expected and not occupying more space that its items.
What needs to be achieved now is to change the Background color of the SrollView so that it matches the ListView color. In that case it will appear as if the ListView is occupying the entire space.
In order to hide the status bar, the easiest thing to do is to specify a theme and apply it in the manifest file. Other solutions require modifying the activity and such.
In yourApp/android/res/values create a theme.xml with the following content:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="#android:style/Theme.DeviceDefault.Light.NoActionBar">
</style>
</resources>
Then in the manifest, on the same line where you added the screen orientation, add the theme:
android:theme="#style/AppTheme"
And in your main window use Window.FullScreen visibility instead of maximized.
For the layouting, it appears you could do with less. There is nothing wrong with Layout, just IMO it is more suited to standard scalable "micro" GUI elements like buttons and such rather than custom macro elements. Here is a condensed but functional example:
Row {
anchors.fill: parent
ListView {
id: lv
width: 200
height: parent.height
model: 30
delegate: Rectangle {
width: 200
height: 50
color: index == lv.currentIndex ? "lightgray" : "white"
Text {
text: "item " + index
color: "red"
anchors.centerIn: parent
}
MouseArea {
anchors.fill: parent
onClicked: lv.currentIndex = index
}
}
Rectangle {
anchors.right: parent.right
width: 5
height: parent.height * parent.visibleArea.heightRatio
color: "grey"
y: parent.height * parent.visibleArea.yPosition
}
}
Rectangle {
width: parent.width - lv.width
height: parent.height
color: "green"
Text {
anchors.centerIn: parent
text: "selected item n" + lv.currentIndex
color: "white"
font.pointSize: 15
}
}
}
The result:
Although it is not exactly clear the reason you offset things vertically, if you want to have the free space at the top, simply don't fill the entire parent with the root Rowelement but rather size it accordingly.
I am a bit clueless, how it comes, that you consider the ScrollView to be needed.
I removed it from your example, added clipping to the ListView and I was done.
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0
ApplicationWindow
{
id: appWindow
width: 1024
height: 800
visible: true
Item {
y: 50
Layout.fillHeight: true
width: appWindow.width
RowLayout {
id: mainLayout
anchors.fill: parent
ListModel {
id: navigation
ListElement { item: "Item 1" }
Component.onCompleted: {
for (var i = 2; i < 50; i++) append({ item: 'Item' + i })
}
}
ListView {
id: listview
Layout.fillHeight: true
Layout.preferredWidth: 300
contentWidth: 300
model: navigation
clip: true //<--- Add this, so there won't be no elements outside the ListView-area
delegate: Rectangle {
id: wrapper
width: 300
height: 50
Text {
id: itemInfo
text: item
color: "red"
}
}
}
Rectangle {
x: 300
y: 50
Layout.preferredWidth: appWindow.width - listview.width-4
height: appWindow.height - 50
color: "green"
border.width: 1
}
}
}
}
There are a few things you might misunderstand:
The ListView provides no background. If you want such, you need to draw something behind it, e.g. a Rectangle
The ListView does not provide ScrollBars by itself. You need to add them like this:
ScrollBar.vertical: ScrollBar { }
The ScrollBar has no native style. And the handle will disapear by default. You can find more than one question here, on how to style a ScrollBar.
If you don't clip the ListView you will see some elements protruding the ListView and suddenly disappear. If you have nothing that covers this anyway, you should set clip: true
For your ListView to take all the height, you can simply set it to fill the height of the layout. However make sure the Layout (and its parent in your case) have the right size too. Size defaults to (0,0) for Item in QML.
ListView {
id: listview
//...
Layout.fillHeight: true
//...
}
Regarding the "flickering", you can try increasing the ListView cacheBuffer property, which corresponds to the content height, in pixels, which is preloaded. However if this is really flickering, there's probably little you can do.
Flickering appears when display is refreshed with the wrong timings regarding screen refresh rate, and typically solved by using multiple buffers and/or synchronization. QtQuick hides all this complexity and uses OpenGL for rendering, but I didn't saw (yet) any flickering on Android with recent Qt versions.
You can remove the status bar by editing the Android manifest file as explained in this other post, or worse case, through JNI.
GridView {
id: gridv
model: ListModel {
id: modelone;
}
delegate: componentId
}
Rectangle {
id: whattheproblem
color: red
ListView {
id: listv
model: ListModel {
id: modeltwo;
}
delegate: anotherComponentId
}
}
I can do gridv.model.append(element), it adds elements to displayed GridView.
But, I can't do listv.model.append(element), it doesn't draw anything (the component code is valid, though), but at the same time, modeltwo.count shows that element is added to model. Rectangle was added to check the layout (it's managed by RowLayout currently), and it seems to be working; other layout things (think anchor, x/y/z) do not help.
QT 5.3, QtQuick 2..
From my point of view, I can only think now, that modelone associates all the ListModel logics to GridView it's created from, so ListModel can't work with ListView anymore. Sounds illogical, but already spent two hours on this.
is there a necessity to create custom Model's, when dealing with multiple views?
I think the problem is with the delegate, since i tried your example with some modifications and it worked.
Following is the code:
Item {
width: 200
height: 200
GridView {
id: gridv
width: 200
height: 100
model: ListModel {
id: modelone;
}
delegate: Text { text: name }
}
Rectangle {
id: whattheproblem
anchors.top: gridv.bottom
ListView {
id: listv
model: ListModel {
id: modeltwo;
}
delegate: Text { text: name }
}
}
Button {
anchors.left: parent.left
anchors.bottom: parent.bottom
text: "Add to Grid"
onClicked: gridv.model.append({name: "grid"})
}
Button {
anchors.right: parent.right
anchors.bottom: parent.bottom
text: "Add to List"
onClicked: listv.model.append({name: "list"})
}
}
I tried it with Qt 5.3.1