QML之TextEdit

最新推荐文章于 2023-12-16 10:54:00 发布
最新推荐文章于 2023-12-16 10:54:00 发布
阅读量5.2k 收藏 10
点赞数 1
分类专栏： qml qt 文章标签： QML TextEdit
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DreamSonGO/article/details/76048870
版权
qt 同时被 2 个专栏收录
24 篇文章 0 订阅
订阅专栏
qml
20 篇文章 3 订阅
订阅专栏

QML中的元素TextEdit文本编辑器支持多行编辑。编辑多行时候想要换行的时候使用确定按键Enter进行换行，还可以设置属性wrapMode设置自动换行模式。其他的编辑设置属性我们下面代码讨论。

Rectangle{
       anchors.centerIn: parent
       height: 200
       width: 500
       radius: 5
       color: "gray"
       Component {
           id:comp_text
           Rectangle{
               height: 50
               width: parent.parent.width/2
               radius: 5
               color: "blue"
           }
       }
 

 

       //下面两个方框用于操作 TextEdit的一些操作方式
 

       Rectangle{
 

           id:rec1
 

           anchors.left: parent.left
 

           anchors.leftMargin: 150
 

           y:10
 

           height: 40
 

           width: 60
 

           radius: 3
 

           color: mou1.pressed ? "red":"blue"
 

           MouseArea{
 

               id:mou1
 

               anchors.fill: parent
 

               onClicked: {
 

                  //mytext.copy()//复制选择的内容
 

                   //mytext.cut() //剪切选择的内容
 

                   //mytext.closeSoftwareInputPanel();
 

                   //mytext.deselect();//删除活动文本选中，意思就是去掉选中框，不选了；
 

                   //mytext.select(2,5); //选中第2到第5个字符
 

                   //mytext.selectAll(); //选中全部
 

                   //mytext.selectWord();// 最接近光标的单词被选中
 

 

               }
 

           }
 

       }
 

       Rectangle{
 

           anchors.right: parent.right
 

           anchors.rightMargin: 150
 

           y:10
 

           height: 40
 

           width: 60
 

           radius: 3
 

           color: mou2.pressed ? "red":"blue"
 

           MouseArea{
 

               id:mou2
 

               anchors.fill: parent
 

               onClicked: {
 

                   mytext.paste();//粘贴
 

               }
 

           }
 

       }
 

 

       TextEdit{ //确定按键enter换行
 

           id:mytext
 

           height: 50
 

           width: parent.width
 

           anchors.centerIn: parent
 

           color: "red"
 

           font.pixelSize: 30
 

           font.bold: true //加粗，默认false
 

           font.italic: false //是否用斜体,默认false
 

           font.letterSpacing: 0 //字母之间距离，正表示增加，负表示缩小，0表示默认距离
 

           font.wordSpacing: 0 //单词之间的距离，说明同上行
 

           font.strikeout: false //设置字体是否有删除线，默认false
 

           font.underline: false //设置字体是否有下划线，默认false
 

           activeFocusOnPress: true //默认true,鼠标点击是否能输入。
 

 

           //readOnly: true  //设置只读
 

 

 

           //cursorDelegate: comp_text//光标也就是输入区域的高显，该委托起点是输入的终点
 

           //cursorVisible: false
 

           //cursorPosition: 200
 

 

           //设置文本的大小写
 

           //font.capitalization: Font.MixedCase //不使用大小写改变
 

           //font.capitalization: Font.AllUppercase //所有的都大写
 

           //font.capitalization: Font.AllLowercase //所有的都小写
 

           //font.capitalization: Font.SmallCaps //使用小大写，
 

           //font.capitalization: Font.Capitalize  //单词的第一个字母大写
 

 

           //font.weight: Font.Light
 

           //font.weight: Font.Normal
 

           //font.weight: Font.DemiBold
 

           //font.weight: Font.Bold
 

           //font.weight: Font.Black
 

 

           //文本的对齐方式，顾名思义
 

           //horizontalAlignment: TextInput.AlignHCenter
 

           //horizontalAlignment: TextInput.AlignLeft
 

           //horizontalAlignment: TextInput.AlignRight
 

 

            selectByMouse: true //是否可以选择文本
 

            //选择文本的方式，只有selectByMouse为真才有效
 

           //mouseSelectionMode: TextInput.SelectCharacters //一个字符为单位选择，默认
 

           //mouseSelectionMode: TextInput.SelectWords      //一个单词为单位选择
 

 

            selectedTextColor: "black" //设置选择文本的字体颜色
 

            selectionColor: "white"    //设置选择框的颜色
 

 

            //text:"hello" //输入文本默认显示的，可以修改和增加
 

 

            //换行设置
 

            //wrapMode: TextEdit.NoWrap //不执行自动换行，默认
 

            //wrapMode: TextEdit.WordWrap //根据单词换行
 

            //wrapMode: TextEdit.WrapAnywhere //任意处换行，即达到显示长度就换行
 

            //wrapMode: TextEdit.Wrap //自动合适换行，已单词优先
 

 

            //文本的显示方式
 

            //textFormat: TextEdit.AutoText
 

            //textFormat: TextEdit.PlainText
 

            //textFormat: TextEdit.RichText
 

 

            onLinkActivated: console.log("onLinkActivated");//链接或富文本点击时执行
 

 

 

       }
 

       Text{//显示编辑文本的只读属性
 

           id:mytext_read
 

           color: "green"
 

           anchors.bottom: parent.bottom
 

           font.pixelSize: 25
 

           //text: mytext.acceptableInput + "  " + mytext.canPaste +" " +mytext.inputMethodComposing
 

           //选择文本的开始点 + 选择文本 + 选择文本结束
 

          // text: mytext.selectionStart + " " + mytext.selectedText + " " +mytext.selectionEnd
 

           //
 

           //text: mytext.lineCount //行数
 

 

       }
 

 

   }
 



 

 


                

        

        

    




    

      

        

            

              
                
                  Luck-Dream
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    10
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
QML之TextEdit组件

				
			

			

				

					Y03977211367Y的博客
				

				

					01-08
					
					1205
					
				

			

		

		

			
				
