Develop Reference

How Change the default text edit cursor on android in my qt quick applicaton?

I want to change the default shape of text edit Cursor and it should be like below
TextArea {
id: txtTalk
anchors.fill: parent
leftPadding: 9
rightPadding: 9
wrapMode: TextArea.Wrap
color: Material.color(Material.Red,Material.Shade900)
background: Rectangle{
radius: 3
color: Material.color(Material.Red,Material.Shade50)
border.width: 1
border.color: Material.color(Material.Red,Material.Shade300)
}
}

The following code should do what you want. You could also add blinking animations, have look at this CursorDelegate example.
The only issue with SVG in QML is the poor aliasing. What you could do is compose the "pin" of two Rectangles one with rounded corners (radius property) and the other one rotated. Or you could have a look at how to get rid of aliasing with SVGs in QML.
Instead of using PathSVG you could also compose your pin icon of PathLine and PathArc.
Keep in mind that I didn't pay attention on dynamic placement of the pin and its scaling, I tweaked the values until it looked alright. Another thing would be to scale the pin in relation to your font size.
import QtQuick 2.0
import QtQuick.Controls 2.15
import QtQuick.Shapes 1.15
Item {
width: 640
height: 480
TextArea {
anchors.centerIn: parent
wrapMode: TextArea.Wrap
color: "gray"
font.pixelSize: 24
background: Rectangle{
implicitWidth: 300
implicitHeight: 200
radius: 3
color: "white"
border.width: 1
border.color: "black"
}
placeholderText: qsTr("Enter description")
cursorDelegate: Item {
width: 1
Rectangle {
id: rectangle
color: "black"
y: 1
width: 2
height: parent.height - 2
Shape {
x: -8
y: rectangle.height + 2
ShapePath {
fillColor: "red"
strokeWidth: -1
scale: Qt.size(0.2, 0.2)
PathSvg { path: "M 45,90 C 25.463,90 9.625,74.162 9.625,54.625 c 0,-8.722 3.171,-16.693 8.404,-22.861 L 45,0 71.97,31.765 c 5.233,6.167 8.404,14.139 8.404,22.861 C 80.375,74.162 64.537,90 45,90 Z" }
}
}
}
}
}
}

QML, the menu icon will does not show up correctly

The following standard QML code does not work. Instead of the 3 small bar menu icon (unicode u2630), I get a rectangle with a cross inside: it does not find the character. However it finds the u25C0 left arrow (back triangle button) when required.
This is only a cosmetic glitch, as it works perfectly.
Has this anything related to the font, or with a mapping to an icon? How to solve this?
import QtQuick 2.15
import QtQuick.Controls 2.15
ApplicationWindow {
id: window
width: 640
height: 480
visible: true
title: qsTr("Stack")
header: ToolBar {
contentHeight: toolButton.implicitHeight
ToolButton {
id: toolButton
text: stackView.depth > 1 ? "\u25C0" : "\u2630"
font.pixelSize: Qt.application.font.pixelSize * 1.6
onClicked: {
if (stackView.depth > 1) {
stackView.pop()
} else {
drawer.open()
}
}
}
Label {
text: stackView.currentItem.title
anchors.centerIn: parent
}
}
(...)

For those who come here from search I will leave here the answer from a Qt.io forum
https://forum.qt.io/topic/123877/stackview-icon-on-android

QT Android Gboard overlaps input fields

Since the last update of the Gboard Qt seems to have issues with detecting it and push input fields above it accordingly.
Gboard version: 9.7.09.323382208-tv_release-armeabi-v7a
I have a minimal code example in which it can be easily reproduced:
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
ApplicationWindow {
width: 1920
height: 1080
visibility: Window.Maximized
color: "#C0C0C0"
Item
{
width: 1920 * 0.7
height: 1080 * 0.8
Item {
width: parent.width
height: parent.height * 0.4
id: we
}
TextField
{
id: input1
width: parent.width
focus: true
anchors.top: we.bottom
onAccepted: input2.focus = true
Keys.onPressed:
{
switch (event.key) {
case Qt.Key_Tab:
case Qt.Key_Down:
event.accepted = true
input2.forceActiveFocus()
break
}
}
}
TextInput
{
id: input2
width: parent.width
anchors.top: input1.bottom
maximumLength: 40
Keys.onPressed:
{
switch (event.key) {
case Qt.Key_Tab:
case Qt.Key_Down:
event.accepted = true
break
case Qt.Key_Up:
event.accepted = true
input1.forceActiveFocus()
break
}
}
}
}
}
I tried to build with Qt versions: 5.12.9, 5.13.2, 5.14.2, 5.15.1 and all have the same issue. However an empty project from Android studio will push the input fields correctly, so the issue must be Qt related.
I also tried to set android:windowSoftInputMode="adjustPan" but it had no effect at all.
What I found is the Qt showSoftwareKeyboard method in QtActivityDelegate.java, I assume it's responsible for displaying the keyboard and adjusting the layouts, so I tried to play around with it a bit (setting some hard-coded values e.g. m_layout.setLayoutParams(m_editText, new QtLayout.LayoutParams(width, 680, 30, 500), false)), rebuild Qt with the changes, but with no success or visible changes, it does print out my custom logs so the changes did apply correctly.
Any ideas how to make it push the input fields?

QML: Why my buttons at the bottom are under the lower Android button bar, before creen rotation

In the code below, the row of buttons shows behing the Android lower bar of button (triangle, circle, square). When I rotate, everything is fine. When I rotate back, everything is fine too.
So it is only the first time that something goes wrong.
Any idea ?
import QtQuick 2.4
import QtQuick.Controls 2.15
import QtQuick.Window 2.15
Item {
property alias unit_add: unit_add
width: Screen.desktopAvailableWidth
height: Screen.desktopAvailableHeight
ListView {
(...)
}
Row {
id: buttons
width: parent.width
height: 43
visible: true
spacing: 16
anchors.bottom: parent.bottom
anchors.topMargin: 10
anchors.bottomMargin: 10
anchors.horizontalCenter: parent.horizontalCenter
Button {
id: unit_add
text: qsTr("Add")
}
Button {
id: unit_delete
text: qsTr("Delete")
}
Button {
id: unit_edit
text: qsTr("Edit")
}
}
}

Cant get button to appear

I'm trying to make some sort of fotboll app for android. The problem i'm facing right now, is that I need to make a button in the corner of the screen, (4 different) which you move the game character with. But I've made 1 button now, for moving up, but it doesnt appear on the screen.
Main file:
import QtQuick 2.0
import QtQuick.Window 2.1
Item {
id:root
width:Screen.width
height:Screen.height-10
focus:true
Keys.onPressed: {
if(event.key===Qt.Key_Up)
{
event.accepted = true;
player.y=(player.y) - 40
}
if(event.Key === Qt.Key_Down){
event.accepted = true;
player.y = (player.y)+ 40
}
if (event.key === Qt.Key_Right)
{ event.accepted=true;
player.x=(player.x)+40
}
if (event.key === Qt.Key_Left)
{event.accepted = true;
player.x=(player.x) -40
}
}
Flickable {
width:Screen.width
height:Screen.height
contentHeight: Screen.height*2
contentWidth:Screen.width
interactive:true
boundsBehavior: Flickable.StopAtBounds
contentY: Math.min(contentHeight-height, Math.max(0, player.y-height/2))
contentX: Math.min(contentWidth-width, Math.max(0, player.x-width/2))
Image{
id: feild
anchors.fill:parent
source:"Namnlös.png"
sourceSize.height:Screen.height*2
sourceSize.width:Screen.width
}
Image {
id: player
source:"asd.png"
x:Screen.width/2
y:Screen.height/2
}
}
}
Button file:
import QtQuick 2.0
import QtQuick.Window 2.1
Rectangle {
id: simplebutton
color: "grey"
width: 100; height: 50
Text {
id: buttonLabel
anchors.centerIn: parent
text: "Up"
}
MouseArea {
id: buttonMouseArea
anchors.fill: parent
onClicked: console.log(buttonLabel.text + "clicked" )
}
}
Rectangle {
id: button
property color buttonColor: "lightblue"
property color onHoverColor: "gold"
property color borderColor: "white"
signal buttonClick()
onButtonClick: {
console.log(buttonLabel.text + " clicked" )
}
MouseArea {
onClicked: buttonClick()
hoverEnabled: true
onEntered: parent.border.color = onHoverColor
onExited: parent.border.color = borderColor
}
color: buttonMouseArea.pressed ? Qt.darker(buttonColor, 1.5) : buttonColor
}

Two things:
1) You need to add your button to your layout! Since there you don't add your button into your main file, it won't appear.
2) You need to split your Button file into two separate qml file, since you can only have one "root" item per file.