第十天学习ArkUI布局与组件，包括基本布局、常用组件

最新推荐文章于 2025-03-31 11:55:07 发布

MarkHD

最新推荐文章于 2025-03-31 11:55:07 发布

阅读量655

点赞数 16

分类专栏： HarmonyOS 学习文章标签：学习

本文链接：https://blog.csdn.net/gapapp/article/details/145510726

版权

HarmonyOS 学习专栏收录该内容

29 篇文章

订阅专栏

ArkUI布局与组件实战指南：从基础到进阶

——零基础快速掌握HarmonyOS开发核心技能

文章目的

本文旨在帮助HarmonyOS开发者快速掌握ArkUI布局与组件的核心知识，通过理论讲解+代码实战的方式，从基础布局到复杂组件逐一解析，让读者能够独立完成界面设计并理解底层逻辑。

核心要求

内容深度：覆盖ArkUI核心布局类型（Flex、Grid、VStack/HStack）及常用组件（Text、Button、Image）
代码实战：提供可直接运行的代码示例，标注关键参数说明
逻辑清晰：按“概念→实现→优化”递进式教学
适配实践：针对不同屏幕尺寸的响应式设计技巧

一、ArkUI布局基础

ArkUI采用声明式编程范式，通过组合基础布局实现复杂界面。核心布局类型分为：

1. Flex布局

通过flexDirection定义主轴方向，justifyContent和alignItems控制对齐方式。

// 代码示例：水平居中按钮  
import { Flex } from '@ohos/arkui';  

<Flex flexDirection="row" justifyContent="center">  
  <Button text="点击"/>  
</Flex>

关键点：Flex布局默认主轴为水平方向，wrap属性支持多行排列

2. Grid网格布局

通过columns和rows定义列数与行数，适合表格化场景。

// 代码示例：4x4网格  
<Grid columns={4} rows={4}>  
  {[...Array(16)].map((_, i) => <Text>{i+1}</Text>)}  
</Grid>

技巧：使用gap属性设置单元间距，提升视觉层次

二、常用UI组件解析

ArkUI提供丰富的原子组件，掌握以下三大类即可覆盖80%需求：

1. 文本组件 `<Text>`

支持字体属性链式调用，如fontFamily("Roboto").fontSize(18)。

<Text>  
  <Text fontWeight="bold">重要信息：</Text>  
  需要用户注意的内容  
</Text>

注意：长文本建议使用<TextArea>避免溢出

2. 按钮组件 `<Button>`

通过onPress绑定点击事件，可通过width和height控制尺寸。

<Button  
  text="提交"  
  onClick={() => console.log('按钮被点击')}  
  width="200px"  
/>

进阶：结合<Popover>实现浮层菜单

3. 图片组件 `<Image>`

支持本地资源和网络加载，fit属性控制缩放模式。

<Image  
  src="common/logo.png"  
  width="150px"  
  height="auto"  
  fit="contain" // 等比缩放  
/>

性能优化：使用<MemoryCache>缓存频繁加载的图片

三、实战案例：响应式导航栏

演示如何通过MediaQuery实现自适应布局：

// 导航栏组件  
import { Column, Row, Text } from '@ohos/arkui';  

export default function NavBar() {  
  const [width, setWidth] = useState(0);  
  useEffect(() => {  
    const updateWidth = () => setWidth(window.innerWidth);  
    window.addEventListener('resize', updateWidth);  
    return () => window.removeEventListener('resize', updateWidth);  
  }, []);  

  return (  
    <Row backgroundColor="#fff" padding="16px">  
      <Column flex="1">  
        <Text fontSize={width > 600 ? 24 : 18}>标题</Text>  
      </Column>  
      <Row>  
        {width > 1000 && (  
          <Button text="登录" />  
        )}  
      </Row>  
    </Row>  
  );  
}