TextEdit组件与TextInput类似，不过它支持用户输入多行文本，甚至可以通过textFormat属性支持富文本或者Markdown格式的文本内容。

			
		

	



                

              
                



	

		

			

				
					
Qml开发的两种方法

					
最新发布

				
			

			

				

					热土程序园，利他愉己~
				

				

					06-02
					
					1460
					
				

			

		

		

			
				
一.Qml开发的两种方法
1.Qt Creator 开发,手动编写qml代码
  这种方法开发很方便，适合对qml语言非常熟悉的开发人员。

2.用Qt Design Studio 设计qml界面
  这种方法更适合对qml不太熟悉的人，可以实现qml控件的拖拉拽，类似与widget界面开发；当然这种方法也能提升qml开发的效率。

			
		

	



                


  
              

                


	

		

			

				
					
qml Text换行

				
			

			

				

					bangtanhui的博客
				

				

					11-08
					
					314
					
				

			

		

		

			
				
【代码】qml Text换行。

			
		

	





	

		

			

				
					
QML类型：State、TextEdit、Positioner

				
			

			

				

					hw5230的博客
				

				

					07-04
					
					287
					
				

			

		

		

			
				
状态可以配置一组属性配置。所有项目都有一个默认状态，用于定义对象和属性值的默认配置。可以通过将 State 项添加到 states 属性来定义新状态，以允许项在不同配置之间切换。以下示例显示单个矩形。在默认状态下，矩形为蓝色。在“clicked”状态下，PropertyChanges 对象将矩形的颜色更改为红色。在 MouseArea 内单击会在默认状态和“单击”状态之间切换矩形的状态，从而在蓝色和红色之间切换矩形的颜色。默认状态是使用空字符串 ("") 引用的。

			
		

	



		

			
		



	

		

			

				
					
QML类型：TextEdit

				
			

			

				

					友善啊，朋友的博客
				

				

					10-03
					
					4419
					
				

			

		

		

			
				
