admin管理员组

文章数量:1130349

上一篇我们讲到自定义ViewChatgpt左侧的头像,本节继续讲解三个部分

  1. 右侧内容区域
  2. 整个item的布局
  3. 整个列表数据的加载

先看看右侧内容

先上代码上图,可以看出此视图用了Column+Text

@Entry
@Component
export default struct ContentComponent {
   
   
  build() {
   
   
    Column() {
   
   
      Text("PATRICIA PERCY")
        .fontSize(10)
        .margin({
   
    bottom: 6 })
      Text("鸿蒙开发怎么样")
        .fontSize(14)
    }.alignItems(HorizontalAlign.Start)
    .padding({
   
    top: 16, left: 8, right: 16, bottom: 8 })
  }
}

Text控件上节我们已经介绍过,下面介绍下Column布局
Column其实是线性布局的一种,类似于android中的LinearLayout,子元素垂直方向上排列

Column可以让子元素在水平方向上有三种排列方式

HorizontalAlign.Start, HorizontalAlign.Center,HorizontalAlign.End

回到我们的项目,这里用到了HorizontalAlign.Start,让子元素靠左剧中,让用户名跟内容靠左

下面我们将昨天绘制的头像区域跟内容区域结合起来,这里为了给大家看清楚布局区域,特意给指定区域添加背景色

这里用到一个Row布局将整个item分成两部分,左边放头像占比10%,右侧放内容区域占比90%,下面我们讲下Row布局,Row布局也是线性布局,相当于让子元素横向排列

跟Column布局一样Row布局也有三种排列方式VerticalAlign.Top,VerticalAlign.Center,VerticalAlign.Bottom分别对应上中下,本项目设置的是VerticalAlign.Top

item写完后下面就介绍下

上一篇我们讲到自定义ViewChatgpt左侧的头像,本节继续讲解三个部分

  1. 右侧内容区域
  2. 整个item的布局
  3. 整个列表数据的加载

先看看右侧内容

先上代码上图,可以看出此视图用了Column+Text

@Entry
@Component
export default struct ContentComponent {
   
   
  build() {
   
   
    Column() {
   
   
      Text("PATRICIA PERCY")
        .fontSize(10)
        .margin({
   
    bottom: 6 })
      Text("鸿蒙开发怎么样")
        .fontSize(14)
    }.alignItems(HorizontalAlign.Start)
    .padding({
   
    top: 16, left: 8, right: 16, bottom: 8 })
  }
}

Text控件上节我们已经介绍过,下面介绍下Column布局
Column其实是线性布局的一种,类似于android中的LinearLayout,子元素垂直方向上排列

Column可以让子元素在水平方向上有三种排列方式

HorizontalAlign.Start, HorizontalAlign.Center,HorizontalAlign.End

回到我们的项目,这里用到了HorizontalAlign.Start,让子元素靠左剧中,让用户名跟内容靠左

下面我们将昨天绘制的头像区域跟内容区域结合起来,这里为了给大家看清楚布局区域,特意给指定区域添加背景色

这里用到一个Row布局将整个item分成两部分,左边放头像占比10%,右侧放内容区域占比90%,下面我们讲下Row布局,Row布局也是线性布局,相当于让子元素横向排列

跟Column布局一样Row布局也有三种排列方式VerticalAlign.Top,VerticalAlign.Center,VerticalAlign.Bottom分别对应上中下,本项目设置的是VerticalAlign.Top

item写完后下面就介绍下

本文标签： 鸿蒙控件第二篇客户端列表

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