Hello I have the following Layout. But the Grid is left aligned how do I center it in the scrollview area??
Rectangle {
id: card
ScrollView {
width: card.width
height: 60
ScrollBar.vertical.policy: ScrollBar.AlwaysOff
id: bottomMenuScrollArea
anchors {
bottom: parent.bottom
bottomMargin: 20
}
// BOTTOM MENU
Grid {
id: bottomMenu
width: card.width
height: 60
columns: 4
columnSpacing: 20
Text {
color: Style.color.text
text: Style.icon.home
renderType: Text.NativeRendering
width: 60
height: 60
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
font {
family: "icons"
pixelSize: 80
}
MouseArea {
anchors.fill: parent
width: parent.width + 30
height: width
}
}
}
Text {
color: Style.color.text
text: Style.icon.home
renderType: Text.NativeRendering
width: 60
height: 60
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
font {
family: "icons"
pixelSize: 80
}
MouseArea {
anchors.fill: parent
width: parent.width + 30
height: width
}
}
}
Text {
color: Style.color.text
text: Style.icon.home
renderType: Text.NativeRendering
width: 60
height: 60
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
font {
family: "icons"
pixelSize: 80
}
MouseArea {
anchors.fill: parent
width: parent.width + 30
height: width
}
}
}
Text {
color: Style.color.text
text: Style.icon.home
renderType: Text.NativeRendering
width: 60
height: 60
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
font {
family: "icons"
pixelSize: 80
}
MouseArea {
anchors.fill: parent
width: parent.width + 30
height: width
}
}
}
}
}
Can you help me with horizontal center the grid in the scroll view area?? I tried differnt things ut was not succsesfull.
I appricate your help :)
Or is thee any better way to get scrollbars around the grid?
You'll need to place the Grid inside of an Item. Anchor the grid in the horizontal center of the Item and set the Item's width to the maximum of the ScrollView width and the Grid width. Something like this:
ScrollView {
id: bottomMenuScrollArea
Item {
id: gridContainer
width: Math.max(bottomMenuScrollArea.width, bottomMenu.width)
height: bottomMenu.height
Grid {
id: bottomMenu
anchors.horizontalCenter: parent.horizontalCenter
[...]
}
}
}
Related
I have ListView with items like this:
And I want use swipe. But when I add SwipeDelegate I get this:
How I can make swipe elements over the text? I try use z properties, but with z my swipe not animated when opened and I can't close it.
Here my code:
//SomePage.qml:
import QtQuick 2.12
import QtQuick.Controls 2.12
ScrollView {
ListView {
id: someListView
model: SomeItems {}
delegate: SwipeDelegate {
width: someListView.width
Row {
leftPadding: 5
width: parent.width
Image {
id: someImg
height: 38
source: myImage
width: height
}
Column {
leftPadding: 5
width: parent.width - someImg.width - 10
// Name
Text {
id: someName
text: myCount.toString() + " × " + myName
}
// Number
Text {
id: someNumber
text: myNumber.toLocaleString(Qt.locale("ru-RU"), "f", 0)
anchors.right: parent.right
font.pixelSize: 12
rightPadding: 5
}
}
}
swipe.right: Row {
anchors.right: parent.right
height: parent.height
// Delete button
Label {
text: "\ue800"
color: "black"
font.family: fontFontello.name
height: parent.height
padding: 12
verticalAlignment: Label.AlignVCenter
width: this.height
background: Rectangle {
color: "lightblue"
height: parent.height
width: parent.width
MouseArea {
anchors.fill: parent
onClicked: someListView.model.remove(index)
}
}
}
// Hide button
Label {
text: "\ue80a"
color: "black"
font.family: fontFontello.name
height: parent.height
padding: 12
verticalAlignment: Label.AlignVCenter
width: this.height
background: Rectangle {
color: "lightgray"
MouseArea {
anchors.fill: parent
onClicked: {
...
swipe.close()
}
}
}
}
}
}
}
}
The problem is you're adding your text/image on top of the default contentItem instead of inside it. It will look correct if you add your Row to contentItem, like this:
delegate: SwipeDelegate {
contentItem: Row {
...
}
}
I have a ListView where the items become visible or not based on whether a header was expanded or not. When the visible property is set to false, there is just blank space in that area. How do I remove the black space in the list so that the next visible item comes in view?
Currently I have set the height:model.count * 50 with 50 being height of each item. I tried subtracting 50 every time an item's visible property is set to false but this just reduces the height of the list overall but the blank space remains.
ListView { id: list
focus: true
anchors.top: header.bottom
anchors.left: parent.left
anchors.right: parent.right
width: parent.width
height:model.count*50
model:hall
Component {
id:comp
Item{
width: parent ? parent.width : 0
height: parent ? parent.height: 0
Column{
id:col1
width: parent.width - 16
height: 25
anchors.centerIn: parent
spacing: 3
Text { id: name
width: parent.width
text: name
elide: Text.ElideMiddle
font: "black"
color: "grey"
}
Row{
width: parent.width
Text { id: file1
width: parent.width * 0.6 - 5
text: "hello"
horizontalAlignment: Text.AlignLeft
elide: Text.ElideMiddle
font: systemFont.TableCellFont
}
Text { id: file2
width: parent.width*0.4 - 3
horizontalAlignment: Text.AlignRight
text: mod
font: systemFont.TableCellFont
}
}
}
MouseArea {
anchors.fill: parent
onClicked: {
console.warn("Mouse onClicked")
}
}
}
}
delegate: Item {
width: parent.width;
height: {
if (!cric && expanded)
return 50
else
return 0
}
Loader {
anchors.fill: parent
sourceComponent: comp
height: expanded? 50: 0
readonly property int index:model.index
readonly property string mod: model.mod
visible: !cric && expanded
}
}
Keys.onReturnPressed: {
console.warn("Return pressed")
}
}
The blank space is created because the List item which is hidden by setting visible to false still has its dimensions set. You can update the item height to 0 and the blank space will not be visible. Try this example for reference.
import QtQuick 1.1
Rectangle{
width: 400; height: 400
color: 'lightblue'
ListView{
width: 400; height: count * 30
model: 20
delegate: Rectangle{
id: rectDel
width: 200; height: 30
color: 'lightgreen'
border{
width: 1
color: 'black'
}
Text{
text: index
anchors.centerIn: parent
}
Rectangle{
width: 20; height: 20
radius: 10
color: 'red'
anchors{
verticalCenter: parent.verticalCenter
right: parent.right; rightMargin: 10
}
Text{ text: 'X'; anchors.centerIn: parent; }
MouseArea{
anchors.fill: parent
onClicked: {
rectDel.visible = false
rectDel.height = 0
}
}
}
}
}
}
in my code i have a ListView of 16 elements, i want that when i scroll the listview the first element must be always visible. How i can do it ?
ApplicationWindow {
id: window
visible: true
width: 640
height: 480
ListView {
id:listview
anchors.fill: parent
model: 16
verticalLayoutDirection: ListView.BottomToTop
delegate: Rectangle {
height: listview.height/5
width: listview.width
color: Qt.rgba(Math.random(),Math.random(),Math.random(),1)
Text {
text: index
anchors.fill: parent
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
color: "white"
font.pixelSize: 35
}
}
}
}
you could make use of a header. Your code will then look something like this:
ApplicationWindow {
id: window
visible: true
width: 640
height: 480
ListView {
id:listview
anchors.fill: parent
model: 15
verticalLayoutDirection: ListView.BottomToTop
headerPositioning: ListView.OverlayHeader
header: Rectangle {
height: listview.height/5
width: listview.width
color: Qt.rgba(Math.random(),Math.random(),Math.random(),1)
z:2
Text {
text: "0"
anchors.fill: parent
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
color: "white"
font.pixelSize: 35
}
}
delegate: Rectangle {
height: listview.height/5
width: listview.width
color: Qt.rgba(Math.random(),Math.random(),Math.random(),1)
Text {
text: index+1
anchors.fill: parent
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
color: "white"
font.pixelSize: 35
}
}
}
}
I have a file named page2.qml like below
Page {
id: page
Rectangle {
id: container
anchors.fill: parent
width: parent.width * 0.8
Rectangle {
id: title
anchors.top: parent.top
width: parent.width
height: 50
color: "salmon"
}
ListView {
id: listView
currentIndex: -1
anchors.top: title.bottom
anchors.bottom: parent.bottom
delegate: Rectangle {
height: 20
width: 100
border.color: "red"
color: "pink"
Text {
text: model.index
}
}
model: 100
}
}
}
the result is in this image:
Since the listview contain 100 item, how can i make the whole page scrollable? i can make just listview scrollable but not the whole page.
If you don't need the ListView to be scrollable by itself but your whole container need to, you could use a Repeater instead and put it inside a Column wrapped in a Flickable :
Flickable {
id: container
contentHeight: column.implicitHeight
contentWidth: width
width: parent.width * 0.8
height: parent.height
Column {
id: column
width: parent.width
Rectangle {
id: title
width: parent.width
height: 50
color: "salmon"
}
Repeater {
id: listView
model: 100
delegate: Rectangle {
height: 20
width: 100
border.color: "red"
color: "pink"
Text {
text: model.index
}
}
}
}
}
I want to specify the width and height of a Text, so that the fontSizeMode:Text.Fit would work. But after that, the anchors of the Text would not work. How could this happen?
Rectangle {
width: 360; height: 360
Rectangle {
width: parent.width / 3; height: parent.height / 6
anchors.centerIn: parent
border{ color: "red"; width: 5 }
Text {
anchors {
centerIn: parent
// verticalCenter: parent.verticalCenter
// horizontalCenter: parent.horizontalCenter
}
width: parent.width
height: parent.height
font.pixelSize: 50
fontSizeMode: Text.Fit
text: "Hello, world!"
}
}
}
Well, they are working fine. But since you set width and height, centrerIn anchor do not change anything, as text is already in middle of parent. You should set alignment, to get proper effect:
Text {
anchors.fill: parent
font.pixelSize: 100
fontSizeMode: Text.Fit
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
text: "Hello, world!"
}