How can I change the color of the line that highlites the selected tab in the TabBar?
According to #jpnurmi's comment, the best and easiest solution here is to utilize QtQuick.Controls.Material:
import QtQuick.Controls.Material 2.0
and then you can set Material.accent for TabBar:
TabBar {
Material.accent: Material.Red
}
You need to customize the TabBar.
See the documentation:
http://doc.qt.io/qt-5/qtquickcontrols2-customize.html#customizing-tabbar
http://doc.qt.io/qt-5/qtquickcontrols2-customize.html#customizing-tabbutton
http://doc.qt.io/qt-5/qtquickcontrols2-customize.html#customizing-button
As it is written there, the TabButtons have a background and a contentItem.
You can assign your own delegates to those properties as seen in the documentation example. In your case you probably need a tailored Rectangle as background.
You can use the different properties of the TabButton to define styles for all their states.
Related
I am making a layout in QML and I want to give my Label the same padding as an ItemDelegate.
How can I get the standard padding value of an ItemDelegate?
Thank you in advance!
Firstly, you'll need an instance of an ItemDelegate. If you don't have one, you can create one and set its visible property to false:
ItemDelegate {
id: itemDelegate
visible: false
}
Some of the built-in styles change as the design guidelines they're based on change, so it's not a good idea to hard-code the padding based on a style's current padding values unless you have control over that style.
In addition, each style sets a different default padding, and may also use different properties to do so. The following properties can be used to control padding, starting with the most general and ending with the most specific:
padding
horizontalPadding (available in Qt 5.12)
verticalPadding (available in Qt 5.12)
leftPadding
rightPadding
topPadding
bottomPadding
Because of this, the only way to guarantee that you'll get the correct padding for each side of the control is to use the most specific properties:
Label {
leftPadding: itemDelegate.leftPadding
rightPadding: itemDelegate.rightPadding
topPadding: itemDelegate.topPadding
bottomPadding: itemDelegate.bottomPadding
}
When I use any method to select one of non-Default (or Base) styles in Qt Quick Controls 2 application (i.e. Universal or Material), then all the controls with text (like Label, TextField, whose font size must depend on QGuiApplication::font) uses font size value, which QCoreApplication has before changing:
QFont font = application.font();
bool ok = false;
font.setPointSize(QSettings{}.value("fontSize", 17).toInt(&ok));
Q_ASSERT(std::exchange(ok, false));
application.setFont(font);
Only Text, TextField are resized properly, but they are of no use in my GUI.
When I stick Default style, then all the mentioned items are resized properly.
How to make all the items be resized depending on global font.pointSize when used styles, other then Default?
Another connected question is how to get proper (means "contrast" and style-conformant) color for, say, highlighted text and background for the current style theme used? Using SystemPalette { id: palette } from ApplicationWindow in children gives colors suitable only for Default style (say palette.highlightedText is "white", palette.highlight is "blue" or "darkblue" (not sure)). It looks ugly in style themes, differs from Default.
Another important observation is: if I set font.pointSize: 17 (or equally font: Qt.application.font) in root ApplicationWindow, then all the items are resized properly, except of those of them which have new context: say, highlight: and delegate:s into *Views, sourceComponent:s into Loaders, default property item of Component and Repeater and others, where inheritance of the font breaks due to lost of the parent Item's context.
It seems, that I should to manually "inherit" ApplicationWindow.window.font for each new context. It is sad if so. It is boring, if e.g. in Repeater I use RowLayout with a plenty of Labels: in each of Label I have to add font: ApplicationWindow.window.font.
Orient, I know it is too late, but one can also set font size in QApplication like this:
QFont font = QApplication::font();
font.setPointSizeF(fontSize);
QApplication::setFont(font);
This question is a little specific, but I've been unable to find someone with the same problem or a clean solution to the problem.
I'm creating a Qt Quick program, and I want to use a QListView as it appears in QtWidgets. This QtWidgets program has three such views, with checkable items (which is optional: not all QListViews have checkable items).
Because Qt Quick Components doesn't appear to have a QListView equivalent, I set out to make my own from existing components. And the result is ... meh. It looks like this and doesn't exactly behave in the same fashion. Clicking on the text/whitespace of an item checks the item, instead of highlighting it. And the border is just ugly, and doesn't appear in GTK-themed environments. It also doesn't obey custom desktop themes, because the background of the items will always be white.
The code for this custom component is fairly brief, and looks like this:
import QtQuick 2.4
import QtQuick.Controls 1.3
// GroupBox creates a border... most of the time. Not in GTK envs
GroupBox {
id: root
property var model: null
// This wraps the ListView up with a scrollbar
ScrollView {
anchors.fill: parent
ListView { // This is the view component
anchors.fill: parent
model: root.model
// This is the white box that the CheckBox is drawn on
delegate: Rectangle {
width: parent.width
height: box.height
// This is the actual item
CheckBox {
id: box
anchors.fill: parent
text: thing // `thing` is just a placeholder value from the model
}
}
}
}
}
Use a QApplication instead of a QGuiApplication. It will require you to add widgets support (and ship Qt widgets libs). This way, Qt Quick Components will automatically get access to much more system theming like background color in text selection.
Additionally, SystemPalette will provide you with a bunch of native colors that you can use if you want.
Unsatisfying system integration using QGuiApplication:
Nice integration using QApplication:
I want to paint controls directly into TextEdit. It is easy, but the problem is i need to have space for them, so they are not painted over the text.
For example (the whole line is representing what will be shown in TextEdit and the highlighted code should be qml component):
Here is button: button and here is text again.
I need somehow to reserve space for the button between Here is button: and and here is text again.
It looks like Qt qml doesn't provide any way how to specify font metrics (in that case i could ask the component what it's width is and just add
one whitespace char with properly setup font and its metrics and than
specify component coordinates so it is painted exactly where the space is).
I did it in Java SWT, because SWT StyledText allows to setup metrics for each character. So this is example how it should look.
You can use HTML markup in TextEdit
TextEdit {
textFormat: TextEdit.RichText
text: "<font size=50>text</font>"
}
I use QtQuick 1.1 and I have an item like this below:
Item {
id: myItem
width: 12345
height: 12345
//...
}
When I run my qml project, it doesn't show any scroll bar for this item (horizental and vertical).
How can i add scroll bar to it? And if I use Qt and QML together (using a QWidget and QDeclarativeView on it), then what's the solution?
Making UI using qml is kind of UI paradigm shift when compared to making desktop widgets. What you are expecting is a normal desktop widget behavior, which is absent in the most mobile platforms UIs. In them, usually, scroll bars are associated with the lists and not with complete pages.
You can however implement that in qml as well. You can have the top element as flickable instead of a rectangle, and the show the scroll bars yourself based on flicks on the page. Try to go through the qml RSSfeed example to understand how you can use combination of flickable and other elements to achieve this.
P.S. : Also, see the qml desktop components introduced in Qt5. They will give you the widget behavior. See if it fits what you want.
But again, you should ask yourself, what exactly are you trying to achieve here ?