一、描述

TextEdit 项显示可编辑的格式化文本块。

TextEdit 不实现滚动、跟随光标或其他特定于外观的行为。

二、属性成员

1、bottomPadding : real

leftPadding : real

padding : real

rightPadding : real

 topPadding : real


包含内容周围的填充。即除了 contentWidth 和 contentHeight 之外，保留的空间。


2、ef...

			
		

	





	

		

			

				
					
QmlTextEdit带滚动条QmlTextEditScrollBar.7z

				
			

			

				

					07-20
				

			

		

		

			
				
在QML（Qt Quick）中，`QmlTextEdit` 是一个用于显示和编辑文本的组件。这个`QmlTextEditScrollBar`可能是一个自定义实现，它为`QmlTextEdit`添加了滚动条功能，因为默认的`QmlTextEdit`在文本内容过多时可能不会...

			
		

	





	

		

			

				
					
QML  TextEdit 实现滑动查看(类似滚动条)

				
			

			

				

					01-03
				

			

		

		

			
				
Window {  visible: true  width: 640  height: 480  title: qsTr(Hello World) ... TextEdit {  id: textEdit  text: AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

			
		

	





	

		

			

				
					
QmlTextEdit接受拖放QmlTextEditDrop.7z

				
			

			

				

					07-20
				

			

		

		

			
				
在QML（Qt Quick）中，`QmlTextEdit` 是一个非常重要的组件，它用于创建文本编辑区域，用户可以在此区域内输入、编辑和查看文本。本项目“QmlTextEdit接受拖放QmlTextEditDrop”专注于扩展`QmlTextEdit`的功能，使其...

			
		

	





	

		

			

				
					
qml实现登录界面

				
			

			

				

					08-22
				

			

		

		

			
				
在QML中，这些元素可以通过TextEdit、PasswordEdit、Button和CheckBox等组件来实现。以下是一个基本的登录界面QML代码示例：  ```qml import QtQuick 2.0 import QtQuick.Controls 2.5  ApplicationWindow {  width:...

			
		

	





	

		

			

				
					
Qml实现的文本显示框(可指定某行高亮)

				
			

			

				

					02-19
				

			

		

		

			
				
在本文中，我们将深入探讨如何使用QML（Qt Quick Markup Language）实现一个具有特定行高亮功能的文本显示框组件。QML是Qt框架的一部分，它允许开发者通过声明式语法来创建用户界面，使得UI设计变得更为直观和高效。...

			
		

	





	

		

			

				
					
Qt5 qml 各种功能事例，详细功能见资源描述

				
			

			

				

					10-16
				

			

		

		

			
				
QmlTextEditScrollBar: QmlTextEdit带滚动条 QmlToggleButton: Qml选择开关 QmlCircularProgress: Qml圆形进度条 QmlFontList: Qml获取字体列表 QmlFlipImage: Qml翻转效果 QmlGrayImage: Qml图片转灰度 QmlProgress...

			
		

	





	

		

			

				
					
drag_demo.zip

				
			

			

				

					04-19
				

			

		

		

			
				
在本文中，我们将深入探讨如何使用QML（Qt Quick）中的`TextEdit`组件实现滑动查看功能，这对于在移动设备上处理长文本内容至关重要。`TextEdit`是Qt Quick中的一个核心组件，它允许用户在应用中输入和显示文本。...

			
		

	





	

		

			

				
					
qml学习文档

				
			

			

				

					01-25
				

			

		

		

			
				
13. TextEdit：显示多行可编辑文本。  QML中的基本交互项有：  1. MouseArea：鼠标句柄交互。 2. FocusScope：键盘焦点句柄。 3. Flickable：提供一种浏览整张图片的一部分的效果。 4. Flipable：提供一个平面，可以...

			
		

	





	

		

			

				
					
qml模仿实现的qt creator

				
			

			

				

					12-11
				

			

		

		

			
				
5. **文本编辑器**：可以采用`TextEdit`组件来实现代码编辑功能，可能还需要集成语法高亮和代码自动完成的扩展。  6. **状态和布局管理**：通过`StackView`或`DockPanels`来管理不同视图的堆叠和停靠，模拟多工作区...

			
		

	





	

		

			

				
					
QT5各类控件合集包好常用(QML)

				
			

			

				

					03-18
				

			

		

		

			
				
1. **文本类**：如Label（显示文本）、LineEdit（编辑文本）、TextEdit（多行文本编辑），它们在GUI中用于展示和输入文字信息。  2. **计算类**：可能包含SpinBox（数值选择器）、DoubleSpinBox（浮点数选择器）、...

			
		

	





	

		

			

				
					
【Qt QML】TextEdit

				
			

			

				

					wangyi463295828的博客
				

				

					12-16
					
					903
					
				

			

		

		

			
				
设置内容周围内边距的填充。的值为0，这意味着焦点移动的距离是固定的，通常与文本输入框的宽度或高度有关。可以显示多行可编辑的格式化文。默认是无边框的，可以和父控件完美融合。组件中文本周围的边距，单位是像素。来镜像应用程序布局时，文本的水平对齐方式也会被镜像，但。时，焦点会自动移动到该组件，允许开始输入文本。组件宽度和高度内的水平和垂直对齐方式。制表位之间的默认距离。属性控制文本的水平对齐方式。属性控制文本的垂直对齐方式。属性来自定义焦点移动的距离。组件边界之间的空间大小。用于控制文本的换行行为。

			
		

	





	

		

			

				
					
qml textedit 设置选中某一行数据_QML中的属性和脚本

				
			

			

				

					weixin_29463881的博客
				

				

					01-24
					
					464
					
				

			

		

		

			
				
属性QML中元素使用它们的元素类型名进行声明，使用它们的属性或者创建自定义属性来定义。一个属性对应一个值，以Text元素为例：import QtQuick 2.3import QtQuick.Window 2.2Window {    visible: true    width: 640    height: 480    Text {        id: thisLabel;        ...

			
		

	





	

		

			

				
					
QWidget中使用QML中的TextEdit控件，并且转发TextEdit的所有信号

				
			

			

				

					09-14
				

			

		

		

			
				
### 回答1：
要在QWidget中使用QML中的TextEdit控件，您需要使用QQuickWidget类。

以下是一个示例，展示了如何在QWidget中使用QML中的TextEdit控件，并将TextEdit的信号转发到QWidget：

```
#include <QQuickWidget>
#include <QVBoxLayout>

class MyWidget : public QWidget
{
    Q_OBJECT

public:
    MyWidget(QWidget *parent = nullptr);

private slots:
    void textChanged();
};

MyWidget::MyWidget(QWidget *parent) : QWidget(parent)
{
    QQuickWidget *quickWidget = new QQuickWidget;
    quickWidget->setSource(QUrl("qrc:/TextEdit.qml"));
    QVBoxLayout *layout = new QVBoxLayout;
    layout->addWidget(quickWidget);
    setLayout(layout);

    // 连接TextEdit的textChanged信号到QWidget的textChanged槽
    QObject::connect(quickWidget->rootObject(), SIGNAL(textChanged()), this, SLOT(textChanged()));
}

void MyWidget::textChanged()
{
    // 在这里处理TextEdit的textChanged信号
}
```

在上面的示例中，我们使用了QQuickWidget来呈现QML中的TextEdit控件。我们使用QObject::connect()函数将TextEdit的textChanged信号连接到QWidget的textChanged槽。这样，当TextEdit的文本发生更改时，QWidget就会收到textChanged信号，并执行textChanged()槽函数。  

### 回答2：
在QWidget中使用QML中的TextEdit控件，并转发TextEdit的所有信号的步骤如下：

1. 首先，确保您的程序能够对QML进行支持。这可以通过在Qt项目中添加QQuickWidget来实现。例如，在Qt Creator中，可以在UI文件中将QQuickWidget拖放到QWidget中。

2. 在QWidget代码中，创建一个QQuickWidget对象，并使用setSource()函数加载QML文件，如下所示：

   ```cpp
   QQuickWidget *qmlWidget = new QQuickWidget();
   qmlWidget->setSource(QUrl("qrc:/qml/TextEdit.qml"));  // 替换为您的QML文件路径
   ```

3. 接下来，为了让QWidget能够接收TextEdit的信号，我们需要在QWidget代码中连接TextEdit的信号和相应的槽函数。为此，我们可以使用QObject::connect()函数来实现，如下所示：

   ```cpp
   QObject::connect(qmlWidget->rootObject(), SIGNAL(signalName(parameters)), this, SLOT(slotFunction(parameters)));
   ```

   在上面的代码中，signalName是TextEdit中的信号名称，parameters是信号的参数，slotFunction是QWidget中的槽函数，用于接收和处理TextEdit的信号。

4. 最后，将QQuickWidget添加到QWidget的布局或设置其父对象，以确保在QWidget中显示TextEdit，如下所示：

   ```cpp
   QVBoxLayout *layout = new QVBoxLayout(this);
   layout->addWidget(qmlWidget);  // 或者设置父对象：qmlWidget->setParent(this);
   setLayout(layout);
   ```

   这样，QWidget将会显示包含TextEdit的QML文件，并且能够接收并处理TextEdit的所有信号。

请注意，上述步骤中的示例代码仅供参考，您需要根据实际情况进行相应的修改和适配。  

### 回答3：
在QWidget中使用QML中的TextEdit控件并转发其所有信号的步骤如下：

1. 首先，在C++代码中创建一个QWidget窗口。
2. 在该窗口中创建一个QQuickView窗口，将其设置为QWidget的子窗口。
3. 使用QQmlEngine和QQmlComponent加载QML文件，并将其设置为QQuickView的源。
4. 使用QQuickView的rootObject()方法获取根对象。
5. 获取QML中的TextEdit控件对象，并连接其各种信号的槽函数。
6. 在槽函数中处理TextEdit的信号，并将其转发给QWidget中的相应槽函数。

以下是完整的代码示例：

```cpp
#include <QtWidgets>
#include <QtQuick>

class MyWidget : public QWidget
{
    Q_OBJECT

public:
    MyWidget(QWidget *parent = nullptr) : QWidget(parent)
    {
        // Create a QQuickView as a child of QWidget
        QQuickView *view = new QQuickView(this);

        // Load QML file
        QQmlEngine *engine = view->engine();
        QQmlComponent component(engine, QUrl(QStringLiteral("qrc:/qml/main.qml")));
        QObject *qmlRootObject = component.create();

        // Set the QQuickView as the central widget of MyWidget
        setCentralWidget(QWidget::createWindowContainer(view, this));

        // Get the TextEdit object from QML
        QQuickItem *textEditItem = qmlRootObject->findChild<QQuickItem*>("myTextEdit");

        // Connect signals from TextEdit to slots in QWidget
        connect(textEditItem, SIGNAL(textChanged(QString)), this, SLOT(onTextChanged(QString)));
        // Add more signal-slot connections for other signals of TextEdit

        if (!component.isReady()) {
            qWarning() << component.errorString();
            return;
        }

        // Show the widget
        show();
    }

public slots:
    void onTextChanged(const QString &text)
    {
        qDebug() << "Text changed in TextEdit:" << text;
        // Handle the text changed event from TextEdit
    }
    // Add more slots to handle other signals of TextEdit

private:
    // Widget-specific members

};

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);

    MyWidget myWidget;
    return app.exec();
}

#include "main.moc"
```

在上面的示例中，通过QQuickView来加载QML文件。通过QQmlComponent来创建QML组件并获取根对象。然后，连接TextEdit控件的信号到对应的槽函数，以便在QWidget中处理。注意，示例中只连接了textChanged信号，如果还有其他信号需要处理，需要添加额外的信号槽连接。

这样，QWidget中就可以使用QML中的TextEdit控件，并且转发TextEdit的所有信号。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值