鸿蒙5.0开发进阶：纵向横向列表联动实现案例

最新推荐文章于 2025-02-23 15:39:24 发布
最新推荐文章于 2025-02-23 15:39:24 发布
阅读量674 收藏 19
点赞数 6
分类专栏： 鸿蒙5.0 文章标签： harmonyos 华为 1024程序员节 android 嵌入式硬件 前端 鸿蒙系统
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/HSMMQAQ/article/details/143399967
版权
最低0.47元/天 解锁文章
鸿蒙应用开发（基础篇）之列表组件
xiangzhihong8的专栏
09-12 3474
List是很常用的滚动类容器组件，一般和子组件ListItem一起使用，List列表中的每一个列表项对应一个ListItem组件。Grid组件为网格容器，是一种网格列表，由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。Grid组件一般和子组件GridItem一起使用，Grid列表中的每一个条目对应一个GridItem组件。
【鸿蒙UI实战开发】基于List和Scroller由简单到复杂列表布局开发实践
HarmonyOSMN的博客
07-01 922
在多列表页面开发中，数据展示往往有联动关系，：单列表布局多长列表页面，如门户首页、商城首页：双列表滚动联动，如城市选择：多列表滚动横向纵向联动，如汽车参数对比，股票信息列表单列表布局多长列表页面，如门户首页、商城首页效果图运用List组件作为整个首页长列表的容器，通过ListItem对不同模块进行定制。核心代码双列表滚动同向联动，如城市选择效果图整体运用Stack组件（List组件+List组件）布局，左List作为城市列表，右List快捷导航列表，通过ListItem对对应数据进行渲染。
鸿蒙Next-Scroll滚动-控横向滚动
微风的博客
03-17 654
鸿蒙Next-Scroll滚动-控横向滚动
HarmonyNext双向滑动列表的实现
最新发布
zhaoyangzhou的博客
02-23 249
HarmonyNext双向滑动列表的实现
鸿蒙Scroll布局,横向与纵向，显示关闭bar长条
简公子的博客
08-02 460
【代码】鸿蒙Scroll布局。
HarmonyOS鸿蒙应用开发( 四、重磅组件List列表组件使用详解)
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
01-23 7834
List列表组件，是一个非常常用且重要的组件。可以说在一个应用中，它的身影无处不在。它包含一系列相同宽度的列表项，适合连续、多行呈现同类数据，例如图片列表和和文本列表等。ArkUI 框架采用 List 容器创建列表（类似 Android 的 RecycleView、Compose 的 LazyColumn）。
HarmonyOS中的组件的滚动条说明
zhizun95tianzi的博客
03-27 2055
滚动条的基本说明如何控制滚动把滚动条改为横向的滚动。
鸿蒙5.0版开发：ArkTS基础组件（ScrollBar）
m0_69424697的博客
09-19 682
滚动条组件ScrollBar，用于配合可滚动组件使用，如List、Grid、Scroll。
鸿蒙5.0版开发：ArkTS容器组件（Tabs）
m0_69424697的博客
09-27 1306
通过页签进行内容视图切换的容器组件，每个页签对应一个内容视图。
鸿蒙5.0版开发：ArkTS组件-Swiper
m0_69424697的博客
11-05 399
滑块视图容器，提供子组件滑动轮播显示的能力。
鸿蒙5.0版开发：ArkTS组件-ScrollBar
m0_69424697的博客
11-06 440
滚动条组件ScrollBar，用于配合可滚动组件使用，如List、Grid、Scroll。
鸿蒙开发学习笔记——列表布局List
Sweet7weight的博客
03-18 627
鸿蒙开发List列表组件
鸿蒙HarmonyOS开发：List列表组件的使用详解及案例演示
在这里，我乐于倾囊相授，分享我的技术心得、项目实战经验、技术技巧。希望能够惠及更多的开发者，助力大家在技术的海洋中扬帆远航。
05-15 9011
在我们常用的手机应用中，经常会见到一些数据列表，如设置页面、通讯录、商品列表等。下图中两个页面都包含列表，“首页”页面中包含两个网格布局，“商城”页面中包含一个商品列表。列表中都包含一系列相同宽度的列表项，连续、多行呈现同类数据，例如图片和文本。常见的列表有线性列表（List列表）和网格布局（Grid列表）。为了帮助开发者构建包含列表的应用，ArkUI提供了List组件和Grid组件，开发者使用List和Grid组件能够很轻松的完成一些列表页面。
鸿蒙开发-List组件
qq_62737318的博客
01-28 584
注意list内部不允许使用其他容器，一定要使用listItem，且listItem内，只允许使用一个容器，不允许有多个（类似于Text，row，column）.layoutWeight(1)//按权重进行分配，默认0，为0时占的高度为自己配的高度，为1时则根据权重分配，若多个为1时则进行平均分配。1.列表项（ListItem）数量过多超出屏幕后，会自动提供滚动功能。2.列表项（ListItem）既可以纵向排列，也可以横向排列。并且ListItem不是容器，List才是容器，
鸿蒙(ArkTS)—ArkUI布局开发常见问题
m0_70749039的博客
05-28 2034
容器组件在使用position之后会脱离文本流，导致容器脱离外层容器束缚，导致height不生效，可以将外层容器换成Stack可以解决这个问题。
【HarmonyOS】横向List高度适配
zhongcongxu01的专栏
09-26 338
当list设置横向布局时，list高度默认撑满没有达到预期的高度自适应，可以通过onAreaChange动态修改高度。
鸿蒙系列--组件介绍之其他基础组件（下）
weixin_42277946的博客
12-26 1543
鸿蒙系列--组件介绍之其他基础组件（下）
鸿蒙关于可以实现滚动效果的容器组件的相关知识
qq_43474235的博客
08-18 1681
在开发的过程中，用户在使用app的过程中对于滚动条样式审美的提升，不断向开发人员提出建议，开发人员不得不改变滚动条样式。通过使用ScrollBar组件（需要和Grid公用同一个Scroller）来自定义样式。Grid的属性属性名类型说明scrollBarBarState设置滚动条状态。默认值：BarState.autoBarState.off 关闭BarState.on 常驻BarState.auto 按需显示设置滚动条的颜色。设置滚动条的宽度。
scroll鸿蒙横向滑动时一下一个照片
11-22
在HarmonyOS（鸿蒙系统）中，如果你想要创建一个类似的效果，让用户在横向滑动时逐个显示照片，你可以使用Scroller组件结合ViewGroup的onHorizontalScrollListener。首先，你需要在布局文件中设置一个RecyclerView或ScrollView作为承载图片的容器，并为每个照片项设置滑动监听。 1. 在XML布局中，配置RecyclerView或ScrollView： ```xml <RecyclerView android:id="@+id/image_recycler_view" android:layout_width="match_parent" android:layout_height="match_parent" android:nestedScrollingEnabled="false" /> <!-- 或者如果是ScrollView --> <ScrollView android:id="@+id/image_scroll_view" android:scrollbars="horizontal" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:orientation="horizontal" android:layout_width="wrap_content" android:layout_height="0dp"/> </ScrollView> ``` 2. 在Activity或Fragment中，初始化并设置滚动监听： ```java RecyclerView recyclerView = findViewById(R.id.image_recycler_view); recyclerView.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false)); // 或者对于ScrollView ScrollView scrollView = findViewById(R.id.image_scroll_view); scrollView.setOnTouchListener(new View.OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { // 检查是否为水平滑动事件 if (event.getActionMasked() == MotionEvent.ACTION_SCROLL && event.getAxis() == MotionEvent.AXIS_HORIZ) { int xDiff = (int) event.getX() - scrollView.getX(); // 实现平移效果，这里只是一个示例，实际需要配合数据源调整展示的照片 // updateCurrentImageIndex(xDiff); } return false; } }); // 更新当前显示的照片的方法 private void updateCurrentImageIndex(int offset) { // 根据偏移量计算要显示的照片索引，并切换相应的视图或item int currentIndex = calculateCurrentImageIndex(offset); showPhoto(currentIndex); } // 具体的计算方法，根据你的数据结构实现 private int calculateCurrentImageIndex(int offset) { // ... } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值