wep开发和网站开发,软件网站开发评估,市场监督管理局,新公司建网站目录 效果展示适用场景文本组件TextLabelText和Label的区别 单行文本输入框TextFieldTextInputTextField 和 TextInput的区别 多行文本输入框TextAreaTextArea 和 TextEdit 的区别 效果展示 适用场景
场景组件属性短文本Text长文本 末尾省略Textelide: Text.ElideRight文本设置… 目录 效果展示适用场景文本组件TextLabelText和Label的区别 单行文本输入框TextFieldTextInputTextField 和 TextInput的区别 多行文本输入框TextAreaTextArea 和 TextEdit 的区别 效果展示 适用场景
场景组件属性短文本Text长文本 末尾省略Textelide: Text.ElideRight文本设置底色Labelbackground文本输入框TextField多行文本输入框TextArea
文本组件
Text Text {text: Textfont.pixelSize: 20
} Text {text: TextTextTextTex1TextTextTextTextTex1Textfont.pixelSize: 20width: 200// selectByMouse // dont have this propertyelide: Text.ElideRight // 长文本末尾省略符ToolTip.text: This is ToolTip // import QtQuick.Controls 2.15ToolTip.visible: mouseArea.containsMouseMouseArea {id: mouseAreaanchors.fill: parenthoverEnabled: true}}Label Label {text: Labelfont.pixelSize: 20
} Label {text: Labelfont.pixelSize: 20background: Rectangle {color: Green}
}Text和Label的区别
Text是最简单的文本Label继承自Text, 拓展了属性比如background
单行文本输入框
TextField TextField {placeholderText: qsTr(TextField)font.pixelSize: 20horizontalAlignment: Text.AlignLeftselectByMouse: true // 鼠标可以选中文本
} TextField {placeholderText: qsTr(TextField)font.pixelSize: 20horizontalAlignment: Text.AlignHCenter// 输入框回显方式echoMode: TextInput.Password
}TextInput TextField 和 TextInput的区别
最常使用的是TextField, 界面美观功能强大TextField继承自TextInput, 主要区别是外框
多行文本输入框
TextArea ScrollView {width: 400height: 100TextArea {anchors.fill: parentwrapMode: TextEdit.WrapselectByMouse: truefont.pixelSize: 18text:Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo cosnsequat. ;}
}ScrollView {width: 400height: 100TextArea {anchors.fill: parentwrapMode: TextEdit.WrapselectByMouse: truefont.pixelSize: 18text:Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo cosnsequat. ;}// 添加边框background: Rectangle{color: transparentborder.color: #626262}
}TextArea 和 TextEdit 的区别
主要使用TextAreaTextArea继承自TextEdit, 拓展了属性 尤其是background
