qiurui
/
qtdeclarative
mirror of https://github.com/qt/qtdeclarative.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update Material TextArea to Material 3 

Fixes: QTBUG-110231
Pick-to: 6.5
Change-Id: I8b6e5a2bc8e91c7003206e8a651b133f3a541617
Reviewed-by: Richard Moe Gustavsen <richard.gustavsen@qt.io>
Reviewed-by: Oliver Eftevaag <oliver.eftevaag@qt.io>
This commit is contained in:
Mitch Curtis 2023-01-16 17:34:00 +08:00
parent 60ebb044c8
commit 5704741a40
6 changed files with 170 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/quickcontrols/material/TextArea.qml
View File

@ -14,37 +14,58 @@ T.TextArea {
implicitBackgroundWidth + leftInset + rightInset,
placeholder.implicitWidth + leftPadding + rightPadding)
implicitHeight: Math.max(contentHeight + topPadding + bottomPadding,
implicitBackgroundHeight + topInset + bottomInset,
placeholder.implicitHeight + 1 + topPadding + bottomPadding)
implicitBackgroundHeight + topInset + bottomInset)
topPadding: 8
bottomPadding: 16
leftPadding: Material.textFieldHorizontalPadding
rightPadding: Material.textFieldHorizontalPadding
// Need to account for the placeholder text when it's sitting on top.
topPadding: Material.containerStyle === Material.Filled && placeholderText.length > 0 && (activeFocus || length > 0)
? Material.textFieldVerticalPadding + placeholder.largestHeight
// When the condition above is not met, the text should always sit in the middle
// of a default-height TextArea, which is just near the top for a higher-than-default one.
: (implicitBackgroundHeight - placeholder.largestHeight) / 2
bottomPadding: Material.textFieldVerticalPadding
color: enabled ? Material.foreground : Material.hintTextColor
selectionColor: Material.accentColor
selectedTextColor: Material.primaryHighlightedTextColor
placeholderTextColor: Material.hintTextColor
Material.containerStyle: Material.Outlined
cursorDelegate: CursorDelegate { }
PlaceholderText {
FloatingPlaceholderText {
id: placeholder
x: control.leftPadding
y: control.topPadding
width: control.width - (control.leftPadding + control.rightPadding)
height: control.height - (control.topPadding + control.bottomPadding)
text: control.placeholderText
font: control.font
color: control.placeholderTextColor
verticalAlignment: control.verticalAlignment
elide: Text.ElideRight
renderType: control.renderType
visible: !control.length && !control.preeditText && (!control.activeFocus || control.horizontalAlignment !== Qt.AlignHCenter)
filled: control.Material.containerStyle === Material.Filled
verticalPadding: control.Material.textFieldVerticalPadding
controlHasActiveFocus: control.activeFocus
controlHasText: control.length > 0
controlImplicitBackgroundHeight: control.implicitBackgroundHeight
}
background: Rectangle {
y: parent.height - height - control.bottomPadding / 2
background: MaterialTextContainer {
implicitWidth: 120
height: control.activeFocus ? 2 : 1
color: control.activeFocus ? control.Material.accentColor : control.Material.hintTextColor
implicitHeight: control.Material.textFieldHeight
filled: control.Material.containerStyle === Material.Filled
fillColor: control.Material.textFieldFilledContainerColor
outlineColor: (enabled && control.hovered) ? control.Material.primaryTextColor : control.Material.hintTextColor
focusedOutlineColor: control.Material.accentColor
// When the control's size is set larger than its implicit size, use whatever size is smaller
// so that the gap isn't too big.
placeholderTextWidth: Math.min(placeholder.width, placeholder.implicitWidth) * placeholder.scale
controlHasActiveFocus: control.activeFocus
controlHasText: control.length > 0
placeholderHasText: placeholder.text.length > 0
horizontalPadding: control.Material.textFieldHorizontalPadding
}
}

19
tests/auto/quickcontrols/controls/data/tst_textarea.qml
View File

@ -4,6 +4,7 @@
import QtQuick
import QtTest
import QtQuick.Controls
import Qt.test.controls
TestCase {
id: testCase
@ -210,16 +211,22 @@ TestCase {
if (data.textAlignment !== undefined)
compare(control.horizontalAlignment, data.textAlignment)
for (var i = 0; i < control.children.length; ++i) {
if (control.children[i].hasOwnProperty("horizontalAlignment"))
compare(control.children[i].effectiveHorizontalAlignment, data.placeholderAlignment) // placeholder
// The placeholder text of the Material style doesn't currently respect the alignment of the control.
if (StyleInfo.styleName !== "Material") {
for (var i = 0; i < control.children.length; ++i) {
if (control.children[i].hasOwnProperty("horizontalAlignment"))
compare(control.children[i].effectiveHorizontalAlignment, data.placeholderAlignment) // placeholder
}
}
control.verticalAlignment = TextArea.AlignBottom
compare(control.verticalAlignment, TextArea.AlignBottom)
for (var j = 0; j < control.children.length; ++j) {
if (control.children[j].hasOwnProperty("verticalAlignment"))
compare(control.children[j].verticalAlignment, Text.AlignBottom) // placeholder
if (StyleInfo.styleName !== "Material") {
for (var j = 0; j < control.children.length; ++j) {
if (control.children[j].hasOwnProperty("verticalAlignment"))
compare(control.children[j].verticalAlignment, Text.AlignBottom) // placeholder
}
}
}

8
tests/auto/quickcontrols/qquicktextarea/tst_qquicktextarea.cpp
View File

@ -86,9 +86,11 @@ void tst_QQuickTextArea::touchscreenDoesNotSelect()
if (selectByMouse) {
// press-drag-and-release from x1 to x2
int x1 = 10;
int x2 = 70;
int y = QFontMetrics(textEditObject->font()).height() / 2;
const int x1 = textEditObject->leftPadding();
const int x2 = textEditObject->width() / 2;
// Account for all styles by being aware of vertical padding.
// contentHeight / 2 should be half the line height considering that we only have one line of text.
const int y = textEditObject->topPadding() + textEditObject->contentHeight() / 2;
QTest::touchEvent(&window, touchDevice.data()).press(0, QPoint(x1,y), &window);
QTest::touchEvent(&window, touchDevice.data()).move(0, QPoint(x2,y), &window);
QTest::touchEvent(&window, touchDevice.data()).release(0, QPoint(x2,y), &window);

1
tests/manual/quickcontrols/material/CMakeLists.txt
View File

@ -24,6 +24,7 @@ set(qmake_immediate_resource_files
"pages/DelayButtonPage.qml"
"pages/RoundButtonPage.qml"
"pages/SwitchPage.qml"
"pages/TextAreaPage.qml"
"pages/TextFieldPage.qml"
"qmldir"
)

2
tests/manual/quickcontrols/material/material.qml
View File

@ -97,7 +97,7 @@ ApplicationWindow {
focus: true
currentIndex: settings.currentControlIndex
anchors.fill: parent
model: ["Button", "DelayButton", "RoundButton", "Switch", "TextField"]
model: ["Button", "DelayButton", "RoundButton", "Switch", "TextArea", "TextField"]
delegate: ItemDelegate {
width: listView.width
text: modelData

116
tests/manual/quickcontrols/material/pages/TextAreaPage.qml Normal file
View File

@ -0,0 +1,116 @@
// Copyright (C) 2022 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import QtQuick.Controls.Material
import QtQuick.Layouts
import ".."
Page {
topPadding: Constants.pageTopPadding
// Component.onCompleted: Material.background = "red"
component TextAreaFlow: Flow {
id: layout
spacing: 40
required property int containerStyle
TextArea {
Material.containerStyle: layout.containerStyle
}
TextArea {
placeholderText: "placeholderText"
Material.containerStyle: layout.containerStyle
}
TextArea {
text: "text"
Material.containerStyle: layout.containerStyle
}
TextArea {
text: "text\nmore text"
Material.containerStyle: layout.containerStyle
}
TextArea {
text: "text"
placeholderText: "placeholderText"
Material.containerStyle: layout.containerStyle
}
TextArea {
text: "text\nmore text"
placeholderText: "placeholderText"
Material.containerStyle: layout.containerStyle
}
TextArea {
placeholderText: "Disabled placeholder"
enabled: false
Material.containerStyle: layout.containerStyle
}
TextArea {
text: "Disabled text"
enabled: false
Material.containerStyle: layout.containerStyle
}
TextArea {
text: "Disabled text\nMore text"
enabled: false
Material.containerStyle: layout.containerStyle
}
TextArea {
text: "text"
placeholderText: "placeholderText"
enabled: false
Material.containerStyle: layout.containerStyle
}
TextArea {
text: "text\nmore text"
placeholderText: "placeholderText"
enabled: false
Material.containerStyle: layout.containerStyle
}
}
ColumnLayout {
width: parent.width
Label {
text: "Filled"
}
TextAreaFlow {
containerStyle: Material.Filled
Layout.fillWidth: true
Layout.bottomMargin: 40
}
Label {
text: "Outlined"
}
TextAreaFlow {
containerStyle: Material.Outlined
Layout.fillWidth: true
}
}
}