I have a Container which is a DockLayout and in this Container is a other one as a StackLayout. And there I have a label which I want to center, but I can't get it to work.
I need some help.
Here is a small overview of the structure:
Container {
layout: DockLayout {
}
Container {
id: cAnzeige
Label {
id: lblHeader
textStyle.fontSize: FontSize.XLarge
text: "header"
}
verticalAlignment: VerticalAlignment.Top
layout: StackLayout {
}
}
}
1) Make the StackLayout fill the horizontal width:
horizontalAlignment = HorizontalAlignment.FILL
2) Make the Label centered:
horizontalAlignment = HorizontalAlignment.CENTER
StackLayout is excessive here. Using DockLayout in your case is enough:
Container {
layout: DockLayout {
}
Container {
id: cAnzeige
horizontalAlignment: HorizontalAlignment.Center
verticalAlignment: VerticalAlignment.Center
Label {
id: lblHeader
textStyle.fontSize: FontSize.XLarge
text: "header"
}
}
}
Related
I'm trying to set something up, where there's a a HorizontalHeaderView that spans the entire width of the window, and a TableView that also spans the entire width of the window, along with stretching down to the bottom of the window. I also wanted a TextField and Button side by side, to sit on top of all this.
So far, I've gotten the TextField and Button to sit at the top, and part of the HorizontalHeaderView to be visible, but the TableView is completely invisible. I've tried fiddling around with height, Layout.preferredHeight, etc. but nothing makes it stretch to the bottom and fill the width of the window.
Here's what I've got so far:
import QtQuick 6.0
import QtQuick.Controls.Basic 6.0
import QtQuick.Layouts 6.0
ApplicationWindow {
title: "Portmod"
width: 640
height: 480
visible: true
header: TabBar {
id: mainTabBar
width: parent.width
TabButton {
text: "Manage"
width: implicitWidth
}
TabButton {
text: "Search"
width: implicitWidth
}
}
StackLayout {
id: mainStackLayout
currentIndex: mainTabBar.currentIndex
ColumnLayout {
id: manageTab
RowLayout {
TextField {
placeholderText: "Filter packages..."
}
Button {
text: "Filter"
}
}
HorizontalHeaderView {
id: installedPackagesHeader
syncView: installedPackagesTable
}
TableView {
id: installedPackagesTable
columnSpacing: 1
rowSpacing: 1
clip: true
model: installedPackagesModel
Keys.onUpPressed: installedPackagesTableVerticalScrollBar.decrease()
Keys.onDownPressed: installedPackagesTableVerticalScrollBar.increase()
Keys.onLeftPressed: installedPackagesTableHorizontalScrollBar.decrease()
Keys.onRightPressed: installedPackagesTableHorizontalScrollBar.increase()
ScrollBar.vertical: ScrollBar {
id: installedPackagesTableVerticalScrollBar
parent: installedPackagesTable
}
ScrollBar.horizontal: ScrollBar {
id: installedPackagesTableHorizontalScrollBar
parent: installedPackagesTable
}
delegate: Rectangle {
implicitWidth: 300
implicitHeight: 25
Text {
text: display
anchors.left: parent.left
}
}
}
}
Rectangle {
id: searchTab
width: parent.parent.width
height: parent.parent.height
}
}
}
Here's my custom QSortFilterProxyModel and QAbstractItemModel:
class InstalledPackagesProxyModel(QSortFilterProxyModel):
def __init__(self, data: list[list]) -> None:
super().__init__()
self.realModel = InstalledPackagesModel(data)
self.setSourceModel(self.realModel)
def get_atom(self, index: QModelIndex) -> Atom:
"""
Returns a reference to the source index instead of proxy index, to handle the sorted view.
"""
mapped_index = self.mapToSource(index)
data = [tuple(pkg_data_list) for pkg_data_list in self.realModel._data]
return Atom(f"{data[mapped_index.row()][2]}/{data[mapped_index.row()][0]}")
class InstalledPackagesModel(QAbstractTableModel):
def __init__(self, data: list[list]):
super(InstalledPackagesModel, self).__init__()
self._data = data
self.header_labels = ["Name", "Use Flags", "Category", "Version"]
def data(self, index, role):
if role == Qt.DisplayRole: # type: ignore
value = self._data[index.row()][index.column()]
if isinstance(value, Atom):
return str(value)
return value
def rowCount(self, index):
return len(self._data)
def columnCount(self, index):
try:
return len(self._data[0])
# If there are no installed mods in the prefix
except IndexError:
return 1
def headerData(self, section, orientation, role=Qt.DisplayRole): # type: ignore
if role == Qt.DisplayRole and orientation == Qt.Horizontal: # type: ignore
return self.header_labels[section]
return QAbstractTableModel.headerData(self, section, orientation, role)
This is what it looks like:
You need to use anchors.fill: parent on the StackView so it fills out its parent and has a proper size. Furthermore the HorizontalHeaderView needs to get a implicitHeight and the TableView should set Layout.fillWidth and Layout.fillHeight to true.
You need to use Layout.fillWidth and Layout.fillHeight to span to the full width and height of layouts.
import QtQuick 6.0
import QtQuick.Controls.Basic 6.0
import QtQuick.Layouts 6.0
import Qt.labs.qmlmodels 1.0
ApplicationWindow {
title: "Portmod"
width: 640
height: 480
visible: true
header: TabBar {
id: mainTabBar
width: parent.width
TabButton { text: "Manage" }
TabButton { text: "Search" }
}
StackLayout {
id: mainStackLayout
currentIndex: mainTabBar.currentIndex
anchors.fill: parent
ColumnLayout {
id: manageTab
Layout.fillWidth: true
RowLayout {
Layout.fillWidth: true
TextField {
Layout.fillWidth: true
placeholderText: "Filter packages..."
}
Button {
Layout.fillWidth: true
text: "Filter"
}
}
HorizontalHeaderView {
id: installedPackagesHeader
syncView: tableView
implicitHeight: 30
Layout.fillWidth: true
}
TableView {
id: tableView
Layout.fillWidth: true
Layout.fillHeight: true
columnSpacing: 1
rowSpacing: 1
clip: true
columnWidthProvider: function (column) {
return tableView.model ? tableView.width / tableView.model.columnCount : 0
}
rowHeightProvider: function (row) { return 30 }
onWidthChanged: tableView.forceLayout()
model: TableModel {
TableModelColumn { display: "name" }
TableModelColumn { display: "color" }
rows: [
{ "name": "cat", "color": "black" },
{ "name": "dog", "color": "brown" },
{ "name": "bird", "color": "white" }
]
}
delegate: Rectangle {
Text {
text: display
anchors.left: parent.left
}
}
}
}
Rectangle {
id: searchTab
Layout.fillWidth: true
Layout.fillHeight: true
color: "red"
}
}
}
I figured out that I needed to set the columnWidthProvider to this:
return Window.width / installedPackagesTableView.model.columnCount()
This is my full code for the TableView:
TableView {
id: installedPackagesTableView
property int selectedRow: 0
focus: true
columnSpacing: 1
rowSpacing: 1
clip: true
model: installedPackagesModel
columnWidthProvider: function () {
return Window.width / installedPackagesTableView.model.columnCount()
}
rowHeightProvider: function (row) {
return 30;
}
onWidthChanged: installedPackagesTableView.forceLayout()
Layout.fillWidth: true
Layout.fillHeight: true
Keys.onUpPressed: function () {
if (selectedRow != 0) {
selectedRow -= 1;
}
// Move scrollbar up if the selectedRow is going to be invisible
if (selectedRow == topRow) {
installedPackagesTableVerticalScrollBar.decrease()
}
}
Keys.onDownPressed: function () {
if (selectedRow != installedPackagesModel.rowCount() - 1) {
selectedRow += 1;
// Move scrollbar down if the selectedRow is going to be invisible
if (selectedRow == bottomRow) {
installedPackagesTableVerticalScrollBar.increase()
}
}
}
Keys.onReturnPressed: installedPackagesModel.getAtom(selectedRow)
ScrollBar.vertical: ScrollBar {
id: installedPackagesTableVerticalScrollBar
}
ScrollBar.horizontal: ScrollBar {
id: installedPackagesTableHorizontalScrollBar
}
delegate: ItemDelegate {
highlighted: row == installedPackagesTableView.selectedRow
onClicked: installedPackagesTableView.selectedRow = row
onDoubleClicked: installedPackagesModel.getAtom(row)
text: model.display
}
}
Here is a way I'm using ToolButton as a delegate :
import QtQuick 2.11
import QtQuick.Controls 2.4
ListView {
id : menuButtonslayout
anchors.top : menuHeader.bottom
anchors.left: menuHeader.left
height : (menuContainerComponentItem.height - menuHeader.height)*0.6
width : menuHeader.width
model: menuButtonsIdsModel
delegate : Component {
Item {
height : menuButtonslayout.height*0.15
width : menuButtonslayout.width
ToolButton {
anchors.fill: parent
icon.source: menuItemIcon
text : qsTr(menuItemName)
font.family: "Helvetica"
font.bold: true
antialiasing: true
}
}
}
}
How can I specify button text and icon alignment? I don't see any properties for this. By default icon and label are centered inside a button. And I'd like them aligned in a RowLayout way.
It is possible to modify the rendering of the content thanks to the contentItem property (source: https://doc.qt.io/qt-5/qtquickcontrols2-customize.html#customizing-toolbutton).
ToolButton {
id: control
anchors.fill: parent
icon.source: menuItemIcon
text: qsTr(menuItemName)
font.family: "Helvetica"
font.bold: true
antialiasing: true
contentItem: Item {
Row {
//anchors.horizontalCenter: parent.horizontalCenter
spacing: 5
Image {
source: control.icon.source
width: control.icon.width
height: control.icon.height
anchors.verticalCenter: parent.verticalCenter
}
Text {
text: control.text
font: control.font
anchors.verticalCenter: parent.verticalCenter
}
}
}
}
The final solution looks as follows :
delegate : Component {
Item {
height : menuButtonslayout.height*0.15
width : menuButtonslayout.width
ToolButton {
id : menuButton
anchors.fill: parent
icon.source: menuItemIcon
text : qsTr(menuItemName)
font.family: "Helvetica"
font.bold: true
antialiasing: true
contentItem: Item {
Row {
anchors.fill: parent
spacing : parent.width*0.05
leftPadding: parent.width*0.25
Image {
id : menuButtonIcon
source: menuButton.icon.source
width: menuButton.icon.width
height: menuButton.icon.height
anchors.verticalCenter: parent.verticalCenter
ColorOverlay {
anchors.fill: menuButtonIcon
source: menuButtonIcon
color: "white"
}
}
Label {
text: menuButton.text
font: menuButton.font
anchors.verticalCenter: parent.verticalCenter
}
}
}
onClicked: {
switch ( index ) {
case 0 :
contactItemAddPage.open();
break;
}
}
}
}
}
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
import QtQuick 2.0
import Qt.labs.folderlistmodel 2.0
Item
{
Component {
id: highlight
Rectangle {
id: rooot
width: 180; height: 20
color: ListView.isCurrentItem ? "black" : "red"; radius: 5
y: list.currentItem.y
Behavior on y {
SpringAnimation {
spring: 3
damping: 0.2
}
}
}
}
ListView {
id: list
width: 480; height: 400
model: folderModel
delegate: Text { id: h; text: fileName }
highlight: highlight
highlightFollowsCurrentItem: false
focus: true
}
FolderListModel
{
id: folderModel
folder: "/home/anisha/"
nameFilters: ["*"]
}
}
This works only when I use keyboard. How to make it work on mouse clicks?
To react on mouse events you need to place MouseArea item.
In the sample below (being an expanded version of the code you provided) I have added a MouseArea to the delegate item that upon being clicked sets the ListView's currentIndex to the delegate's index (a special property visible in the ListView's delegate).
import QtQuick 2.0
import Qt.labs.folderlistmodel 2.0
Item
{
Component {
id: highlight
Rectangle {
id: rooot
width: 180; height: 20
color: ListView.isCurrentItem ? "black" : "red"; radius: 5
y: list.currentItem.y
Behavior on y {
SpringAnimation {
spring: 3
damping: 0.2
}
}
}
}
ListView {
id: list
width: 480; height: 400
model: folderModel
delegate:
Text {
id: h;
text: fileName
MouseArea {
anchors.fill: parent
onClicked: list.currentIndex = index
}
}
highlight: highlight
highlightFollowsCurrentItem: false
focus: true
}
FolderListModel
{
id: folderModel
folder: "/home/anisha/"
nameFilters: ["*"]
}
}
As an alternative approach you might try placing a single MouseArea filling the whole ListView and use ListView's indexAt(int x, int y) method to check which delegate was clicked. However, you would need to care about more edge-conditions in such case.
UPDATE
I wanna implement the setting by swiping the top bezel, here's my code am I doing this right? Currently this doesn't work. I wanna know how to implement it. Where should I put the code for it, and what do I lack of so that it'll work?
import bb.cascades 1.0
NavigationPane {
//property variant menu;
Menu.definition: MenuDefinition {
settingsAction: SettingsActionItem {
imageSource: "asset:///images/navbar_icon_settings.png"
onTriggered: {
cppObj.onSettingsClicked();
}
}
actions: [
ActionItem {
title: "Action 1"
imageSource: "asset:///images/navbar_icon_settings.png"
onTriggered: {
cppObj.onSettingsClicked();
}
}
]
}
firstPage: Page {
Container {
background: Color.create("#f9f7f2");
layout: StackLayout {}
// Container for holding the title
Container {
horizontalAlignment: HorizontalAlignment.Center
layout: DockLayout {}
ImageView {
horizontalAlignment: HorizontalAlignment.Fill
verticalAlignment: VerticalAlignment.Fill
imageSource: "asset:///images/navigation_bar.png"
}
/*Container {
horizontalAlignment: HorizontalAlignment.Right
rightPadding: 30
topPadding: 40
layout: DockLayout {}
ImageButton {
id: btnsettings
verticalAlignment: VerticalAlignment.Center
defaultImageSource: "asset:///images/navbar_icon_settings.png"
onClicked: {
// show settings page when the button is clicked
cppObj.onSettingsClicked();
}
}
}*/
}
Container {
topPadding: 20
leftPadding: 20
rightPadding: 20
bottomPadding: 20
background: Color.create("#F4E9E1");
horizontalAlignment: HorizontalAlignment.Fill
layout: StackLayout {}
Label {
verticalAlignment: VerticalAlignment.Center
horizontalAlignment: HorizontalAlignment.Left
text: cppObj.name
textStyle {
// fontFamily: FontStyle.Default.Myriad
// fontSize: 36
color: Color.create("#60323C")
}
}
}
Container {
verticalAlignment: VerticalAlignment.Center
horizontalAlignment: HorizontalAlignment.Center
layout: DockLayout {}
Divider {}
ScrollView {
scrollViewProperties {
scrollMode: ScrollMode.Vertical
}
/* ImageView {
id: listviewbackground
verticalAlignment: VerticalAlignment.Center
horizontalAlignment: HorizontalAlignment.Center
scalingMethod: ScalingMethod.Fill
imageSource: "asset:///images/list_view_cell.png"
}*/
ListView {
id: lvprojects
dataModel: cppObj.model()
listItemComponents: [
ListItemComponent {
type: "item"
Container {
horizontalAlignment: HorizontalAlignment.Center
layout: DockLayout {}
touchPropagationMode: TouchPropagationMode.Full;
StandardListItem {
title:ListItemData.desc
}
}
}
]
onTriggered: {
var selectedItem = dataModel.data(indexPath);
onClicked: {
// show issue's comment page when the button is clicked
cppObj.onIssueClicked(selectedItem.name);
}
}
}
}
}
}
actions: [
ActionItem {
title: qsTr ("Add Issue")
imageSource: "asset:///images/actionbar_icon_add.png"
ActionBar.placement: ActionBarPlacement.OnBar
onTriggered: {
cppObj.onAddIssuesClicked();
}
},
ActionItem {
title: qsTr ("Issues")
imageSource: "asset:///images/actionbar_icon_issues.png"
ActionBar.placement: ActionBarPlacement.OnBar
onTriggered: {
cppObj.onIssuesClicked();
}
},
ActionItem {
title: qsTr ("Members")
imageSource: "asset:///images/actionbar_icon_members.png"
ActionBar.placement: ActionBarPlacement.OnBar
onTriggered: {
cppObj.onMembersClicked();
}
}
]
}
/*attachedObjects: [
ComponentDefinition {
id: settingsPage
source: "topsettings.qml"
}
]
onCreationCompleted: {
// Create the app menu for the cookbook.
menu = settingsPage.createObject();
}
onPopTransitionEnded: {
// Transition is done destroy the Page to free up memory.
page.destroy();
}*/
}
And here's the topsettings.qml
MenuDefinition {
settingsAction: SettingsActionItem {
imageSource: "asset:///images/navbar_icon_settings.png"
onTriggered: {
cppObj.onSettingsClicked();
}
}
Settings is not displayed:
Your code looks good: the only issue is that you try to define your Menu.definition in a Page, but you should be defining it in a Pane. See here for example: https://github.com/Kernald/tt-rss-bb10/blob/master/assets/main.qml#L9
By the way, note that you have predefined actions for Help and Settings. See the link before, I used them too.
Let's say you have the NavigationPane as the QML document loaded first upon application launch, so that's should be placed in MenuDefinition like that:
NavigationPane {
Menu.definition: MenuDefinition {
helpAction: HelpActionItem {
onTriggered: {
}
}
actions: [
ActionItem {
title: "Action 1"
imageSource: "asset:///images/ic_action1.png"
onTriggered: {
}
},
ActionItem {
title: "Action 2"
imageSource: "asset:///images/ic_action2.png"
onTriggered: {
}
}
]
}
firstPage: Page {
}
}
Note, that there might be up to 4 elements and HelpActionItem as well SettingsActionItem are already defined if you want to implement similar menu entries.