45.HarmonyOS鸿蒙系统 App(ArkUI)创建列表(List)

列表是一种复杂的容器,当列表项达到一定数量,内容超过屏幕大小时,可以自动提供滚动功能。它适合用于呈现同类数据类型或数据类型集,例如图片和文本。在列表中显示数据集合是许多应用程序中的常见要求(如通讯录、音乐列表、购物清单等)。

使用列表可以轻松高效地显示结构化、可滚动的信息。通过在List组件中按垂直或者水平方向线性排列子组件ListItemGroup或ListItem,为列表中的行或列提供单个视图,或使用ForEach迭代一组行或列,或混合任意数量的单个视图和ForEach结构,构建一个列表。List组件支持使用条件渲染、循环渲染、懒加载等渲染控制方式生成子组件。

布局和约束

列表作为一种容器,会自动按其滚动方向排列子组件,向列表中添加组件或从列表中移除组件会重新排列子组件。

如下图所示,在垂直列表中,List按垂直方向自动排列ListItemGroup或ListItem。

ListItemGroup用于列表数据的分组展示,其子组件也是ListItem。ListItem表示单个列表项,可以包含单个子组件。

图1 List、ListItemGroup和ListItem组件关系

说明

List的子组件必须是ListItemGroup或ListItem,ListItem和ListItemGroup必须配合List来使用。

布局

List除了提供垂直和水平布局能力、超出屏幕时可以滚动的自适应延伸能力之外,还提供了自适应交叉轴方向上排列个数的布局能力。

利用垂直布局能力可以构建单列或者多列垂直滚动列表,如下图所示。

图2 垂直滚动列表(左边:单列;右:多列)

利用水平布局能力可以是构建单行或多行水平滚动列表,如下图所示。

图3 水平滚动列表(左:单行;右边:多行)

约束

列表的主轴方向是指子组件列的排列方向,也是列表的滚动方向。垂直于主轴的轴称为交叉轴,其方向与主轴方向相互垂直。

如下图所示,垂直列表的主轴是垂直方向,交叉轴是水平方向。水平列表的主轴是水平方向,交叉轴是垂直方向。

图4 列表的主轴与交叉轴

如果List组件主轴或交叉轴方向设置了尺寸,则其对应方向上的尺寸为设置值。

如果List组件主轴方向没有设置尺寸,当List子组件主轴方向总尺寸小于List的父组件尺寸时,List主轴方向尺寸自动适应子组件的总尺寸。

如下图所示,一个垂直列表B没有设置高度时,其父组件A高度为200vp,若其所有子组件C的高度总和为150vp,则此时列表B的高度为150vp。

图5 列表主轴高度约束示例1(A: List的父组件; B: List组件; C: List的所有子组件)

如果子组件主轴方向总尺寸超过List父组件尺寸时,List主轴方向尺寸适应List的父组件尺寸。

如下图所示,同样是没有设置高度的垂直列表B,其父组件A高度为200vp,若其所有子组件C的高度总和为300vp,则此时列表B的高度为200vp。

图6 列表主轴高度约束示例2(A: List的父组件; B: List组件; C: List的所有子组件)

List组件交叉轴方向在没有设置尺寸时,其尺寸默认自适应父组件尺寸。

图标放置的目录 

 


import util from '@ohos.util';
class Contact {
  key: string = util.generateRandomUUID(true);
  name: string;
  icon: Resource;

  constructor(name: string, icon: Resource) {
    this.name = name;
    this.icon = icon;
  }
}

@Entry
@Component

