How can i make my TextArea word wrap the text area and auto adjust it's height to show the available text in the TextArea? Secondly how can i remove the odd spacing seen in my image attached.
This is what i have now:
This is what I desire:
QML Code:
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
Frame {
anchors.centerIn: parent
anchors.fill: parent
ListView {
implicitWidth: parent.width
implicitHeight: parent.height
clip: true
model: ListModel {
ListElement {
description: "Wash the car this could be a really long message with some multiline support we will see how it works."
}
ListElement {
description: "Fix the car"
}
ListElement {
description: "Sell the car"
}
ListElement {
description: "Wash the car this could be a really long message with some multiline support we will see how it works. This should word wrap quite a lot of times."
}
ListElement {
description: "Fix the car"
}
ListElement {
description: "Sell the car"
}
ListElement {
description: "Wash the car"
}
ListElement {
description: "Fix the car"
}
ListElement {
description: "Sell the car"
}
}
delegate: RowLayout {
Layout.fillWidth: true
Rectangle {
id: newsicon
width: 16
height: 16
color: "steelblue"
Layout.alignment: Qt.AlignTop
}
ColumnLayout {
Layout.fillWidth: true
spacing: 0
TextArea {
Layout.fillWidth: true
Layout.alignment: Qt.AlignTop
id: messageText
text: model.description
wrapMode: TextEdit.WordWrap
readOnly: true
textMargin: 0.0
background: null
}
Label {
id: dateText
text: "Dec 20, 2019"
font.italic: true
font.pointSize: 8
color: "grey"
}
}
}
ScrollBar.vertical: ScrollBar {
active: true
}
}
}
Related
I am trying to use QML layouts to size sections of a UI within a ScrollView and having trouble understanding why one of the nested GridLayouts is being clipped. To understand it better, please see the picture below and look specifically at the bottom of "Section 1":
I think, basically, the issue is that "Section 2" implicit height(the smaller of the two side-by-side sections) is driving the sizing for that row in the magenta GridLayout instead of the other way around, as I would hope. I'm trying to get the code down to something allowed in the length of the question and will edit as soon as I do.
Instead of using ScrollView. I highly recommend you look at components that have a ScrollBar property first such as Flickable and ListView.
To demonstrate, I mocked up the following example demonstrating how you can use ListView with the ScrollBar.vertical property set to recreate the UI/UX shown in your question.
For the delegate I use a DelegateChooser so each row can have a different delegate. For the model I use a ListModel which is used to populate the different input types.
For each delegate, I add the following code to ensure that when that control is being edited, its focus is forced to be visible. i.e. it avoids the control being clipped.
onActiveFocusChanged: listView.currentIndex = index
Here's a full working example:
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Page {
background: Rectangle { color: "black" }
Frame {
anchors.fill: parent
anchors.margins: 10
background: Rectangle {
color: "black"
border.color: "#f0f"
border.width: 2
}
ColumnLayout {
anchors.fill: parent
RowLayout {
Layout.fillWidth: true
Layout.fillHeight: true
SectionInput {
title: "SECTION 1"
model: Data1 { }
}
SectionInput {
title: "SECTION 2"
model: Data2 { }
}
}
SectionInput {
title: "SECTION 3"
model: Data3 { }
}
}
}
}
// SectionInput.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Qt.labs.qmlmodels
Frame {
id: sectionInput
property string title
property ListModel model
Layout.fillWidth: true
Layout.fillHeight: true
background: Rectangle {
color: "black"
border.color: "yellow"
border.width: 2
}
ColumnLayout {
anchors.fill: parent
Text {
text: title
color: "cyan"
}
ListView {
Layout.fillWidth: true
Layout.fillHeight: true
model: sectionInput.model
clip: true
spacing: 10
snapMode: ListView.SnapOneItem
ScrollBar.vertical: ScrollBar {
width: 20
policy: ScrollBar.AlwaysOn
}
delegate: DelegateChooser {
id: chooser
role: "typ"
DelegateChoice { roleValue: "combo"; MyCombo { } }
DelegateChoice { roleValue: "text"; MyText { } }
DelegateChoice { roleValue: "switch"; MySwitch { } }
}
}
}
}
// MyCombo.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
RowLayout {
property ListView listView: ListView.view
width: listView.width - 20
Text {
Layout.fillWidth: true
Layout.preferredWidth: 100
text: lab
color: "white"
horizontalAlignment: Qt.AlignRight
}
ComboBox {
Layout.fillWidth: true
Layout.preferredWidth: 100
model: dat.split(",")
onAccepted: val = currentText
onActiveFocusChanged: listView.currentIndex = index
Component.onCompleted: currentIndex = find(val)
}
}
// MyText.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
RowLayout {
property ListView listView: ListView.view
width: listView.width - 20
Text {
Layout.fillWidth: true
Layout.preferredWidth: 100
text: lab
color: "white"
horizontalAlignment: Qt.AlignRight
}
TextField {
Layout.fillWidth: true
Layout.preferredWidth: 100
background: Rectangle { color: "#ddd" }
text: val
placeholderText: pla
onAccepted: val = text
onActiveFocusChanged: listView.currentIndex = index
}
}
// MySwitch.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
RowLayout {
property ListView listView: ListView.view
width: listView.width - 20
Text {
Layout.fillWidth: true
Layout.preferredWidth: 100
text: lab
color: "white"
horizontalAlignment: Qt.AlignRight
}
Frame {
Layout.fillWidth: true
Layout.preferredWidth: 100
background: Item { }
Switch {
checked: val === "true"
onToggled: val = JSON.stringify(checked)
onActiveFocusChanged: listView.currentIndex = index
}
}
}
// Data1.qml
import QtQuick
import QtQuick.Controls
ListModel {
ListElement { lab: "Field 1"; typ: "combo"; val: "F1"; dat: "F0,F1,F2,F3" }
ListElement { lab: "Field 2"; typ: "text"; pla: "xxx.xxx.xxx.xxx" }
ListElement { lab: "Field 3"; typ: "text"; pla: "xx,xxx" }
ListElement { lab: "Field 4"; typ: "text"; pla: "x,xxx" }
ListElement { lab: "Field 5"; typ: "text"; pla: "xxx" }
ListElement { lab: "Field 6"; typ: "text"; pla: "xx" }
ListElement { lab: "Field 7"; typ: "text" }
}
// Data2.qml
import QtQuick
import QtQuick.Controls
ListModel {
ListElement { lab: "Field 1"; typ: "combo"; val: "TTL"; dat: "TTL,XYZ,ABC" }
ListElement { lab: "Field 2"; typ: "combo"; val: "50"; dat: "5,50,500" }
ListElement { lab: "Field 3"; typ: "combo"; val: "50"; dat: "40,50,60" }
ListElement { lab: "Field 4"; typ: "combo"; val: "Normal"; dat: "Normal,Not Normal" }
ListElement { lab: "Field 5"; typ: "combo"; val: "Normal"; dat: "Normal,Not Normal" }
}
// Data3.qml
import QtQuick
import QtQuick.Controls
ListModel {
ListElement { lab: "Field 1"; typ: "switch"; val: "true" }
ListElement { lab: "Field 2"; typ: "combo"; val: "OFF"; dat: "ON,OFF" }
ListElement { lab: "Field 3"; typ: "switch"; val: "false" }
ListElement { lab: "Field 4"; typ: "text" }
ListElement { lab: "Field 5"; typ: "text" }
ListElement { lab: "Field 6"; typ: "text" }
}
You can Try it Online!
I ended up resolving the sizing issue with a test for which "Section" Rectangle was vertically larger (implicitHeight) before setting the Layout.preferredHeight for both of the "Sections".
Rectangle { //Section 1 rectangle
color: "black"
clip: true
Layout.fillHeight: true
Layout.fillWidth: true
Layout.preferredWidth: widthMainControlCommon
Layout.preferredHeight: { layoutSec1.implicitHeight > layoutSec2.implicitHeight ?
layoutSec1.implicitHeight : layoutSec2.implicitHeight}
GridLayout {
id: layoutSec1
columns: 2
anchors.fill: parent
}
//..
Rectangle { //Section 2 rectangle
color: "black"
clip: true
Layout.fillHeight: true
Layout.fillWidth: true
Layout.preferredWidth: widthMainControlCommon
Layout.preferredHeight: { layoutSec1.implicitHeight > layoutSec2.implicitHeight ?
layoutSec1.implicitHeight : layoutSec2.implicitHeight}
GridLayout {
id: layoutSec2
columns: 2
anchors.fill: parent
}
I don't understand the benefits of the Layouts like I thought I did, or the logic that drives sizing when they're nested. Needing to set a preferredHeight in order to get the Layout to size to make it visible seems strange to me.
How can i wrap a custom delegate i made for my listview, inside of a rectangle in order to customize the background and add corner radius to my listview items? Currently i have what is shown on the left in the image below. My goal is the listview on the right, while maintaining the current TextWrapping and whatnot seen in the current solution.
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
Frame {
anchors.centerIn: parent
anchors.fill: parent
ListView {
implicitWidth: parent.width
implicitHeight: parent.height
clip: true
spacing: 12
model: ListModel {
ListElement {
description: "Wash the car this could be a really long message with some multiline support we will see how it works."
}
ListElement {
description: "Fix the car"
}
ListElement {
description: "Sell the car"
}
ListElement {
description: "Wash the car this could be a really long message with some multiline support we will see how it works. This should word wrap quite a lot of times."
}
ListElement {
description: "Fix the car"
}
ListElement {
description: "Sell the car"
}
ListElement {
description: "Wash the car"
}
ListElement {
description: "Fix the car"
}
ListElement {
description: "Sell the car"
}
}
delegate: RowLayout {
width: parent.width
Rectangle {
id: newsicon
width: 16
height: 16
color: "steelblue"
Layout.alignment: Qt.AlignTop
}
ColumnLayout {
Layout.fillWidth: true
spacing: 4
TextArea {
selectByMouse: true
Layout.fillWidth: true
Layout.alignment: Qt.AlignTop
id: messageText
text: model.description
wrapMode: TextEdit.WordWrap
readOnly: true
topPadding: 0
bottomPadding: 0
background: null
}
Label {
id: dateText
text: "Dec 20, 2019"
font.italic: true
font.pointSize: 8
color: "grey"
}
}
}
ScrollBar.vertical: ScrollBar {
active: true
}
}
}
Essentially all you need to do is encapsulate your delegate's RowLayout in a Rectangle that acts as the background color:
delegate: Rectangle {
id: delegateBackground
color:"lightgreen"
radius: 10
width: parent.width
height: contentContainer.height + 20
Item {
id: contentContainer
width: parent.width - 20
height: column.height
anchors.centerIn: delegateBackground
RowLayout {
width: parent.width
Rectangle {
id: newsicon
width: 16
height: 16
color: "steelblue"
Layout.alignment: Qt.AlignTop
}
ColumnLayout {
id: column
Layout.fillWidth: true
spacing: 4
TextEdit {
selectByMouse: true
Layout.fillWidth: true
Layout.alignment: Qt.AlignTop
id: messageText
text: model.description
wrapMode: TextEdit.WordWrap
readOnly: true
}
Label {
id: dateText
text: "Dec 20, 2019"
font.italic: true
font.pointSize: 8
color: "grey"
}
}
}
}
}
You'll notice that I also added an invisible Item as a container to hold the RowLayout inside the background so that there are margins around the edges as you have indicated in your graphic.
Lets suppose i have an application that has items that can get bigger than it's window height.
How can i make it so it will show a vertical scrollbar only if needed?
I will show now what is happening on a test application i've done.
When all the items are closed:
When the items are opened:
Here the scrollbar should appear.
I will post now the code i've used for this example:
main.qml
import QtQuick 2.7
import QtQuick.Dialogs 1.2
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.3
import QtQuick.Window 2.3
ApplicationWindow {
visible: true
width: 640
height: 200
title: qsTr("Tabbars")
Rectangle{
anchors.fill:parent
Column {
anchors.fill: parent
PanelItem {
id:panel1
title: "Panel 1"
width:parent.width
content: Item {
property string title: "teste"
height: configContent.implicitHeight
width: configContent.implicitWidth
ColumnLayout{
id:configContent
anchors.topMargin: 10
anchors.bottomMargin: 10
anchors.fill:parent
TextField {
id: companyNameText1
placeholderText: qsTr("Company name")
Layout.fillWidth: true
selectByMouse: true
}
ComboBox {
id: languagesComboBox1
textRole: "text"
objectName: "language"
Layout.fillWidth: true
model: ListModel {
ListElement {text: QT_TR_NOOP("English"); oid: 0}
ListElement {text: QT_TR_NOOP("Portuguese"); oid: 1}
ListElement {text: QT_TR_NOOP("Spanish"); oid: 2}
ListElement {text: QT_TR_NOOP("Italian"); oid: 3}
ListElement {text: QT_TR_NOOP("French"); oid: 4}
ListElement {text: QT_TR_NOOP("Portuguese(Brasil)"); oid: 5}
}
}
ComboBox {
id: devSndrModeComboBox1
textRole: "text"
objectName: "test_dev_sndr_mode"
Layout.fillWidth: true
model: ListModel {
Component.onCompleted: {
append({ text: QT_TR_NOOP("None"), oid: 0 })
append({ text: QT_TR_NOOP("Subpanel"), oid: 1 })
append({ text: QT_TR_NOOP("All"), oid: 2 })
}
}
}
}
}
Component.onCompleted: {
console.log("panel 1 height "+panel1.height)
}
}
PanelItem {
id:panel2
title: "Panel 2"
width:parent.width
content: Item {
property string title: "teste"
height: configContent2.implicitHeight
width: configContent2.implicitWidth
ColumnLayout{
id:configContent2
anchors.fill:parent
ComboBox {
id: sndrModeComboBox1
textRole: "text"
Layout.fillWidth: true
model: ListModel {
Component.onCompleted: {
append({ text: QT_TR_NOOP("Preset"), oid: 0 })
append({ text: QT_TR_NOOP("Programmed"), oid: 1 })
}
}
}
}
}
Component.onCompleted: {
console.log("panel 2 height "+panel2.height)
}
}
PanelItem {
id:panel3
title: "Panel 3"
width:parent.width
content: Item {
property string title: "teste"
height: configContent3.implicitHeight
width: configContent3.implicitWidth
ColumnLayout{
id:configContent3
anchors.fill:parent
ComboBox {
id: sndrModeComboBox2
textRole: "text"
Layout.fillWidth: true
model: ListModel {
Component.onCompleted: {
append({ text: QT_TR_NOOP("Preset"), oid: 0 })
append({ text: QT_TR_NOOP("Programmed"), oid: 1 })
}
}
}
}
}
Component.onCompleted: {
console.log("panel 2 height "+panel2.height)
}
}
PanelItem {
id:panel4
title: "Panel 4"
width:parent.width
content: Item {
property string title: "teste"
height: configContent4.implicitHeight
width: configContent4.implicitWidth
ColumnLayout{
id:configContent4
anchors.fill:parent
ComboBox {
id: sndrModeComboBox3
textRole: "text"
Layout.fillWidth: true
model: ListModel {
Component.onCompleted: {
append({ text: QT_TR_NOOP("Preset"), oid: 0 })
append({ text: QT_TR_NOOP("Programmed"), oid: 1 })
}
}
}
}
}
Component.onCompleted: {
console.log("panel 2 height "+panel2.height)
}
}
PanelItem {
id:panel5
title: "Panel 4"
width:parent.width
content: Item {
property string title: "teste"
height: configContent5.implicitHeight
width: configContent5.implicitWidth
ColumnLayout{
id:configContent5
anchors.fill:parent
ComboBox {
id: sndrModeComboBox4
textRole: "text"
Layout.fillWidth: true
model: ListModel {
Component.onCompleted: {
append({ text: QT_TR_NOOP("Preset"), oid: 0 })
append({ text: QT_TR_NOOP("Programmed"), oid: 1 })
}
}
}
}
}
Component.onCompleted: {
console.log("panel 2 height "+panel2.height)
}
}
PanelItem {
id:panel6
title: "Panel 5"
width:parent.width
content: Item {
property string title: "teste"
height: configContent6.implicitHeight
width: configContent6.implicitWidth
ColumnLayout{
id:configContent6
anchors.fill:parent
ComboBox {
id: sndrModeComboBox5
textRole: "text"
Layout.fillWidth: true
model: ListModel {
Component.onCompleted: {
append({ text: QT_TR_NOOP("Preset"), oid: 0 })
append({ text: QT_TR_NOOP("Programmed"), oid: 1 })
}
}
}
}
}
Component.onCompleted: {
console.log("panel 2 height "+panel2.height)
}
}
}
}
}
PanelItem.qml
import QtQuick 2.7
import QtQuick.Layouts 1.2
Item {
id: root
property Component content
property string title: "panel"
property bool isSelected: false
height: container.height + bar.height
Rectangle{
id: bar
anchors {
top: parent.top
left: parent.left
right: parent.right
}
height: 30
color: root.isSelected ? "#81BEF7" : "#CEECF5"
Text {
anchors.fill: parent
anchors.margins: 10
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
text: root.title
}
Text {
anchors{
right: parent.right
top: parent.top
bottom: parent.bottom
margins: 10
}
horizontalAlignment: Text.AlignRight
verticalAlignment: Text.AlignVCenter
text: "^"
rotation: root.isSelected ? "180" : 0
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: isSelected = !isSelected
}
}
Rectangle{
id: container
anchors.top: bar.bottom
anchors.left: parent.left
anchors.right: parent.right
height: loader.item && isSelected ? loader.item.height : 0
Loader {
id: loader
visible: isSelected
sourceComponent: content
anchors.top: container.top
}
Behavior on height {
PropertyAnimation { duration: 100 }
}
}
}
How can a scrollbarimplemented so it is called only when needed?
I hope this might help.
ScrollView {
id: scrollView // This is just an ID of scroll view
width: 300 // This is the width of the scroll view window
height: 300 // This is the height of the scroll view window
// contentHeight or contentWidth holds the value of the whole
// content height which needs a scroll bar if it is larger
// than the height or width of the ScrollView
// childrenRect.width returns the highest width among the children.
// childrenRect.height returns the highest height among the children.
contentWidth: childrenRect.width
contentHeight: childrenRect.height
// This is false by default.
// This hides the excess content behind the boundaries of ScrollView; the height and the width
clip: true
// enter your contents here
}
Import QtQuick.Controls 2.14 or higher versions to support contentWidth and contentHeight
I've found what i believe is a really good solution.
The scrollbar this way will only appear if needed:
Item{
id:item
anchors.fill:parent
ScrollView{
anchors.fill:parent
Column {
width:item.width
}
}
}
I am working on qml, found found an error during moving mouse wheel scrolling i.e.
"TypeError: Cannot read property 'name' of undefined".
It only appear when either mouse wheel scrolling or close the application while during execution and beginning of the application didn't show this error.
One more thing, I am getting accurate data/result whatever I want but due to this error the performance of application get affected.
Please let me know how can I get rid of this issue?
also find below example to see error.
My code is..
import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Layouts 1.1
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
menuBar: MenuBar {
Menu {
title: qsTr("File")
MenuItem {
text: qsTr("Exit")
onTriggered: Qt.quit();
}
}
}
TableView {
anchors.fill: parent
visible: true
backgroundVisible: false
alternatingRowColors: false
sortIndicatorVisible: true
clip: true
highlightOnFocus: false
width: parent.width
height: parent.height
TableViewColumn{ role: "code" ; title: "cde" ; width: 200;
delegate: Component {
id: codeDelegate
Item{
Text {
color: "lightgray"
elide: styleData.elideMode
text: styleData.value //modelSettingData.get(styleData.row).name
font.family: "Arial"
font.pixelSize: 18
wrapMode: Text.WrapAtWordBoundaryOrAnywhere
Text {
id: metaData
color: "red"
width: parent.width
// height: 20
anchors.bottom: parent.bottom
anchors.bottomMargin: -parent.height/1.5
font.weight: Font.ExtraLight
//elide: Text.ElideMiddle
text: "Time: " + modelSettingData.get(styleData.row).name //Error comes when this part added but I need to use it with the same form
}
}
}
}
}
TableViewColumn{ role: "name" ; title: "nme" ; width: 200
delegate: Component {
id: nameDelegate
Text {
color: "yellow"
elide: styleData.elideMode
text: styleData.value
font.family: "Arial"
font.pixelSize: 18
}
}
}
model: ListModel {
id: modelSettingData
ListElement {
name: "aaaaaaaaaa"
code: "3042666666666"
}
ListElement {
name: "bbbbbb"
code: "32235"
}
ListElement {
name: "ccccccc"
code: "32638"
}
ListElement {
name: "ddddddddddd"
code: "00000000000"
}
ListElement {
name: "eeeeeeeeeeee"
code: "111111111111"
}
ListElement {
name: "ffffffffffff"
code: "222222222222"
}
ListElement {
name: "ggggggggggggg"
code: "3333333333333"
}
ListElement {
name: "hhhhhhhhhhhhh"
code: "4444444444444"
}
ListElement {
name: "iiiiiiiiiiiii"
code: "5555555555555"
}
}
rowDelegate: Rectangle {
property bool selected : styleData.selected
width: parent.width-2
height: 100
color: styleData.selected? "black" : "black"
Rectangle {
width: parent.width
height: 1
anchors.bottom: parent.bottom
visible: parent.selected
color: "yellow"
}
}
}
}
I'm trying to avoid this annoying overlapping that both SideView and ListView seem to fancy. Here is an example which demonstrates the issue:
Note: Look at the green rectangle on the left when you swipe the SwipeView and also the tabs when you scroll down the ListView
main.cpp
#include <QGuiApplication>
#include <QQmlApplicationEngine>
int main(int argc, char *argv[])
{
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
QGuiApplication app(argc, argv);
QQmlApplicationEngine engine;
engine.load(QUrl(QLatin1String("qrc:/main.qml")));
return app.exec();
}
main.qml
import QtQuick 2.7
import QtQuick.Window 2.0
import QtQuick.Controls 2.0
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Layouts 1.2
Window {
id: window
visible: true
width: 600
height: 480
title: "Demo"
RowLayout {
id: layoutTopLevel
anchors.fill: parent
spacing: 0
Rectangle {
id: sidebarView
Layout.preferredWidth: layoutTopLevel.width * .3
Layout.fillHeight: true
color: "#453"
border.width: 1
}
ColumnLayout {
id: sideViewLayout
spacing: 0
SwipeView {
id: sideView
currentIndex: sideViewPageIndicator.currentIndex
Layout.fillWidth: true
Layout.preferredHeight: layoutTopLevel.height * .9
Page {
id: page1
header: Text {
text: "Page 1"
horizontalAlignment: Text.AlignHCenter
font.pixelSize: 20
}
}
Page {
id: page2
header: Text {
text: "Page 2"
horizontalAlignment: Text.AlignHCenter
font.pixelSize: 20
}
TabView {
id: page2TabView
width: parent.width
height: parent.height
anchors.margins: 4
tabPosition: Qt.BottomEdge
Tab {
title: qsTr("Tab 1")
}
Tab {
title: qsTr("Tab 2")
ColumnLayout {
Text {
text: "Text 1"
Layout.alignment: Qt.AlignCenter
}
Text {
text: "Text 2"
Layout.alignment: Qt.AlignCenter
}
ListView {
width: parent.width
height: parent.height
model: ListModel {
ListElement {
name: "Element 1"
}
ListElement {
name: "Element 2"
}
ListElement {
name: "Element 3"
}
ListElement {
name: "Element 4"
}
ListElement {
name: "Element 5"
}
ListElement {
name: "Element 6"
}
}
delegate: Text {
text: name
}
}
}
}
style: TabViewStyle {
tabsAlignment: Qt.AlignHCenter
frameOverlap: 1
tab: Rectangle {
border.width: styleData.selected
implicitWidth: Math.max(text.width + 4, 80)
implicitHeight: 20
radius: 10
Text {
id: text
anchors.centerIn: parent
text: styleData.title
color: styleData.selected ? "white" : "black"
}
color: styleData.selected ? "#654" : "white"
}
frame: Rectangle {
color: "white"
}
}
}
}
}
PageIndicator {
id: sideViewPageIndicator
count: sideView.count
interactive: true
anchors.bottom: sideView.bottom
anchors.bottomMargin: -45
anchors.horizontalCenter: parent.horizontalCenter
delegate: Rectangle {
height: 30
width: 30
antialiasing: true
color: "#654"
radius: 10
opacity: index === sideView.currentIndex ? 0.95 : pressed ? 0.7 : 0.45
Behavior on opacity {
OpacityAnimator {
duration: 100
}
}
}
}
}
}
}
Use clip: true
Which clips the content which goes out of its boundaries.
I accidentally came across an example of a ListView while looking into another problem I had and I saw the clip property there. I have completely missed it while looking into the docs of both SideView and ListView. Basically when you set it to true the view no longer covers other components and this is exactly what I want. See comment by #Mitch on why this is not enabled by default.