mirror of
https://github.com/zhuzichu520/FluentUI.git
synced 2024-11-23 11:17:15 +08:00
Merge pull request #248 from FeJQ/FluNavigationView-pr
补交漏掉的FluEditableText.qml
This commit is contained in:
commit
efd21a5f55
@ -7,6 +7,12 @@ FluObject{
|
||||
|
||||
property var navigationView
|
||||
|
||||
function rename(item, newName){
|
||||
if(newName && newName.trim().length>0){
|
||||
item.title = newName;
|
||||
}
|
||||
}
|
||||
|
||||
FluPaneItem{
|
||||
id:item_home
|
||||
count: 9
|
||||
@ -21,11 +27,48 @@ FluObject{
|
||||
}
|
||||
navigationView.push("qrc:/example/qml/page/T_Home.qml")
|
||||
}
|
||||
rightMenu: FluMenu{
|
||||
property string renameText : "重命名"
|
||||
id:nav_item_right_menu
|
||||
enableAnimation: false
|
||||
width: 120
|
||||
|
||||
FluMenuItem{
|
||||
text: nav_item_right_menu.renameText
|
||||
visible: true
|
||||
onClicked: {
|
||||
item_home.editable = true;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
onTitleEdited:function(newText){
|
||||
rename(item_home,newText)
|
||||
}
|
||||
}
|
||||
|
||||
FluPaneItemExpander{
|
||||
id:item_expander_basic_input
|
||||
title:lang.basic_input
|
||||
icon:FluentIcons.CheckboxComposite
|
||||
|
||||
rightMenu: FluMenu{
|
||||
property string renameText : "重命名"
|
||||
id:nav_item_expander_right_menu
|
||||
enableAnimation: false
|
||||
width: 120
|
||||
|
||||
FluMenuItem{
|
||||
text: nav_item_expander_right_menu.renameText
|
||||
visible: true
|
||||
onClicked: {
|
||||
item_expander_basic_input.editable = true;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
onTitleEdited:function(newText){ rename(item_expander_basic_input,newText)}
|
||||
|
||||
FluPaneItem{
|
||||
id:item_buttons
|
||||
count: 99
|
||||
|
91
src/imports/FluentUI/Controls/FluEditableText.qml
Normal file
91
src/imports/FluentUI/Controls/FluEditableText.qml
Normal file
@ -0,0 +1,91 @@
|
||||
import QtQuick
|
||||
import FluentUI
|
||||
Item {
|
||||
id:root
|
||||
property bool editable: false
|
||||
property string text: ""
|
||||
property int elide
|
||||
property color color
|
||||
property color editBgColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(255/255,255/255,255/255,1)
|
||||
property color editTextColor: FluTheme.dark ? Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
|
||||
|
||||
property alias editBgRect : editBackgroundComponent
|
||||
property alias normalText :normalTextComponent
|
||||
property alias editableText :editableTextComponent
|
||||
|
||||
|
||||
signal fluTextEdited(var newText)
|
||||
signal fluLostFocus(bool isActiveFocus)
|
||||
|
||||
|
||||
height:24
|
||||
|
||||
function setEditable(value){
|
||||
editable = value;
|
||||
}
|
||||
|
||||
Keys.onPressed:function(event) {
|
||||
if (event.key === Qt.Key_Return || event.key === Qt.Key_Enter) {
|
||||
if(editableTextComponent.text !== "" && editableTextComponent.text !== root.text){
|
||||
fluTextEdited(editableTextComponent.text)
|
||||
}
|
||||
|
||||
fluLostFocus(false)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//property alias anchors:normalText.anchors
|
||||
FluText{
|
||||
id:normalTextComponent
|
||||
text: root.text
|
||||
elide:root.elide
|
||||
color:root.color
|
||||
visible: !editable
|
||||
anchors.fill: parent
|
||||
lineHeight: height
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
}
|
||||
|
||||
Rectangle{
|
||||
id:editBackgroundComponent
|
||||
width: Math.max(editableText.implicitWidth,20)
|
||||
height:parent.height
|
||||
radius: 5
|
||||
|
||||
|
||||
color:editable? editBgColor:"transparent"
|
||||
visible: editable
|
||||
TextInput{
|
||||
id:editableTextComponent
|
||||
anchors.fill: parent
|
||||
|
||||
text:root.text
|
||||
color:editTextColor
|
||||
visible: editable
|
||||
renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
|
||||
font: FluTextStyle.Body
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
//focus: editable
|
||||
|
||||
onActiveFocusChanged: {
|
||||
if(editableTextComponent.text !== "" && editableTextComponent.text !== root.text){
|
||||
fluTextEdited(text)
|
||||
}
|
||||
fluLostFocus(activeFocus);
|
||||
}
|
||||
}
|
||||
}
|
||||
onEditableChanged: {
|
||||
if(editable){
|
||||
editableTextComponent.forceActiveFocus()
|
||||
editableTextComponent.selectAll()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
@ -16,6 +16,8 @@ Item {
|
||||
property int topPadding: 0
|
||||
property int navWidth: 300
|
||||
property int pageMode: FluNavigationViewType.Stack
|
||||
property FluMenu navItemRightMenu
|
||||
property FluMenu navItemExpanderRightMenu
|
||||
signal logoClicked
|
||||
id:control
|
||||
Item{
|
||||
@ -161,6 +163,29 @@ Item {
|
||||
leftMargin: 6
|
||||
rightMargin: 6
|
||||
}
|
||||
|
||||
Loader{
|
||||
id:navItemRightMenuLoader
|
||||
//anchors.centerIn: parent
|
||||
sourceComponent: model.rightMenu
|
||||
}
|
||||
|
||||
MouseArea{
|
||||
anchors.fill: parent
|
||||
acceptedButtons: Qt.RightButton
|
||||
onClicked: function(mouse){
|
||||
if (mouse.button === Qt.RightButton) {
|
||||
if(model.rightMenu){
|
||||
var rightMenuComponent = model.rightMenu.createObject(navItemRightMenuLoader); // navItemRightMenuLoader 是你要将菜单附加到的父级项
|
||||
if (rightMenuComponent !== null) {
|
||||
rightMenuComponent.popup();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
z:-100
|
||||
}
|
||||
|
||||
onClicked: {
|
||||
if(d.isCompactAndNotPanel){
|
||||
control_popup.showPopup(Qt.point(50,mapToItem(control,0,0).y),model.children)
|
||||
@ -289,9 +314,10 @@ Item {
|
||||
}
|
||||
}
|
||||
}
|
||||
FluText{
|
||||
FluEditableText{
|
||||
id:item_title
|
||||
text:model.title
|
||||
editable: model.editable
|
||||
visible: {
|
||||
if(d.isCompactAndNotPanel){
|
||||
return false
|
||||
@ -310,6 +336,17 @@ Item {
|
||||
}
|
||||
return FluTheme.dark ? FluColors.White : FluColors.Grey220
|
||||
}
|
||||
onFluTextEdited:function(newText) {
|
||||
if(model.onTitleEdited)
|
||||
model.onTitleEdited(newText)
|
||||
}
|
||||
onFluLostFocus:function(isActiveFocus){
|
||||
if(!isActiveFocus){
|
||||
model.editable = false
|
||||
if(model.onTitleEdited)
|
||||
model.onTitleEdited(item_title.text)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -350,6 +387,28 @@ Item {
|
||||
leftMargin: 6
|
||||
rightMargin: 6
|
||||
}
|
||||
|
||||
Loader{
|
||||
id:loader_auto_suggest_boxsssssdd
|
||||
sourceComponent: model.rightMenu
|
||||
}
|
||||
|
||||
MouseArea{
|
||||
anchors.fill: parent
|
||||
acceptedButtons: Qt.RightButton
|
||||
onClicked: function(mouse){
|
||||
if (mouse.button === Qt.RightButton) {
|
||||
if(model.rightMenu){
|
||||
var rightMenuComponent = model.rightMenu.createObject(loader_auto_suggest_boxsssssdd); // loader_auto_suggest_boxsssssdd 是你要将菜单附加到的父级项
|
||||
if (rightMenuComponent !== null) {
|
||||
rightMenuComponent.popup();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
z:-100
|
||||
}
|
||||
|
||||
onClicked: {
|
||||
if(type === 0){
|
||||
if(model.tapFunc){
|
||||
@ -440,9 +499,10 @@ Item {
|
||||
}
|
||||
}
|
||||
}
|
||||
FluText{
|
||||
FluEditableText{
|
||||
id:item_title
|
||||
text:model.title
|
||||
editable: model.editable
|
||||
visible: {
|
||||
if(d.isCompactAndNotPanel){
|
||||
return false
|
||||
@ -461,6 +521,18 @@ Item {
|
||||
left:item_icon.right
|
||||
right: item_dot_loader.left
|
||||
}
|
||||
onFluTextEdited:function(newText) {
|
||||
if(model.onTitleEdited)
|
||||
model.onTitleEdited(newText)
|
||||
}
|
||||
onFluLostFocus:function(isActiveFocus){
|
||||
if(!isActiveFocus){
|
||||
model.editable = false
|
||||
if(model.onTitleEdited){
|
||||
model.onTitleEdited(item_title.text)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loader{
|
||||
id:item_dot_loader
|
||||
|
@ -19,4 +19,7 @@ QtObject {
|
||||
property int count: 0
|
||||
signal tap
|
||||
property var tapFunc
|
||||
property Component rightMenu
|
||||
property bool editable
|
||||
property var onTitleEdited:null
|
||||
}
|
||||
|
@ -10,4 +10,7 @@ FluObject {
|
||||
property Component cusIcon
|
||||
property bool isExpand: false
|
||||
property var parent
|
||||
property Component rightMenu
|
||||
property bool editable
|
||||
property var onTitleEdited:null
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user