struct Index {
  @State message: string = 'Hello World'
  @State name2:string = '文本内容'
  @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Blue, Color.Grey, Color.Brown];
  private contacts = [
    new Contact('大山', $r("app.media.app_icon")),
    new Contact('小河', $r("app.media.aicon")),
    new Contact('小六', $r("app.media.app_icon")),
    new Contact('小八', $r("app.media.aicon")),
    new Contact('小九', $r("app.media.app_icon"))
  ]
  build() {

    List() {
      ForEach(this.contacts, (item: Contact,index) => {
        ListItem() {
          Row() {
            Image(item.icon)
              .width(40)
              .height(40)
              .margin(10)
            Text(item.name).fontSize(20)
            Button('按钮'+(index+1).toString())
          }
          .width('100%')
          .justifyContent(FlexAlign.Start)
        }
      }, item => item.key)
    }
    .width('100%')
  }
}

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/543752.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

springBoot+vue编程中使用mybatis-plus遇到的问题

mybatis-plus中遇到的问题Code Companion Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception [Request processing failed; nested exception is org.apache.ibatis.binding.BindingException: Invalid bound statement (not found)…

如何正确使用数字化仪前端信号调理?(一)

一、前言 板卡式的数字转换器和类似测量仪器,比如图1所示的德思特TS-M4i系列,都需要为各种各样的特性信号与内部模数转换器(ADC)的固定输入范围做匹配。 图1:德思特TS-M4i系列高速数字化仪,包括2或4通道版…

大模型项目整体规划、技术选型和案例分析经验分享

1 项目整体规划 1.1 明确场景 toB or toC(面向企业还是面向消费者) toB(面向企业):指的是产品或服务主要面向其他企业或组织。这类产品通常需要解决特定的商业问题,强调效率和集成性,并且可能需…

机器学习-随机森林温度预测模型优化

文章目录 前言旧模型训练新模型训练参数查看组合参数训练学习模型评估 前言 在机器学习-随机森林算法预测温度一文中,通过增大模型训练数据集和训练特征的方式去优化模型的性能,本文将记录第三方种优化方式,通过调整随机森林创建模型参数的方…

10.哀家要长脑子了!

1. 704. 二分查找 - 力扣&#xff08;LeetCode&#xff09; 哎哟 我去 我还以为你都搞懂了 呵呵 当时问题出现在右边界初始化 左闭右开 右边界是取不到的 int left 0, right nums.size() ; while(left < right) { int mid left (right - left) / 2; if( target > …

数据可视化高级技术Echarts(堆叠柱状图)

目录 一.如何实现 二.代码展示 1.stack名称相同&#xff08;直接堆叠&#xff09; 2. stack名称不相同&#xff08;相同的堆叠&#xff0c;不同的新生成一列&#xff09; 一.如何实现 数据堆叠&#xff0c;同个类目轴上系列配置相同的 stack 值可以堆叠放置。即在series中…

前端三件套学习笔记(持更)

目录 1、HTML,CSS,JS区别 2、HTML结构 1、HTML,CSS,JS区别 结构写到 HTML 文件中&#xff0c; 表现写到 CSS 文件中&#xff0c; 行为写到 JavaScript文件中。 2、HTML结构 <!DOCTYPE html> <html><head><title>我的第一个页面</title><…

城市选择器小程序实现

1.效果图 2.使用方法 # 城市选择器&#xff0c; 城市数据库可自己导出 ##后台数据API 由HotApp小程序统计提供并维护&#xff0c;如果需要导出并部署在公司的生产环境&#xff0c;最后有SQL导出下载地址 ## 使用方法 - 复制pages/district到你的项目目录 - 把样式文件distr…

4/11 QT_day5

服务器端 头文件 #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QTcpServer> #include <QMessageBox> #include <QTcpSocket> #include <QList> QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEclass …

Java应用CPU飙升和死锁排查实战教程

引言 在日常开发中&#xff0c;我们可能会遇到Java应用CPU飙升和死锁的问题。本文将通过实际案例&#xff0c;为大家介绍如何排查这些问题 Java应用CPU飙升和死锁排查步骤 先执行top命令&#xff0c;找到CPU占用比较高的进程再执行jstack 进程id > dump.txt找到进程中CPU…

[GDC24]TheFInals的破坏系统

GDC24上TheFinals的开发工作室–EmbarkStudios带来; TheFinals把实时破坏在主流游戏上提升到了新的高度,可以说是新的标杆,达成了: 可以出现大规模的任意破坏破坏之后充分影响gameplay,可以把建筑任意炸毁之后,坍塌的建筑继续保留&物理正确(有正确的网络同步),可以废墟中继…

2024HW --> 安全产品 Powershell无文件落地攻击

在HW中&#xff0c;除了了解中间件&#xff0c;web漏洞&#xff0c;这些攻击的手法&#xff0c;还得了解应急响应&#xff0c;安全产品&#xff0c;入侵排查&#xff0c;溯源反制...... 那么今天&#xff0c;就来说一下安全产品&#xff08;安全公司我就不说了&#xff0c;这个…

使用 ChatGPT-4 编码就像与一个醉酒的天才一起工作

我决定从头到尾使用 ChatGPT 来构建一个用于管理书签的 Chrome 扩展。在生成了 30,000 多行 JavaScript、HTML、CSS 和云后端后&#xff0c;我的收获是&#xff0c;使用 ChatGPT 进行编码就像与一个醉酒的编程天才一起工作&#xff1a;他很懒&#xff0c;患有记忆丧失&#xff…

二极管分类及用途

二极管分类及用途 通用开关二极管 特点&#xff1a;电流小&#xff0c;工作频率高 选型依据&#xff1a;正向电流、正向压降、功耗&#xff0c;反向最大电压&#xff0c;反向恢复时间&#xff0c;封装等 类型&#xff1a;BAS316 ; IN4148WS 应用电路: 说明&#xff1a;应用…

智能革命:未来人工智能创业的天地

智能革命&#xff1a;未来人工智能创业的天地 一、引言 在这个数字化迅速变革的时代&#xff0c;人工智能(AI)已经从一个边缘科学发展成为推动未来经济和社会发展的关键动力。这一技术领域的飞速进步&#xff0c;不仅影响着科技行业的每一个角落&#xff0c;更是为创业者提供了…

【python】python抓取古诗文内容保存(源码)【独一无二】

&#x1f449;博__主&#x1f448;&#xff1a;米码收割机 &#x1f449;技__能&#x1f448;&#xff1a;C/Python语言 &#x1f449;公众号&#x1f448;&#xff1a;测试开发自动化【获取源码商业合作】 &#x1f449;荣__誉&#x1f448;&#xff1a;阿里云博客专家博主、5…

Ubuntu-22.04安装KVM虚拟机并安装Windows10

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、KVM是什么&#xff1f;二、安装步骤1.检查虚拟化2.查看KVM虚拟化3.安装KVM4.启用后台进程5.添加用户组6.重启电脑 三、使用步骤1.添加虚拟机2.配置虚拟机3.…

高颜值登录页面(一键复制)

你好&#xff0c;我是云桃桃。 一个希望帮助更多朋友快速入门 WEB 前端的程序媛。大专生&#xff0c;一枚程序媛&#xff0c;感谢关注。回复 “前端基础题”&#xff0c;可免费获得前端基础 100 题汇总&#xff0c;回复 “前端工具”&#xff0c;可获取 Web 开发工具合集 266篇…

leecode438 | 找到所有字符串中的异位词

题意大致是&#xff0c;给定两个字符串&#xff0c;s 和 p 其中 要在s 中找到由p的元素组成的子字符串&#xff0c;记录子字符串首地址 class Solution { public:vector<int> findAnagrams(string s, string p) {int m s.size(), n p.size();if(m < n)return {};vec…

python botos s3 aws

https://boto3.amazonaws.com/v1/documentation/api/latest/reference/services/s3.html AWS是亚马逊的云服务&#xff0c;其提供了非常丰富的套件&#xff0c;以及支持多种语言的SDK/API。本文针对其S3云储存服务的Python SDK&#xff08;boto3&#xff09;的使用进行介绍。 …