零、最終效果

一、文本自動換行效果

新建一個Text文本，設置文本的最大寬度

然后添加Content Size Fitter組件，Vertical Fit選擇Preferred Size

二、背景隨文本長度變化效果

新建一個Image作為文本的背景，并將其作為文本的父對象

編寫腳本，讓圖片跟隨文本長度的變化而變化

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;public class Bubble : MonoBehaviour
{// Start is called before the first frame update[Header("氣泡內容")] public Text texContentt;[Header("氣泡背景圖")] public Image imageBG;[Header("文本與氣泡四周的距離")] public float padding = 2f;//四周的距離// Update is called once per framevoid Update(){float textWidth = texContentt.preferredWidth;//當前文本內容在當前字體設置下，完全顯示所需的最小寬度（以像素為單位）float textHeight = texContentt.preferredHeight;//當前文本內容在當前字體設置下，完全顯示所需的最小高度（以像素為單位）if (texContentt.rectTransform.rect.width>textWidth){//當文本內容沒有超出最大寬度時imageBG.rectTransform.sizeDelta = new Vector2(textWidth+padding*2, textHeight+padding*2);this.GetComponent<RectTransform>().sizeDelta = new Vector2(textWidth + padding * 2, textHeight + padding * 2);texContentt.rectTransform.anchoredPosition = new Vector2(padding,-padding);        }else{//當文本內容超出最大寬度時，保持最大寬度，只改變高度imageBG.rectTransform.sizeDelta = new Vector2(texContentt.rectTransform.rect.width+padding*2, textHeight+padding*2);this.GetComponent<RectTransform>().sizeDelta = new Vector2(texContentt.rectTransform.rect.width + padding * 2, textHeight + padding * 2);texContentt.rectTransform.anchoredPosition = new Vector2(padding, -padding);}}}

三、文本流式輸出（打字機）效果

通過協程實現文本流式輸出效果

/// <summary>/// 模擬打字機效果/// </summary>/// <param name="bubbleAnswer">要模擬的氣泡</param>/// <param name="content">氣泡文本的全部內容</param>/// <returns></returns>IEnumerator showText(GameObject bubbleAnswer,string content,PlayAudioButton playAudioButton){float beforeHeight = bubbleAnswer.GetComponent<Bubble>().texContentt.preferredHeight;for (int i = 0; i < content.Length+1; i++){bubbleAnswer.GetComponent<Bubble>().texContentt.text = content.Substring(0, i);yield return new WaitForSeconds(0.1f);}playAudioButton.AddPlayAudioButton(new Vector2(380f, nowHegight + bubbleInterval + 30),gameObjectContent);}

四、文本流式輸出介紹顯示語音播報按鈕效果

按鈕在文本流式顯示結束后在進行添加，在發送問題時進行銷毀

    /// <summary>/// 新建語音播報按鈕/// </summary>/// <param name="vector2">位置</param>/// <param name="gameObject">父對象</param>public void AddPlayAudioButton(Vector2 vector2,Transform gameObject){gameObjectPlayAudio = Instantiate(this.gameObject, gameObject);gameObjectPlayAudio.GetComponent<RectTransform>().anchoredPosition = vector2;}/// <summary>/// 語音播報按鈕銷毀方法/// </summary>public void DestroyPlayAudioButton(){Destroy(gameObjectPlayAudio);}

五、完整的智能問答界面ui邏輯

void SendQustion(){//發送新的問題前先將上次的語音內容和語音按鈕進行刪除if (playAudioButton.gameObjectPlayAudio!=null){playAudioButton.DestroyPlayAudioButton();           }//首先，發送問題，并添加問題氣泡qaControl.AddBubble("question", inputFieldQuestion.text);//將問題發送給大模并得到回答StartCoroutine(llm.SendQueryToModel(inputFieldQuestion.text, conversationId, success =>{//輸入框內容清空inputFieldQuestion.text = "";//將得到的回答轉為語音tts.StartTTS(success, ttsSucess =>{playAudioButton.audioSource.clip = ttsSucess;                });//添加回答氣泡qaControl.AddBubble("answer", success);}));}