一、介绍
手机微信聊天的时候,当我们在消息输入框输入很长一段文本时,输入超过一行时输入框会自动增大高度,当输入框达到最高高度时,文本自动向上滚动,如图:
右侧出现滚动条,当我们再输入满一行的时候文本会自动向上滚动。用qml实现这个功能非常简单,只需要用到 ScrollView 和 TextArea 这两个控件就能实现。
二、源码
环境 Qt5.9 + win10
import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
Window {
visible: true
width: 640
height: 480
ScrollView {
id: scView
anchors.centerIn: parent
width: 200; height: 24 // 初始高度就是一行
background: Rectangle {
anchors.fill: parent
border.color: "gray"
radius: 5
}
TextArea {
id: contentText
property int preContentHeight: 0
wrapMode: TextArea.Wrap; selectByMouse: true;
onContentHeightChanged: {
//每一行为高度为14, 当输入大于3行的时候自动滚动
if(contentHeight > 14 && contentHeight < 56) {
if(contentHeight != preContentHeight) {
preContentHeight = contentHeight;
scView.height += 14;
}
}
}
}
}
}
效果图: