I have a TabView with 3 Tabs and I want to change the focus/select the third Tab when a button is pressed. I've tried forceActiveFocus, but it does not work.
//.qml
TabView {
Tab {
id: redTab
title: "Red"
Rectangle { color: "red" }
}
Tab {
id: blueTab
title: "Blue"
Rectangle { color: "blue" }
}
Tab {
id: greenTab
title: "Green"
Rectangle { color: "green" }
}
}
ToolButton {
inconSource: "lock.png"
onClicked: {
greenTab.forceActiveFocus() // does not work?
}
}
Set the currentIndex:
TabView {
id: tabView
//...
}
//...
tabView.currentIndex = 2
Related
I have a ListView which is inside a ScrollView and I want to know or listen when the scroll bar is scrolled to the bottom,
ScrollView {
id: moderatorMessagesScrollViewID
anchors.fill: parent
function update()
{
console.debug("<< moderatorMessagesScrollViewID ScrollView::update ", flickableItem.atYEnd);
}
flickableItem.onAtYBeginningChanged: {
update();
}
flickableItem.onAtYEndChanged: {
update();
}
flickableItem.onContentYChanged: {
update();
}
ListView {
id: moderatorMessagesList
anchors.leftMargin: 15
anchors.rightMargin: 15
anchors.bottomMargin: 5
layoutDirection: Qt.LeftToRight
orientation: ListView.Vertical
verticalLayoutDirection: ListView.BottomToTop
cacheBuffer: (chatPanel.height <= 0) ? 1000 : (chatPanel.height * 1000)
spacing: 0
focus: true
Component.onCompleted: {
updateView();
}
delegate: messageListDelegate
}
style: ScrollViewStyle {
incrementControl: Rectangle {
visible: false
implicitWidth: 0
implicitHeight: 0
}
decrementControl: Rectangle {
visible: false
implicitWidth: 0
implicitHeight: 0
}
corner: Rectangle {
color: "white"
visible: true
rotation: 180
}
handle: Rectangle {
implicitWidth: 5 * MyStyle.props.scrollSizeFactor()
implicitHeight: 7 * MyStyle.props.scrollSizeFactor()
color: Qt.rgba(237/255, 237/255, 237/255, 1)
radius: 2
border.width: 1
border.color: "#C3C3C3"
}
scrollToClickedPosition: true
handleOverlap: 1
scrollBarBackground: Rectangle {
width: 5 * MyStyle.props.scrollSizeFactor()
height: 10 * MyStyle.props.scrollSizeFactor()
color: MyStyle.props.color("chatChatPanelBackground")
}
transientScrollBars: false
}
}
but my issues here are
flickableItem.atYEnd is always false
flickableItem.onAtYEndChanged is not triggered even if I scroll at the bottom
update() is triggered by onContentYChanged() instead when i try to scroll using scrollbar.
What is wrong with this and what areas I need to look into?
Here's a minimum working example depicting the detection of Vertical scroll bar at its bottom:
ListModel {
id: contactModel
ListElement {
name: "Bill Smith"
number: "555 3264"
}
ListElement {
name: "John Brown"
number: "555 8426"
}
ListElement {
name: "Sam Wise"
number: "555 0473"
}
ListElement {
name: "Bill Smith"
number: "555 3264"
}
ListElement {
name: "John Brown"
number: "555 8426"
}
ListElement {
name: "Sam Wise"
number: "555 0473"
}
}
Rectangle {
width: 180; height: 50
Component {
id: contactDelegate
Item {
width: 180; height: 40
Column {
Text { text: '<b>Name:</b> ' + name }
Text { text: '<b>Number:</b> ' + number }
}
}
}
}
ScrollView {
width: 200
height: 60
ListView {
model: contactModel
delegate: contactDelegate
onAtYEndChanged: console.log("Vertical Scroll Bar's bottom reached = ", atYEnd)
}
}
Following is my main.qml:
Window {
id: window
visible: true
width: 800
height: 480
title: qsTr("Hello World")
ListModel {
id: _listModel
ListElement {
textData: "E1"
isEnabled: false
}
ListElement {
textData: "E2"
isEnabled: false
}
ListElement {
textData: "E3"
isEnabled: false
}
ListElement {
textData: "E4"
isEnabled: false
}
ListElement {
textData: "E5"
isEnabled: false
}
ListElement {
textData: "E6"
isEnabled: false
}
}
ListView {
id: _listview
model: _listModel
width: 100
height: parent.height
anchors.right: parent.right
delegate: Item {
width: parent.width
height: 50
anchors.right: parent.right
Component.onCompleted:
{
if (isEnabled)
visibleRecs++;
}
RowLayout {
Text {
id: itemText
text: qsTr(textData)
}
CheckBox {
height: 30
width: height
checked: isEnabled
onCheckedChanged: {
isEnabled = checked
}
}
}
}
}
ScrollView {
id: _scrollView
width: parent.width / 2
height: parent.height
clip: true
GridLayout {
id: _gridLayout
anchors.fill: parent
anchors.horizontalCenter: parent.horizontalCenter
columnSpacing: 10
rowSpacing: 10
columns: 2
Repeater {
model: _listModel
Loader {
id: _loader
sourceComponent: isEnabled ? _recComponent : null
onLoaded: {
item.text = textData
}
}
}
}
}
Component {
id: _recComponent
Rectangle {
property alias text : _txt.text
id: _rec
width: 100
height: 50
radius: 5
color: "yellow"
Text {
id: _txt
anchors.centerIn: parent
}
}
}
}
The above code creates following (when all check boxes are ticked):
When all checkboxes are ticked:
When checkbox E3 is unchecked:
I want the items to be rearranged in the gridlayout if any of the item goes invisible.
E.g. in the above case when E3 is unchecked, I want my view to be something like this:
Please let me know, if it is possible to achieve. Thanks in advance.
The problem is that you still instantiate the Loader, you just set the sourceComponent to null. You have to make the item invisible to not use space in the GridLayout (or put width/height to 0)
ScrollView {
id: _scrollView
width: parent.width / 2
height: parent.height
clip: true
GridLayout {
id: _gridLayout
anchors.fill: parent
anchors.horizontalCenter: parent.horizontalCenter
columnSpacing: 10
rowSpacing: 10
columns: 2
Repeater {
model: _listModel
Loader {
id: _loader
visible: isEnabled
sourceComponent: isEnabled ? _recComponent : null
onLoaded: {
item.text = textData
}
}
}
}
}
I need to press my create button under red circle and by pressing this button i am trying to fill first row of my table view. I am a new user in QT Quick please help me. I have wasted lot of time but have no way to do it.
I am providing UI and code as well please have a look.
Thank you !
import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.0
import QtQuick.Dialogs 1.0
import "content"
import "images"
ApplicationWindow {
visible: true
title: "Mask Editor: Subsystem"
width: 720
height: 420
minimumHeight: 400
minimumWidth: 720
statusBar: StatusBar {
id: minstatusbar
RowLayout {
id:row1
spacing: 2
width: parent.width
Button {
text:"Unmask"
}
Item { Layout.fillWidth: true }
Button {
text:"OK"
}
Button {
text:"Cancel"
}
Button {
text:"Help"
}
Button {
text:"Apply"
}
}
}
/* ListModel {
id: largeModel
Component.onCompleted: {
for (var i=0 ; i< 10 ; ++i)
largeModel.append({"index":i , "prompt": "pmpt", "variable":i+10, "type" : "Female","tabname":"something"})
}
}*/
Action {
id: openAction
text: "&Open"
shortcut: "Ctrl+O"
iconSource: "images/document-open.png"
onTriggered: fileDialog.open()
tooltip: "Open an Image"
}
TabView {
id:frame
enabled: enabledCheck.checked
tabPosition: controlPage.item ? controlPage.item.tabPosition : Qt.TopEdge
anchors.fill: parent
anchors.margins: Qt.platform.os === "osx" ? 12 : 2
Tab {
id: controlPage
title: "Parameters"
Item {
id:root
anchors.fill: parent
anchors.margins: 8
ColumnLayout {
id: mainLayout
anchors.fill: parent
spacing: 4
GroupBox {
id: gridBox
title: "Grid layout"
Layout.fillWidth: true
ListModel {
id: nestedModel
ListElement{index:"1";prompt:"pmt";variable:10; type: "to be defined";tabname:"something"}
}
GridLayout {
id: gridLayout
anchors.fill: parent
rows: 3
flow: GridLayout.TopToBottom
ToolButton { iconSource: "images/window-new.png"
action:filldata
Accessible.name: "New window"
onClicked: {
nestedmodel.append({"index":i , "prompt": "pmpt", "variable":i+10, "type" : "Female","tabname":"something"})
}
tooltip: "Toggle visibility of the second window" }
ToolButton { iconSource: "images/view-refresh.png"
onClicked: window1.visible = !window1.visible
Accessible.name: "New window"
tooltip: "Toggle visibility of the second window" }
ToolButton { Accessible.name: "Save as"
iconSource: "images/document-save-as#2x.png"
tooltip: "(Pretend to) Save as..." }
TableView{
model: modelcontl
Layout.rowSpan: 3
Layout.fillHeight: true
Layout.fillWidth: true
//anchors.fill: parent
TableViewColumn {
role: "index"
title: "#"
width: 36
resizable: false
movable: false
}
TableViewColumn {
role: "prompt"
title: "Prompt"
width: 120
}
TableViewColumn {
role: "variable"
title: "Variable"
width: 120
}
TableViewColumn {
role: "type"
title: "Type"
width: 200
visible: true
}
TableViewColumn {
role: "tabname"
title: "Tab Name"
Layout.fillWidth: true
visible: true
}
}
}
}
Rectangle{
Layout.fillHeight: true
Layout.fillWidth: true
GridLayout {
//id: gridLayout
rows: 1
flow: GridLayout.TopToBottom
anchors.fill: parent
GridLayout{
id: grid1
columns: 2
anchors.fill: parent
GroupBox {
//id: gridBox
title: "Grid layout"
Layout.fillHeight: true
Layout.fillWidth: true
}
GroupBox {
//id: gridBox
title: "Grid layout"
Layout.fillHeight: true
Layout.fillWidth: true
}
}
}
}
}
}
}
Tab {
title: "Documentation"
Controls { }
}
Tab {
title: "dialog"
MessageDialogs { }
}
}
}
If you want to add a QML control into a cell you just have to define custom delegate. Since you need different delegates for different columns it can be done in a bit "tricky" way with Loader. See my example below:
Component {
id: comboDelegate
ComboBox {
model: ListModel {
ListElement { text: "Banana" }
ListElement { text: "Apple" }
ListElement { text: "Coconut" }
}
}
}
Component {
id: textDelegate
Text {
text: itemText
}
}
TableView {
Layout.fillWidth: true
Layout.fillHeight: true
TableViewColumn{ role: "col1" ; title: "Column1" }
TableViewColumn{ role: "col2" ; title: "Column2" }
TableViewColumn{ role: "col3" ; title: "Column3" }
model: ListModel {
id: myModel
}
itemDelegate: Item {
height: 25
Loader {
property string itemText: styleData.value
sourceComponent: styleData.column === 0 ? comboDelegate : textDelegate
}
}
}
Try this:
TableView {
TableViewColumn{ role: "col1" ; title: "Column1" }
TableViewColumn{ role: "col2" ; title: "Column2" }
TableViewColumn{ role: "col3" ; title: "Column3" }
model: ListModel {
id: myModel
}
}
Button {
text: "Add row"
onClicked: {
myModel.append({col1: "some value",
col2: "Another value",
col3 : "One more value" });
}
}
How I can change background color to red for row if row had timeToReply>15. I can't get timeToReply in rowDelegate. How I can do this ?
TableView
{
model: someModel
TableViewColumn{title:"Time";role: "timeToReply";width: 170}
rowDelegate: Item {
clip: true
Text {
anchors.verticalCenter: parent.verticalCenter
color: {
if(timeToReply>15) //problem
{
color="red"
}
else
{
color="black"
}
}
text: styleData.value
elide: Text.ElideMiddle
}
}
}
I am trying to sort a list of items in the QML listview, as per the input provided by user. I have written the logic for sorting but unable to set the sorted model. It seems the sorted model is not assigned tp the actual model used for the original ListView. Please have a look to the code and let me know if I am doing something wrong.
//main.qml
import QtQuick 1.1
Rectangle {
id: page
width: 500; height: 400
color: "#edecec"
ModifiedForSorting {
id: search; focus: true
}
}
//ModifiedForSorting.qml
import QtQuick 1.1
FocusScope {
id: focusScope
width: 250; height: 28
Text {
id: typeSomething
anchors.fill: parent; anchors.leftMargin: 8
verticalAlignment: Text.AlignVCenter
text: "Type here..."
color: "gray"
font.italic: true
}
MouseArea {
anchors.fill: parent
onClicked: { focusScope.focus = true; textInput.openSoftwareInputPanel(); }
}
TextInput {
id: textInput
anchors { left: parent.left; leftMargin: 8;rightMargin: 8; verticalCenter: parent.verticalCenter }
focus: true
selectByMouse: true
onTextChanged: {
//update list as per input from user
container.getSortedItems(textInput.text);
color = "red"
}
}
states: State {
name: "hasText"; when: textInput.text != ''
PropertyChanges { target: typeSomething; opacity: 0 }
}
transitions: [
Transition {
from: ""; to: "hasText"
NumberAnimation { exclude: typeSomething; properties: "opacity" }
},
Transition {
from: "hasText"; to: ""
NumberAnimation { properties: "opacity" }
}
]
Rectangle {
id: container
width: 500; height: 400
color: "#343434"
anchors.top: textInput.bottom
ListModel {
id: namesModel
ListElement {
title: "Mumbai"
}
ListElement {
title: "Pune"
}
ListElement {
title: "Bangalore"
}
ListElement {
title: "Kolkata"
}
ListElement {
title: "Hyderabad"
}
ListElement {
title: "Nagpur"
}
ListElement {
title: "Thane"
}
}
// The delegate for each item in the model:
Component {
id: listDelegate
Item {
id: delegateItem
width: listView.width; height: 55
clip: true
Row {
anchors.verticalCenter: parent.verticalCenter
spacing: 10
Column {
anchors.verticalCenter: parent.verticalCenter
Text {
text: title
font.pixelSize: 15
color: "white"
}
}
}
}
}
function showAll() {
var filteredItems = "";
for (var i = 0; i < namesModel.count; i++) {
filteredItems = filteredItems + namesModel.get(i).title;
}
listView.model = filteredItems;
//namesModel = filteredItems;
}
function getSortedItems(searchTerm) {
var filteredItems = "";
if (searchTerm === "") {
showAll();
return;
}
for (var i = 0; i < namesModel.count; i++) {
if (namesModel.get(i).title.indexOf(searchTerm) === 0) {
filteredItems = filteredItems + namesModel.get(i).title;
}
}
listView.model = filteredItems;
//namesModel = filteredItems;
}
// The ListView:
ListView {
id: listView
anchors.fill: parent; anchors.margins: 20
model: namesModel
delegate: listDelegate
}
}
}
As shown above I guess the sorted model is not reassigned to the ListView. I am not sure. Please help me out. Thanks.
Taking a look at your code I guess you mean filtering items, and not sorting.
In your functions you try to assign a string value filteredItems to the listView.model property. You're probably getting an explicit error for that in your application log.
To solve this error you can use an auxiliary ListModel and populate it with just the items that fits your filter.
Try to replace all your code below the listDelegate Component with this:
ListModel{ id: filteredModel }
function getSortedItems(searchTerm) {
// Clear the aux model
filteredModel.clear();
// Add fitting items to the aux model
for (var i = 0; i < namesModel.count; i++) {
if (searchTerm === "" || namesModel.get(i).title.indexOf(searchTerm) === 0) {
filteredModel.append(namesModel.get(i));
}
}
}
// The ListView:
ListView {
id: listView
anchors.fill: parent; anchors.margins: 20
model: filteredModel
delegate: listDelegate
}
You can now do this with far less code using Array filter(). Below is an example written using Qt6.x syntax:
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Page {
background: Rectangle { color: "#edecec" }
property var cities: [
{ title: "Mumbai" },
{ title: "Pune" },
{ title: "Bangalore" },
{ title: "Kolkata" },
{ title: "Hyderabad" },
{ title: "Nagpur" },
{ title: "Thane" }
]
ColumnLayout {
anchors.fill: parent
TextField {
id: textField
Layout.fillWidth: true
placeholderText: qsTr("Type something here")
}
ListView {
Layout.fillWidth: true
Layout.fillHeight: true
model: cities.filter( city => !textField.text || city.title.toLowerCase().indexOf(textField.text.toLowerCase()) !== -1 )
delegate: ItemDelegate { text: modelData.title }
}
}
}
You can Try it Online!
Alternatively, you can consider using a ListModel combined with a DelegateGroup. The advantage of this is you do not need to repopulate a ListModel everytime the filter changes. Instead, you update the visibility of the item in the DelegateGroup:
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQml.Models
Page {
background: Rectangle { color: "#edecec" }
ListModel {
id: cities
ListElement { title: "Mumbai" }
ListElement { title: "Pune" }
ListElement { title: "Bangalore" }
ListElement { title: "Kolkata" }
ListElement { title: "Hyderabad" }
ListElement { title: "Nagpur" }
ListElement { title: "Thane" }
}
ColumnLayout {
anchors.fill: parent
TextField {
id: textField
Layout.fillWidth: true
placeholderText: qsTr("Type something here")
onTextChanged: delegateModel.refresh()
}
ListView {
Layout.fillWidth: true
Layout.fillHeight: true
model: DelegateModel {
id: delegateModel
model: cities
groups: [
DelegateModelGroup {
id: allItems
name: "all"
includeByDefault: true
},
DelegateModelGroup {
id: visibleItems
name: "visible"
}
]
filterOnGroup: "visible"
delegate: ItemDelegate { text: title }
function refresh() {
allItems.setGroups(0, allItems.count, ["all"]);
for (let i = 0; i < allItems.count; i++) {
let v = true;
let item = allItems.get(i);
if (textField.text) {
v = item.model.title.toLowerCase().indexOf(textField.text.toLowerCase()) !== -1;
}
if (v) allItems.setGroups(i, ["all", "visible"] );
}
}
}
}
}
Component.onCompleted: delegateModel.refresh()
}
You can Try it Online!