duilib中CTextUI控件使用技巧与问题总结（CTextUI控件自适应文字宽度特性）

目录

1、文本控件CLabelUI与CTextUI介绍

2、利用CTextUI自适应文字宽度的特性实现小图标对文字的自动跟随

3、CTextUI自适应文字宽度的特性给文字居中显示带来的影响与困扰

3.1、将CLabelUI控件换成CTextUI控件，支持文字的自动换行与多行显示

3.2、CTextUI控件自适应文字长度的特性，导致中文下的文字对齐产生了问题

4、最后

---

C++软件异常排查从入门到精通系列教程（核心精品专栏，订阅量已达8000多个，欢迎订阅，持续更新...）https://blog.csdn.net/chenlycly/article/details/125529931C/C++实战专栏（重点专栏，专栏文章已更新500多篇，订阅量已达6000多个，欢迎订阅，持续更新中...）https://blog.csdn.net/chenlycly/article/details/140824370C++ 软件开发从入门到实战（重点专栏，专栏文章已更新300多篇，欢迎订阅，持续更新中...）https://blog.csdn.net/chenlycly/category_12695902.htmlVC++常用功能开发汇总（专栏文章列表，欢迎订阅，持续更新...）https://blog.csdn.net/chenlycly/article/details/124272585C++软件分析工具从入门到精通案例集锦（专栏文章，持续更新中...）https://blog.csdn.net/chenlycly/article/details/131405795开源组件及数据库技术（专栏文章，持续更新中...）https://blog.csdn.net/chenlycly/category_12458859.html网络编程与网络问题分享（专栏文章，持续更新中...）https://blog.csdn.net/chenlycly/category_2276111.html       项目中使用了开源的duilib界面库，在使用这个开源库中遇到了诸多问题与细节，有的问题可能是开源库内部的缺陷引发的（需要对开源库进行改进），有的问题则可能是不了解开源库中控件类的特性和约束导致的。今天说的CTextUI控件，其重要特性就是控件的宽度自适应文字的宽度，有时我们可以利用这个特性去实现特定的效果，有时这个特性也会给我们带来一些困扰。

1、文本控件CLabelUI与CTextUI介绍

       duilib开源库中的文本控件（显示文字的控件）主要有CLabelUI和CTextUI两种，这两个文本控件的使用场景是有差异的。

       CLabelUI主要用来显示单行文字，从该类的CLabelUI::PaintText接口中可以看到，绘制文字时设置了DT_SINGLELINE单行文字的标记：

比如下面窗口的每个设置项的标签名称，只有简单的几个文字，单行显示即可：

这些单行的文字可以使用CLabelUI控件实现。再比如窗口这样的单行显示文字，也可以用CLabelUI控件实现：

       CTextUI控件不仅可以显示单行文字，还可以显示多行文字，支持文字的自动换行。当我们要显示的文字比较长，需要显示多行时，可以使用CTextUI控件。如果要显示的文字，一行显示不下，可能要显示多行，比如：

窗口中显示的会暗色提示文字一行显示不下，需要自动换行显示，则需要使用CTextUI控件，该控件支持显示多行文字，一行显示不下时会自动换行。

       CTextUI控件有个典型特性，控件的宽度会自适应文字的宽度，即会根据当前控件设置的文字长度去设置控件的宽度（文字的宽度就是控件的宽度）。有时可以利用这个特性去实现特定的效果，但有时这个特性也会给我们带来困扰，下面给出两个项目中实例来说明。

2、利用CTextUI自适应文字宽度的特性实现小图标对文字的自动跟随

       我们在多年前实现IM即时通讯软件的群组功能时，在群组聊天框中，在右侧的群组成员列表中，如果某成员是管理员，则需要在该成员的名称后面添加一个小图标，以标识该成员是群管理员，如下所示：

人员的名称可能很短，也可能很长，不好用LabelUI控件显示人员名称。可以用CTextUI控件来做，正好利用CTextUI自适应文字宽度的特性，让后面的管理员小图标紧跟名称文字的后面。当然人员的名称可能很长，而可见区域是有限的，我们可以给CTextUI设置一个最大宽度，然后文字显示不下时使用endellipsis省略形式显示。

       CTextUI控件的宽度是自适应文字宽度的，但文字过长时不能无限显示，可以给控件设置一个最大宽度（比如maxwidth="200"），也支持设置最小宽度（比如minwidth="100"）。当时在使用CTextUI控件时遇到了一个bug，后来我们对CTextUI控件的源码进行了改进，相关问题的详细记录，可以查看我的文章：

