目录

开发准备:

分析:

具体实现：

UI实现:

功能实现：

总结：

---

开发准备:

参考第一篇

分析:

首先看输入框的布局是一个灰色的带圆角的矩形框，矩形上面一部分作为承载输入内容，下面一部分作为承载功能按钮，由于深度思考，联网搜索，文件按钮目前条件还不支持实现，我们只实现发送键按钮。

现在来分析一下布局，可以清楚的看到输入框的布局是上面一个文本框，下面一行按钮。而按钮行的提交按钮这里有一个对文本框中是否含有输入内容判断的UI展现，当文本框中没有输入的时候提交按钮是显示灰色且不能触发事件。UI方面实现起来并不是很困难。

而功能方面主要是对于请求数据和状态的一些处理，还有对返回数据进行同步。

具体实现：

UI实现:

输入文本框的实现，主要利用输入文本对请求内容中的问题属性进行赋值，还有对输入内容的长度进行判断，从而同步更新提交按钮的UI。

 TextArea({ placeholder: '给deepSeek发送消息', text: $$this.sendMessage })
          .width("90%")
          .height(60)
          .backgroundColor("#F3F4F6")
          .onChange((value) => {
            if (this.sendMessage.length !== 0) {

              this.sendable = true
              console.info("sendable", this.sendable)
            } else {
              this.sendable = false
            }
            this.sendData.prompt = value

            console.info(this.sendData.prompt)
          })
      }.width("100%")

按钮行的实现，分为左侧按钮和右侧按钮，可以分别用Row给它们包起来，然后用

justifyContent(FlexAlign.SpaceBetween)

达到分隔两侧的效果，而按钮的高亮效果这里不过多赘述。而提交的按钮的UI效果的变化主要依靠这两个属性

.opacity(this.sendable ? 1 : 0.5).enabled(this.sendable ? true : false)

功能实现：

这里主要讲提交按钮点击发送功能实现，首先点击之后，先对就会展开对话框，这里把isNew设为false。进行一系列赋值操作，最后进行http请求，每一次请求结果回调回来就把新的内容加上，需要注意的是返回<think>...</think>期间Ui状态一直应该是loading状态，当真正的回答字符结果返回的时候才结束loading状态。

   Image($r("app.media.submit")).width(32).opacity(this.sendable ?  1: 0.5).enabled(this.sendable?true:false)
              .onClick(() => {
                this.sendMessage = ''
                this.isNew = false
                AppStorage.setOrCreate("isNew", this.isNew)
                AppStorage.setOrCreate("sendMessage", this.sendData.prompt)
                if (this.sendable === true) {
                  this.sendable = false
                  AppStorage.setOrCreate('isLoading',true)
                  this.messageList.push(  {
                    content:'',
                    question:this.sendData.prompt,
                    done:false,
                    timestamp:Date.now()
                  }
                  )
                  AppStorage.setOrCreate('messageList',this.messageList)
                  PostStream('http://localhost:11434/api/generate', this.sendData, (res) => {
                    console.info("新数据", res.response)

                    if (res.response=='</think>') {

                      AppStorage.setOrCreate('isLoading',false)
                    }
                    if (res.response!=='<think>' && res.response!=='\n\n' &&res.response!=='</think>') {

                      this.responseMessage += res.response
                      this.messageList[this.messageList.length-1].content=this.responseMessage

                      AppStorage.setOrCreate('messageList',this.messageList)
                    }

                  },(isDone)=>{
                    if (isDone) {
                      this.sendable=true
                      this.responseMessage=''
                      this.messageList[this.messageList.length-1].done=true
                    }
                  })

                }
              })

总结：

输入框总体实现的并不是很难，但是需要理清楚逻辑，特别是与其他的组件之间的数据交互。