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
Related
I'm trying to make my horizontal rectangle to drop a shadow. When I do it with the code below, the rectangle duplicates, so that there are two horizontal rectangles in two rows. It's shown in the image (the duplicated one is white). How can I get rid of the duplicated rectangle so that just the shadow and the original rectangle remain?
Window {
visible: true
width: 640
height: 480
color: "white"
Item {
anchors.fill: parent
ColumnLayout {
id: layout
anchors.fill: parent
spacing: 0
Rectangle {
id: bar
color: "blue"
height: 40
Layout.fillWidth: true
}
DropShadow {
anchors.fill: bar
horizontalOffset: 0
verticalOffset: 3
radius: 8.0
samples: 12
source: bar
color: "blue"
}
Rectangle {
Layout.fillHeight: true
Layout.preferredWidth: parent.width
color: "grey"
}
}
}
}
There is no duplicate rectangle, there is just a gap. You are using a layout, which will lay its containing items out based on their size. You do anchor the shadow to fill the rectangle, so that's where it is, but the layout is not supposed to be used in such a format, therefore it leaves an empty space where the shadow is supposed to go before placing the grey rectangle.
And the shadow doesn't show if you get rid of the gap because the grey rectangle is on top of it. Tinkering with the z value doesn't seem to help either. It might have to do with using a layout.
You can get the desired result if you get rid of the layout and use anchoring, which allows you to put the grey rectangle first, so it can be under the shadow.
Item {
anchors.fill: parent
Rectangle {
anchors.bottom: parent.bottom
anchors.top: bar.bottom
width: parent.width
color: "grey"
}
Column { // or you can put the layout here if you want
id: bar
anchors.top: parent.top
width: parent.width
Rectangle {
color: "blue"
height: 40
width: parent.width
}
// other stuff
}
DropShadow {
anchors.fill: bar
horizontalOffset: 0
verticalOffset: 3
radius: 8.0
samples: 12
source: bar
color: "blue"
}
}
Create DropShadow as Rectangle child:
Item {
ColumnLayout {
id: layout
anchors.fill: parent
spacing: 0
Rectangle {
id: bar
color: "blue"
height: 40
Layout.fillWidth: true
...
... // some buttons, images etc.
DropShadow {
anchors.fill: parent
horizontalOffset: 0
verticalOffset: 3
radius: 8.0
samples: 12
source: bar
color: "blue"
}
}
...
... // some other components to the layout ...
}
}
Also you can assign DropShadow object to layer.effect Property:
Item {
ColumnLayout {
id: layout
anchors.fill: parent
spacing: 0
Rectangle {
id: bar
color: "blue"
height: 40
Layout.fillWidth: true
...
... // some buttons, images etc.
layer.enabled: true // Set Layer for Enable
layer.effect: DropShadow {
horizontalOffset: 0
verticalOffset: 3
radius: 8.0
samples: 12
source: bar
color: "blue"
}
}
...
... // some other components to the layout ...
}
}
I'm new of qml.
I'm starting to develop a little application with a custom item.
when I try to use in application anchor.top: first_item.bottom, to position the rectangles of the custom component, one below the other doesn't work.
content file main.qml:
import QtQuick 2.5
Item
{
id:main_screen
Rectangle
{
width: 300
height: 60
id: text_content
color: "DarkGray"
opacity: 0.9
border.color: "blue"
border.width: 3
radius: 5
z:6
Text {
id: titleText
width: parent.width
height: parent.height
font.pointSize: 20
font.family: "Arial"
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
text: "Test - title"
color: "White"; style: Text.Raised;
}
}
//..................This rectangle is shown below main_screen... so is OK
Custom_item
{
id:first_item
anchors.top: main_screen.bottom
}
//..................This rectangle is not shown below first_item... but it shown on absolute top, in overlap of retangle title
Custom_item
{
id:second_item
anchors.top: first_item.bottom
}
//..................This rectangle is not shown below second_item... but it shown on absolute top, in overlap of retangle title
Custom_item
{
id:third_item
anchors.top: second_item.bottom
}
}
content file Custom_item.qml
import QtQuick 2.5
Item
{
id:testComponent
Rectangle
{
width: 300
height: 60
id: text_content
color: "DarkGray"
opacity: 0.9
border.color: "blue"
border.width: 3
radius: 5
z:6
}
}
what am I doing wrong ?
Thanks
The problem lies within the dimensions of the objects your are anchoring to.
Though the Rectangles have a width and a height, the enclosing Item has none, so it is basically 0 pixels in height and width, while the Rectangle protrudes it.
If you don't have any reason for enclosing the Rectangle within the Item, I'd reccomend you, to take the Rectangle itself as the toplevel element of the file.
Reasons for having the Item might be those:
Hiding the Rectangles properties
Having multiple children for the Item that are logically siblings to the Rectangle
... other reasons might exist ;-)
Nevertheless, you need to make sure, that the toplevel item has always the right dimensions. So you should set the width and height, better the implicitWidth and implicitHeight in component declarations.
Example 1: Without an Item
import QtQuick 2.5
Rectangle {
id: root
width: 300
height: 60
color: "DarkGray"
opacity: 0.9
border.color: "blue"
border.width: 3
radius: 5
z:6
}
Example 2: With Item
import QtQuick 2.5
Item {
id:testComponent
implicitHeight: 60 // < This
implicitWidth: 300 // < and that are important to have the dimensions
Rectangle {
id: text_content
anchors.fill: parent
color: "DarkGray"
opacity: 0.9
border.color: "blue"
border.width: 3
radius: 5
z:6
}
}
You are anchoring all the Rectangle's to the Item hence you are not getting the desired result. Simple change the id of the top Rectangle as follows
Item
{
id: root
Rectangle
{
id:main_screen
...
}
}
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
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.
I have a nested ScrollView, similar to the following QML:
import QtQuick 2.0
import QtQuick.Controls 1.1
Rectangle {
width: 200
height: 600
ScrollView {
id: sView
anchors.fill: parent
ListView {
id: list
boundsBehavior: Flickable.StopAtBounds
clip: true
focus: true
interactive: true
model: 5
delegate: Component {
MouseArea {
id: hoverArea
width: 100
height: 200
onClicked: list.currentIndex = index;
Rectangle {
id: fauxParent
anchors.fill: parent
border.width: 1
border.color: "black"
Rectangle {
anchors.top: parent.top
anchors.left: parent.left
height: parent.height
width: parent.width / 2
border.width: 1
border.color: "purple"
color: "green"
Text {
anchors.centerIn: parent
text: "stuff"
}
}
ScrollView {
//parent: sView
anchors.top: fauxParent.top
anchors.right: fauxParent.right
height: fauxParent.height
width: fauxParent.width / 2
ListView {
model: 3
delegate: Component {
Rectangle {
radius: 10
height: 100
width: 100
color: "blue"
}
}
}
}
}
}
}
}
}
}
It seems to run correctly, except that the inner ScrollView won't respond to the mousewheel: the outer ScrollView intercepts that event. The only fix I've found in research for this, is to set the inner scrollview's parent directly to the outer scrollview (uncomment the parent: sView line). Unfortunately, this re-positions all five scrollview delegates onto the top right corner of the outer scrollview. It seems that ScrollView positions itself based on its parent?
For the record, my actual application is wrapping a large section of the page in a scrollview so as to allow the user to access sections of it that may be out of bounds for the current window size. The content of this section, though, has a variety of different controls for a variety of different purposes, including some scrollviews. So I'd also accept an alternate way of moving around a set of generic content that's too large for the window.
This is a Windows desktop app, so I don't need to consider mobile-specific issues.
You nested four elements that handle scroll Events.
Why do you put a ScrollView arround a ListView?
If you remove the ScrollViews the Mousewheel work fine.
Rectangle {
width: 200
height: 600
ListView {
anchors.fill: parent
id: list
boundsBehavior: Flickable.StopAtBounds
clip: true
focus: true
interactive: true
model: 5
delegate: Component {
MouseArea {
id: hoverArea
width: 100
height: 200
onClicked: list.currentIndex = index;
Rectangle {
id: fauxParent
anchors.fill: parent
border.width: 1
border.color: "black"
Rectangle {
anchors.top: parent.top
anchors.left: parent.left
height: parent.height
width: parent.width / 2
border.width: 1
border.color: "purple"
color: "green"
Text {
anchors.centerIn: parent
text: "stuff"
}
}
ListView {
anchors.top: fauxParent.top
anchors.right: fauxParent.right
height: fauxParent.height
width: fauxParent.width / 2
model: 3
delegate: Component {
Rectangle {
radius: 10
height: 100
width: 100
color: "blue"
}
}
}
}
}
}
}
}
If you miss the Scrollbar look at this:
How to create scrollbar in QtQuick 2.0?