duilib中CTextUI控件更新文字后不显示最新文字（不刷新显示）的问题排查https://blog.csdn.net/chenlycly/article/details/140444416

3、CTextUI自适应文字宽度的特性给文字居中显示带来的影响与困扰

       当前软件在会议中，点击会议窗口的挂断按钮，弹出如下的提示框：

在中文语言下，这个窗口中的文字显示是没问题的。但将软件的语言切换到英文后，就出问题了，如下所示：

灰暗色的提示文字“若仅自己离开，会议将无管理者”翻译成英文后，会变得很长：

If you choose Leave, the conference will continue without an administrator.

单行就显示不下了，所以显示了省略号。此处需要优化一下，需要该提示文字自动换行，要将文字显示全。

---

         在这里，给大家重点推荐一下我的几个热门畅销专栏，欢迎订阅：（博客主页还有其他专栏，可以去查看）

专栏1：【C++软件异常与异常排查从入门到精通系列教程】（该精品技术专栏的订阅量已达到10000多个，专栏中包含大量项目实战分析案例，有很强的实战参考价值，广受好评！专栏文章持续更新中，已经更新到200篇以上！欢迎订阅！）

C++软件调试与异常排查从入门到精通系列文章汇总https://blog.csdn.net/chenlycly/article/details/125529931

本专栏根据多年C++软件异常排查的项目实践，系统地总结了引发C++软件异常的常见原因以及排查C++软件异常的常用思路与方法，详细讲述了C++软件的调试方法与手段，详细介绍分析C++软件问题的常用分析工具，以图文并茂的方式给出具体的项目问题实战分析实例（详细讲述分析排查过程，很有实战参考价值），带领大家逐步掌握C++软件调试与异常排查的相关技术，适合基础进阶和想做技术提升的相关C++开发人员！

考察一个开发人员的水平，一是看其编码及设计能力，二是要看其软件调试能力！所以软件调试能力（排查软件异常的能力）很重要，必须重视起来！能解决一般人解决不了的问题，既能提升个人能力及价值，也能体现对团队及公司的贡献！

专栏中的文章都是通过项目实战总结出来的，包含大量项目问题实战分析案例，有很强的实战参考价值！专栏文章还在持续更新中，预计文章篇数能更新到200篇以上！

专栏2：【C/C++实战进阶】（该专栏涵盖了C++多方面的内容，是当前重点打造的专栏，订阅量已达8000多个，专栏文章已经更新到500多篇，持续更新中...）

C/C++实战进阶（专栏文章，持续更新中...）https://blog.csdn.net/chenlycly/category_11931267.html

以多年的开发实战为基础，总结并讲解一些的C/C++基础与项目实战进阶内容，以图文并茂的方式对相关知识点进行详细地展开与阐述！专栏涉及了C/C++领域多个方面的内容，包括C++基础及编程要点（模版泛型编程、STL容器及算法函数的使用等）、数据结构与算法、C++11及以上新特性（开源代码中可能会用到很多新特性（比如WebRTC开源库），日常编码中也会用到部分新特性，面试时也会频繁地涉及到，学习新特性很有必要）、常用C++开源库的介绍与使用（比如SQLite、libcurl、libwebsockets、libevent、jsoncpp/RapidJson、Redis、RabbitMQ、MongoDB、MQTT、ZooKeeper、OpenCV、FFmpeg、SDL、GStreamer、Live555、ReactOS等）、代码分享（调用系统API、使用开源库）、常用编程技术（动态库、多线程、多进程、数据库及网络编程等）、软件UI编程（Win32/duilib/QT/MFC）、C++软件调试技术（引发C++软件异常的常见原因分析与总结、排查C++软件异常的手段与方法、分析C++软件异常的基础知识、使用常用软件分析工具分析C++软件问题、多个项目实战问题分析案例分享等）、设计模式（单例模式、工厂模式、观察者模式、状态模式等）、网络基础知识与网络问题分析进阶内容（实战问题分析实例分享）等。本专栏的内容都是建立在项目实践的基础上，来源于项目实战，服务于项目实战，很有实战参考价值！

