admin管理员组

文章数量:1630588

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

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

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

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

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

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


这里代码很简单
用到了层叠布局+Shape+Text控件,下面我们具体介绍下

层叠布局

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

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)
    }
  }
}

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

往期章节
环境搭建

本文标签： 鸿蒙控件第一篇客户端app

版权声明：本文标题：鸿蒙从0搭建Chatgpt App客户端,第一篇之鸿蒙碰上Chatgpt-控件学习 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dianzi/1729034867a1183610.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。