I create a Rectangle to wrap the horizontal listview, but it displays over its boundary. The problem like below image:
In this image, the listview display the item infront and below of current display item. How can display only the current item at that time and When user swipe the listview, the item change by one item?
My source code here:
ApplicationWindow {
visible: true
width: 900
height: 480
title: qsTr("Hello World")
Rectangle{
id: bound
anchors.fill: parent
color: "blue"
}
Rectangle{
id: listview
width: 300
height: 300
anchors.centerIn: parent
color: "red"
ListView{
id:lst
width: 250
height: 250
orientation: ListView.Horizontal
snapMode: ListView.SnapOneItem
//preferredHighlightBegin: 0
//preferredHighlightEnd: 200
highlightRangeMode: ListView.StrictlyEnforceRange
boundsBehavior: Flickable.StopAtBounds
highlightFollowsCurrentItem: true
keyNavigationWraps: true
interactive: true
model: 10
delegate: Rectangle{
id: dele
width: 250
height: 250
anchors.centerIn: listview
color: Qt.rgba(Math.random(),Math.random(),Math.random(),1)
}
}
}
}
ListView does not clip by default. You can set clip: true in cases when it is needed. More details: http://doc.qt.io/qt-5/qtquick-performance.html#clipping
Related
I need to create a long form using QML. The form will not fit inside the window, so I need for it to be scrollable. However I can't get the scroll view to work. Here is a minimum working example of my problem:
import QtQuick.Window 2.2
import QtQuick 2.9
import QtQuick.Controls 2.3
Window {
visible: true
width: 1280
height: 720
title: qsTr("Hello World")
Rectangle{
anchors.centerIn: parent
width: parent.width*0.8;
height: parent.height*0.7;
ScrollView {
anchors.fill: parent
clip: true
contentHeight: parent.height
Rectangle{
id: rect1
width: parent.width
height: 200
color: "#ffff00"
anchors.horizontalCenter: parent.horizontalCenter
}
Rectangle{
id: rect2
width: parent.width
height: 500
color: "#ff00ff"
anchors.top: rect1.bottom
anchors.horizontalCenter: parent.horizontalCenter
}
Rectangle{
id: rect3
width: parent.width
height: 500
color: "#00ffff"
anchors.top: rect2.bottom
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
}
As I understand it, this should allow me to scroll in order to see the 3 rectangles. However I only the see the first one and the upper half of the second one and I can't scroll.
Any help would be greatly appriciated
Because your ScrollView contains multiple items you need to take care of sizing yourself and set contentHeight explicitly to the combined height of all the items.
For testing, you can set vertical scrollbar always on to see how content height affects the scrollbar.
I commented out horizontal center anchoring because it is not needed (width of your rectangles is scrollview width).
ScrollView {
anchors.fill: parent
clip: true
ScrollBar.vertical.policy: ScrollBar.AlwaysOn
contentHeight: rect1.height+rect2.height+rect3.height
Rectangle{
id: rect1
width: parent.width
height: 200
color: "#ffff00"
//anchors.horizontalCenter: parent.horizontalCenter
}
Rectangle{
id: rect2
width: parent.width
height: 500
color: "#ff00ff"
anchors.top: rect1.bottom
//anchors.horizontalCenter: parent.horizontalCenter
}
Rectangle{
id: rect3
width: parent.width
height: 500
color: "#00ffff"
anchors.top: rect2.bottom
//anchors.horizontalCenter: parent.horizontalCenter
}
}
If you wrap your rectangles with an item and set item implicitHeight to its height ScrollView detects the contentHeight correctly.
ScrollView {
anchors.fill: parent
clip: true
ScrollBar.vertical.policy: ScrollBar.AlwaysOn
Item {
width: parent.width
height: rect1.height+rect2.height+rect3.height
implicitHeight: height
Rectangle{
id: rect1
width: parent.width
height: 200
color: "#ffff00"
}
Rectangle{
id: rect2
width: parent.width
height: 500
color: "#ff00ff"
anchors.top: rect1.bottom
}
Rectangle{
id: rect3
width: parent.width
height: 500
color: "#00ffff"
anchors.top: rect2.bottom
}
}
}
The default implicit size for most items is 0x0, that's why you have to set implicit height for the item explicitly. However some items have an inherent implicit size, e.g. Image and Text. This means that if you place e.g. TextArea into your ScrollView it will automatically become scrollable if text is long enough.
ScrollView {
anchors.fill: parent
clip: true
TextArea {
readOnly: true
text: online ? provider.loadedText : "Offline"
wrapMode: Text.WordWrap
}
}
Set the height and width of the scrollview to be the total of childs height added together!
I'm having an issue with ListView. ListView is too long and part of it appears outside of the window but I can't attach a scrollbar. I tried many different combination. I think that problem lies in height parameter but if remove it ListView displays only first entry.
Column{
anchors.fill: parent
Row{
id: buttonsRow
Button{
text: "Open dump file"
onClicked: fileDialog.visible = true
}
Button{
text: "Copy raw data to clipboard"
}
}
ListView{
id: listView
anchors.top: buttonsRow.bottom
height: contentHeight
//clip: true
flickableDirection: Flickable.VerticalFlick
boundsBehavior: Flickable.StopAtBounds
interactive: true
model: ListModel{
id: listModel
}
delegate: MDelegate{}
}
}
Is there any way to make it scrollable?
I don't see, in the code you posted, where you've attached a scrollbar at all. You need to actually include a ScrollBar component in your ListView, like this:
ListView {
id: listView
ScrollBar.vertical: ScrollBar {
active: true
}
}
See "Attaching ScrollBar to a Flickable" at https://doc.qt.io/qt-5/qml-qtquick-controls2-scrollbar.html
Setting height to contentHeight is probably the issue. That would make the ListView as high as all of its item's heights combined. The scrollbar only works when the height of the view is less than the height of its contents.
Here's an approach that uses layouts instead:
import QtQuick 2.8
import QtQuick.Controls 2.1
import QtQuick.Layouts 1.3
ApplicationWindow {
width: 400
height: 300
visible: true
ColumnLayout {
anchors.fill: parent
RowLayout {
id: buttonsRow
Button {
text: "Open dump file"
}
Button {
text: "Copy raw data to clipboard"
}
}
ListView {
id: listView
flickableDirection: Flickable.VerticalFlick
boundsBehavior: Flickable.StopAtBounds
model: 100
clip: true
delegate: ItemDelegate {
text: modelData
}
Layout.fillWidth: true
Layout.fillHeight: true
ScrollBar.vertical: ScrollBar {}
}
}
}
ScrollBar.vertical:ScrollBar{
id: listView
anchors.right: parent.right
visible: listView.contentHeight > listView.height ? true : false
}
how can I center elements in ColumnLayout?
Here is my qml code:
ApplicationWindow {
id: root
visible: true
width: 640
height: 640
title: qsTr("Your Booking")
GridLayout{
anchors.fill: parent
columns: 2
flow: GridLayout.TopToBottom
Rectangle{
id: appBar
Layout.columnSpan: 2
width: root.width
height: root.height/10
color: "red"
}
ColumnLayout{
spacing:5
id: columnData
height: root.height - appBar.height
width: root.width/2
ComboBox{
anchors.horizontalCenter: parent.horizontalCenter
}
ComboBox{
}
ComboBox{
}
ComboBox{
}
ComboBox{
}
}
ColumnLayout{
}
}
}
I want to center ComboBoxes in ColumnLayout.
You should avoid using anchors and layouts at the same time. Mixing them at the same level would lead to the malfunction of the layouts or some unexpected results (however, using anchors inside the items in layouts is ok).
To align items in layouts, you can use the attached properties: Layout.alignment, e.g.:
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
This statement would make your item stay exactly in the center of your layout.
I have an issue with my QML. I'd like to edit a TextInput based on an action, setting the focus attribute to true. It works when the TextInput is located in a Rectangle, but not in a ScrollView.
Here is an example:
Item {
id: main
width: 640
height: 480
ScrollView{
id: scrollView
height: parent.height/2
width: parent.width
Rectangle{
border.color: "black"
border.width: 1
anchors.centerIn: parent
height: 25
width: 200
TextInput{
id: ti1
anchors.fill: parent
verticalAlignment: TextInput.AlignVCenter
horizontalAlignment: TextInput.AlignHCenter
}
}
}
Rectangle{
y: height
height: parent.height/2
width: parent.width
Rectangle{
border.color: "black"
border.width: 1
anchors.centerIn: parent
height: 25
width: 200
TextInput{
id: ti2
anchors.fill: parent
verticalAlignment: TextInput.AlignVCenter
horizontalAlignment: TextInput.AlignHCenter
}
}
}
MouseArea{
anchors.fill: parent
onClicked: {
if (mouseY < parent.height/2){
ti2.focus = false
ti1.focus = true
}else{
ti1.focus = false
ti2.focus = true
}
}
}
}
When I click on the bottom half of the window, the TextInput ti2 is editable. But when I click on the top half, ti1 is not.
Does anybody have any idea? The behaviour is the same with TextEdit.
Thanks.
I think it is because:
"Only one Item can be a direct child of the ScrollView and the child is implicitly anchored to fill the scroll view.".
From: http://doc.qt.io/qt-5/qml-qtquick-controls-scrollview.html
Perhaps the tree of components is unavailable in a ScrollView.
But if you use:
ti1.forceActiveFocus();
instead of:
ti1.focus = true
it works.
My problem is when i scroll ListView elements , the elements scroll over the rectangle border however i have wrapped the ListView inside the Rectangle.How can i make elements scroll without effecting the Rectangle borders.
Here are the result links
https://drive.google.com/file/d/0Bx616yTb6y_xQzNxRy1UcktrVzA/view?usp=sharing
https://drive.google.com/file/d/0Bx616yTb6y_xdl9CbWt4MTJ3Smc/view?usp=sharing
Following is the code
ListModel{
id: mod
}
Rectangle{
id:listviewrec
x: 347
y:644
width: 700
height: 91
radius: 4
border.color:"#7CC7FF"
border.width: 4
visible: true
ListView{
id:modlistview
width: listviewrec.width
height: listviewrec.height
clip: true
boundsBehavior: Flickable.DragOverBounds
spacing:25
model:mod
delegate: delegateimage
orientation: Qt.Horizontal
anchors.fill: listviewrec
}
}
Component{
id:delegateimage
Item{
id:imageitem
width:50
height:60
visible:true
Rectangle{
id:imagerec
x:10
y:6
width: 60
height:70
border.color: "#7CC7FF"
border.width: 5
radius: 2
visible:true
Image{
x: 3
y: 3
height : imagerec.height
visible: true
width : imagerec.width
anchors.fill: imagerec
source:fileUrl
}
}
}
}
I don't think qml has the concept of inner- and outer- rects as far as borders are concerned, (or if it does, borders are drawn in the inner-rect so children will be drawn on top).
Your best bet here is to probably do something like this:
Item {
id:listviewrec
x: 347
y:644
width: 700
height: 91
visible: true
ListView{
id:modlistview
width: listviewrec.width
height: listviewrec.height
clip: true
boundsBehavior: Flickable.DragOverBounds
spacing:25
model:mod
delegate: delegateimage
orientation: Qt.Horizontal
anchors.fill: listviewrec
}
Rectangle {
radius: 4
border.color:"#7CC7FF"
border.width: 4
color: 'transparent'
anchors.fill: parent
}
}
It simply draws a transparent rect with the border you want on top of the ListView
At the moment I am unable to run your code, but it seems a matter of removing explicit width and height settings, since you are using anchors.fill