专栏3：【分析C++软件问题的实用软件与高效工具实战案例集锦】

C++常用软件分析工具从入门到精通案例集锦汇总（专栏文章，持续更新中...）https://blog.csdn.net/chenlycly/article/details/131405795

常用的C++软件辅助分析工具有SPY++、PE工具、Dependency Walker、GDIView、Process Explorer、Process Monitor、API Monitor、Clumsy、Windbg、IDA Pro以及内存泄漏检测工具等，本专栏详细介绍如何使用这些工具去巧妙地分析和解决日常工作中遇到的问题，很有实战参考价值！

专栏4：【VC++常用功能代码封装】

VC++常用功能开发汇总（专栏文章，持续更新中...）https://blog.csdn.net/chenlycly/article/details/124272585

将10多年C++开发实践中常用的功能，以高质量的代码展现出来。这些常用的高质量规范代码，可以直接拿到项目中使用，能有效地解决软件开发过程中遇到的问题。

专栏5：【C/C++软件开发从入门到实战】（本专栏涵盖了C++多方面的内容，是当前重点打造的专栏，专栏文章已经更新到300多篇，持续更新中！欢迎订阅！） 

C++ 软件开发从入门到精通（专栏文章，持续更新中...）https://blog.csdn.net/chenlycly/category_12695902.html

根据多年C++软件开发实践，详细地总结了C/C++软件开发相关技术实现细节，分享了大量的实战案例，很有实战参考价值。

---

3.1、将CLabelUI控件换成CTextUI控件，支持文字的自动换行与多行显示

       显示上述文字的控件是CLabelUI，该控件只支持显示单行，所以要将显示不下的文字以多行形式显示，则要使用CTextUI。于是修改所在窗口的xml文件，将控件类型由CLabelUI换成CTextUI，并且给该控件设置文字居中显示的属性（align="center"）。重新编译代码，运行程序，达到了如下的效果：

3.2、CTextUI控件自适应文字长度的特性，导致中文下的文字对齐产生了问题

       以为将CLabelUI控件换成CTextUI控件后，问题就解决了，但是将软件的语言切换成中文后，出现了新的问题，如下所示：

中文提示文字“若仅自己离开，会议将无管理者”，是向左对齐的，我们是要居中对齐的。已经给当前的CTextUI控件设置了align="center"文字居中属性：

但是并没有生效。

      后来想到CTextUI控件是自适应文字宽度的，会根据文字的长度自动调整控件的宽度的，所以想着直接给该控件设置一个固定宽度试试，如下：

但修改后文字还是向左对齐。

       这是怎么回事呢？是给CTextUI控件设置固定宽度无效吗？真相都在代码中，直接到duilib开源库中查看相关的源码。当前CTextUI控件是放置在CHorizontalLayoutUI布局中的，于是查看摆放控件位置的函数CHorizontalLayoutUI::SetPos，如下：

摆放当前CHorizontalLayoutUI水平布局中的子控件时，会调用每个子控件的EstimateSize接口，于是去查看CTextUI控件中EstimateSize接口的实现：

该接口中是直接获取给控件设置的文字宽度来返回的，根本没有使用到我们之前给控件设置的固定宽度值，所以最终这个CTextUI控件的宽度还是文字的宽度，这就能解释文字为什么始终向左对齐了。

       那这个文字居中问题该怎么解决呢？我们再回到父布局的接口CHorizontalLayoutUI::SetPos中：

我们可以看到，调用EstimateSize接口后，会将EstimateSize接口返回的控件估算宽度与最大宽度值以及最小宽度值比较一下，决定控件的最终宽度。

       所以，如果要将CTextUI控件设置成一个固定值，直接设置最小宽度即可，即minwidth="368"，如下所示：

将CTextUI控件的宽度固定下来后，中文文字就能按预期的居中显示了，如下：

至此，上述问题就完全解决了！

       之前根据项目实战，写过一篇使用duilib的细节与实战经验总结文章，感兴趣可以去查看：

C++开源界面库duilib的使用细节与实战技巧总结（实战经验分享）https://blog.csdn.net/chenlycly/article/details/140763710

4、最后

      当我们在使用控件的过程中遇到问题时，我们可以直接去查看代码，到代码中去寻找线索或答案，真相和细节都在代码中！