鸿蒙从0搭建Chatgpt App客户端,第一篇之鸿蒙碰上Chatgpt-控件学习

本文链接：https://blog.csdn.net/chejucao/article/details/134456956

本文讲述了作者利用ChatGPT作为教学资源，通过模仿其页面结构，讲解如何使用自定义View、层叠布局和Shape控件创建头像部分。文章逐步介绍了Shape的不同绘制类型和Text的属性设置，展示了内容区域的设计过程。

摘要由CSDN通过智能技术生成

起因:华为鸿蒙掀桌子了,不再兼容安卓,因为实力太大

下载.jpeg

下面我们要看看鸿蒙和chatgpt将碰撞什么样的火花

学习控件最快的方式就是找一个现有的页面1:1复刻,由于初学我们先找个简单的页面,恰好Chatgpt很火我们就模仿他的页面来学习控件Chatgpt已经上架googleplay有一段时间了.

简单问了个问题gpt的数据已经更新到22年1月份了,简单问了下页面是这样

可以看到整个页面大概分三个部分头部,内容区域,底部发送消息控件,今天我们开始画最复杂的部分,内容区域

企业微信截图_1b869ce8-351e-4231-b4b9-11b1c602ac3b.png

内容区域可以分为两个部分左边的头像部分和右边的名称以及内容部分,下面我们先画左边的头像,这里用到自定义view
先看图

企业微信截图_b140cff3-462e-40bb-a4aa-e18cbea1578d.png
这里代码很简单
用到了层叠布局+Shape+Text控件,下面我们具体介绍下

层叠布局

下图可以看出层叠布局就是一层一层往上盖

企业微信截图_e221ab0b-cfdd-4be0-9225-a4814aa74395.png

企业微信截图_aa631e31-f65b-46cd-9142-be71ac0082b7.png

Shape

shape里面可以加一个或者多个图形,有7种绘制类型，分别为Circle（圆形）、Ellipse（椭圆形）、Line（直线）、Polyline（折线）、Polygon（多边形）、Path（路径）、Rect（矩形)

Shape() {
        Circle({
          width: 24, height: 24
        }).fill('#17c87f')
      }

Text

这个就比较简单了,可以设置文字大小/颜色等

Text('我是一段文本')

Text('我是一段文本')
.baselineOffset(0)
.fontSize(30)
.border({ width: 1 })
.padding(10)
.width(300)

将上面的代码合并在一起就是我们今天学习的内容

@Entry
@Component
export default struct Header {
  build() {
    Stack() {
      Shape() {
        Circle({
          width: 24, height: 24
        }).fill('#17c87f')
      }

      Text('EN') {
      }.fontColor(Color.White).fontSize(8)
    }
  }
}

第一节我们就结束了,欢迎持续关注,下一节我们将学习右边的内容区域以及条目的排版布局

往期章节
环境搭建