当前位置: 首页 > news >正文

开启鸿蒙开发之旅:核心组件及其各项属性介绍——布局容器组件2

本节继续补充4个鸿蒙系统布局容器组件,分别是Stack、Flex、List、Tabs。

1. Stack组件


 Stack组件是一个用于堆叠子组件的布局容器。它允许子组件按照顺序堆叠,后面的组件会覆盖前面的组件。

 

主要属性和功能:

  • alignment:定义子组件的对齐方式,可以是topStarttopCentertopEndcenterbottomStartbottomCenterbottomEnd等。
  • dividers:设置分割线,可以定义分割线的样式和位置。
  • overlap:设置子组件是否可以重叠。

使用场景:

当需要实现组件重叠效果,或者需要在一个固定位置上堆叠多个组件时,可以使用Stack组件。

2. Flex组件


Flex组件是一个用于创建灵活布局的容器,它允许子组件在水平或垂直方向上进行排列。

主要属性和功能:

  • direction:定义主轴的方向,可以是row(水平)或column(垂直)。
  • wrap:定义子组件是否可以换行,如nowrapwrap等。
  • justifyContent:定义子组件在主轴上的对齐方式。
  • alignItems:定义子组件在交叉轴上的对齐方式。
  • alignContent:定义多行子组件在交叉轴上的对齐方式。

使用场景: 

当需要创建响应式布局,尤其是在不同屏幕尺寸和方向上保持布局的一致性时,Flex组件非常有用。

3. List组件


List组件用于显示列表数据,它提供了滚动功能,允许用户在有限的屏幕空间内浏览更多内容。

 

主要属性和功能:

  • scrollBar:设置是否显示滚动条。
  • scroller:定义滚动行为,如是否启用惯性滚动等。
  • divider:设置列表项之间的分隔线。
  • onScroll:滚动事件的处理函数。

使用场景: 

当需要显示列表数据,如联系人列表、新闻列表等,List组件是非常合适的选择。

4. Tabs组件


Tabs组件提供了一个选项卡界面,允许用户在不同的视图之间切换。

 

主要属性和功能:

  • controller:用于控制Tabs组件的状态,如当前选中的标签页。
  • barPosition:设置标签栏的位置,可以是topbottomstartend等。
  • scrollable:定义标签是否可以滚动。
  • onChange:标签页切换事件的处理函数。

使用场景:

 当需要提供多个视图之间的快速切换,如设置页面中的不同分类选项卡,Tabs组件非常适合。

这些组件是构建鸿蒙应用界面时的基础工具,掌握它们的使用对于开发高效、美观的用户界面至关重要。

代码示例

build() {
// Stack组件
Stack({ alignment: Alignment.Center }) {// 子组件
}// Flex组件
Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween }) {// 子组件
}// List组件
List({ space: 20 }) {// 子组件ListItem() {}
}// Tabs组件
Tabs({ barPosition: BarPosition.Top }) {// 子组件TabContent() {Text('首页的内容').fontSize(30)}.tabBar('首页')TabContent() {Text('推荐的内容').fontSize(30)}.tabBar('推荐')
}
}


http://www.mrgr.cn/news/71219.html

相关文章:

  • XML在线格式化 - 加菲工具
  • 神经网络
  • 微服务中引入消息队列的利弊
  • Github 2025-01-15 C开源项目日报 Top10
  • Java Stream流操作List全攻略:Filter、Sort、GroupBy、Average、Sum实践
  • 【面试题】技术场景 5、日志采集ELK
  • Mysql高可用架构方案
  • 如何在60分钟内进行ASO竞争对手分析(App Store 和 Google Play Store)
  • seatunnel常用集群操作命令
  • 鸿蒙系统(HarmonyOS)与OpenHarmony
  • notepad++下载安装教程
  • 全球碳循环数据集(2000-2023)包括总初级生产力、生态系统净碳交换和生态系统呼吸变量
  • upload-labs通关练习---更新到15关
  • 【Conda】Windows下conda的安装并在终端运行
  • 第三百二十节 Java线程教程 - Java线程中断、Java Volatile变量
  • 3349、检测相邻递增子数组 Ⅰ
  • golang如何实现sse
  • 一文熟悉redis安装和字符串基本操作
  • 37 string类关键函数的模拟实现
  • 【网络安全渗透测试零基础入门】之Vulnhub靶场PWNOS: 2.0 多种渗透方法,收藏这一篇就够了!
  • FAS在数据库环境中应用详解
  • 逻辑数据编织平台现代企业数据管理和分析的理想选择
  • SQL面试题——奔驰面试题
  • 创业铁盘论
  • 超级计算机挑战人类智力,谁才是最后赢家?
  • 发社交动态,小心它泄露了你的隐私——不只是地理位置,还有眼神中倒影成像