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

HarmonyOS APP实战-画图APP - 第2篇：核心框架搭建

news 2026/7/13 1:59:53

HarmonyOS APP实战-画图APP - 第2篇：主页面布局与基础交互

1. 开篇

在上一篇《准备开发环境与创建项目》中，我们完成了HarmonyOS开发环境的搭建，使用DevEco Studio创建了画图APP项目工程，并成功运行了默认的Hello World页面。在EntryAbility中配置了全屏显示，项目基础结构已准备就绪。

本文将聚焦于画图APP的核心界面搭建。我们将设计一个三栏式布局：顶部工具栏（绘制模式切换、撤销重做按钮）、中间画布区域（承载所有绘制内容）、底部颜色选择栏（基础颜色选择）。同时，我们将集成Canvas组件，并为其绑定基础触摸事件，为后续章节的形状绘制、手绘功能打下坚实基础。

完成本篇后，你将看到一个完整的画图APP界面框架，具备响应式布局能力，可以在不同屏幕尺寸上自适应显示。

2. 核心实现

2.1 基础配置与数据模型设计

在开始界面布局之前，我们需要设计APP的数据模型。创建一个model文件夹，定义绘制模式和颜色相关的枚举与接口。

// model/DrawingData.ets// 绘制模式枚举：后续将扩展矩形、圆形、自由画笔等exportenumDrawMode{RECTANGLE='rectangle',// 矩形CIRCLE='circle',// 圆形FREEDRAW='freedraw',// 自由画笔NONE='none'// 无模式（初始状态）}// 画笔属性接口：管理当前画笔的颜色、粗细、透明度exportinterfaceBrushProperty{color:string;// 画笔颜色，格式：#RRGGBBlineWidth:number;// 画笔粗细，像素值opacity:number;// 透明度，0-1}

关键点说明：

DrawMode枚举定义了三种绘制模式，后续将在工具栏中通过图标按钮切换
BrushProperty接口封装了画笔的核心属性，后续颜色选择器和粗细滑块将修改这些属性
使用export关键字导出，便于其他模块引用

2.2 核心逻辑：主页面布局组件

Index.ets是整个APP的入口页面，负责组装ToolBar、Canvas和ColorPicker三个核心区域。我们需要实现响应式布局，确保在竖屏和横屏下都能正常显示。

// pages/Index.etsimport{DrawMode,BrushProperty}from'../model/DrawingData'import{ToolBar}from'./ToolBar'import{ColorPicker}from'./ColorPicker'@Entry@Componentstruct Index{// 当前绘制模式，默认无模式@StatecurrentMode:DrawMode=DrawMode.NONE// 画笔属性，初始颜色黑色，粗细5px，透明度1（不透明）@Statebrush:BrushProperty={color:'#000000',lineWidth:5,opacity:1}// Canvas画布的尺寸，通过onAreaChange动态获取@StatecanvasWidth:number=0@StatecanvasHeight:number=0build(){// 使用Column垂直布局，从上到下排列工具栏、画布、颜色选择器Column(){// 顶部工具栏：提供绘制模式切换、撤销重做ToolBar({currentMode:this.currentMode,brush:this.brush,onModeChange:(mode:DrawMode)=>{this.currentMode=mode}})// 中间画布区域：使用Stack包裹Canvas，以便后续添加触摸事件Stack(){// Canvas组件，后续绘制操作都在此进行Canvas(this.canvasContext).width('100%').height('100%').backgroundColor('#FFFFFF')// 获取Canvas的渲染上下文，用于绘制操作.onReady(()=>{console.info('Canvas 已就绪')})// 触摸事件：开始触摸时记录位置，用于后续绘制.onTouch((event:TouchEvent)=>{if(event.type===TouchType.Down){// 获取触摸点在Canvas内的坐标constx=event.touches[0].xconsty=event.touches[0].yconsole.info(`触摸点坐标: (${x},${y})`)// 后续章节将在此触发绘制逻辑}})}.layoutWeight(1)// 自动填充剩余空间.width('100%')// 底部颜色选择栏：提供基础颜色选择和透明度调节ColorPicker({brush:this.brush,onColorChange:(color:string)=>{this.brush={...this.brush,color:color}}})}.width('100%').height('100%').backgroundColor('#F5F5F5')// 监听容器尺寸变化，动态更新Canvas尺寸.onAreaChange((oldValue:Area,newValue:Area)=>{this.canvasWidth=newValue.widthasnumberthis.canvasHeight=newValue.heightasnumberconsole.info(`容器尺寸:${this.canvasWidth}x${this.canvasHeight}`)})}// Canvas渲染上下文，用于后续绘制privatecanvasContext:CanvasRenderingContext2D=newCanvasRenderingContext2D()}

关键点说明：

@State装饰的变量用于声明式响应UI更新，brush对象的变化会自动触发颜色选择器和后续绘制组件的刷新
layoutWeight(1)让Canvas区域填充工具栏和颜色选择器之外的剩余空间
CanvasRenderingContext2D是HarmonyOS提供的2D渲染上下文，所有绘制操作都通过它完成。文档中提到的@ohos.graphics.drawing模块提供了更底层的绘制能力，我们将在后续篇章中结合使用
onAreaChange回调用于监听容器尺寸变化，确保Canvas能够自适应屏幕旋转和窗口调整

2.3 完整模块：工具栏组件

工具栏组件包含绘制模式切换按钮（矩形、圆形、自由画笔）和功能按钮（撤销、重做、清空）。按钮采用图标式设计，选中状态高亮显示。

// pages/ToolBar.etsimport{DrawMode,BrushProperty}from'../model/DrawingData'@Componentexportstruct ToolBar{// 当前绘制模式privatecurrentMode:DrawMode// 画笔属性privatebrush:BrushProperty// 模式切换回调privateonModeChange:(mode:DrawMode)=>voidbuild(){// 使用Row水平布局，均匀分布所有工具按钮Row(){// 矩形模式按钮Button(){Text('□').fontSize(24).fontColor(this.currentMode===DrawMode.RECTANGLE?'#FF6600':'#333333')}.width(40).height(40).backgroundColor(this.currentMode===DrawMode.RECTANGLE?'#E0E0E0':'#FFFFFF').borderRadius(8).onClick(()=>{this.onModeChange(DrawMode.RECTANGLE)})// 圆形模式按钮Button(){Text('○').fontSize(24).fontColor(this.currentMode===DrawMode.CIRCLE?'#FF6600':'#333333')}.width(40).height(40).backgroundColor(this.currentMode===DrawMode.CIRCLE?'#E0E0E0':'#FFFFFF').borderRadius(8).onClick(()=>{this.onModeChange(DrawMode.CIRCLE)})// 自由画笔模式按钮Button(){Text('✎').fontSize(24).fontColor(this.currentMode===DrawMode.FREEDRAW?'#FF6600':'#333333')}.width(40).height(40).backgroundColor(this.currentMode===DrawMode.FREEDRAW?'#E0E0E0':'#FFFFFF').borderRadius(8).onClick(()=>{this.onModeChange(DrawMode.FREEDRAW)})// 分隔线Divider().vertical(true).height(30).color('#CCCCCC').margin({left:10,right:10})// 撤销按钮Button(){Text('↩').fontSize(24).fontColor('#333333')}.width(40).height(40).backgroundColor('#FFFFFF').borderRadius(8).onClick(()=>{// 撤销功能将在第11篇实现console.info('撤销操作')})// 重做按钮Button(){Text('↪').fontSize(24).fontColor('#333333')}.width(40).height(40).backgroundColor('#FFFFFF').borderRadius(8).onClick(()=>{// 重做功能将在第11篇实现console.info('重做操作')})// 清空按钮Button(){Text('🗑').fontSize(24).fontColor('#333333')}.width(40).height(40).backgroundColor('#FFFFFF').borderRadius(8).onClick(()=>{// 清空画布功能console.info('清空画布')})}.width('100%').padding({left:16,right:16,top:8,bottom:8}).backgroundColor('#FFFFFF').justifyContent(FlexAlign.SpaceAround)// 添加阴影效果.shadow({radius:4,color:'#1A000000',offsetX:0,offsetY:2})}}

关键点说明：

按钮选中状态通过currentMode判断，矩形模式选中时文字颜色变为橙色(#FF6600)，背景变为浅灰色，提供清晰的视觉反馈
Divider组件作为分隔线，将绘制模式按钮与功能按钮分开，提升界面层次感
shadow属性为工具栏添加了底部阴影，使其与画布区域产生视觉分离
撤销、重做、清空按钮目前仅打印日志，具体逻辑将在后续章节实现

2.4 完整模块：颜色选择器组件

颜色选择器提供8种常用颜色和透明度滑块，用户点击颜色按钮即可切换画笔颜色。后续可扩展为自定义色盘。

// pages/ColorPicker.etsimport{BrushProperty}from'../model/DrawingData'@Componentexportstruct ColorPicker{// 画笔属性privatebrush:BrushProperty// 颜色变更回调privateonColorChange:(color:string)=>void// 颜色列表：8种常用颜色privatecolors:string[]=['#000000','#FF0000','#00FF00','#0000FF','#FFFF00','#FF00FF','#00FFFF','#808080']build(){// 使用Column垂直布局，上方是颜色按钮行，下方是透明度控制Column(){// 颜色按钮行Row(){ForEach(this.colors,(color:string)=>{Button(){// 颜色按钮显示当前颜色}.width(30).height(30).backgroundColor(color).borderRadius(15)// 圆形按钮.border({width:this.brush.color===color?3:1,color:this.brush.color===color?'#FF6600':'#CCCCCC'}).onClick(()=>{this.onColorChange(color)})},(color:string)=>color)}.width('100%').justifyContent(FlexAlign.SpaceAround).padding({top:8,bottom:8})// 透明度控制行：使用Slider滑块调节透明度Row(){Text('透明度').fontSize(14).fontColor('#666666').margin({right:8})Slider({value:this.brush.opacity*100,// Slider的值范围0-100min:0,max:100,step:1}).width('70%')// 滑块值变化时更新画笔透明度.onChange((value:number)=>{this.brush.opacity=value/100// 触发UI刷新this.brush={...this.brush}})}.width('100%').padding({left:16,right:16,bottom:8})}.width('100%').padding({left:16,right:16,top:8,bottom:8}).backgroundColor('#F0F0F0')}}

关键点说明：

颜色按钮通过backgroundColor直接显示对应颜色，使用borderRadius(15)将其变为圆形
选中状态的判断：当前画笔颜色与按钮颜色一致时，边框变为橙色并加粗，提供清晰的选中指示
Slider组件用于透明度调节，其value范围是0-100，我们需要将其转换为0-1的透明度值存储在brush.opacity中
注意：修改brush对象的属性后，需要重新赋值this.brush = { ...this.brush }才能触发UI重绘，因为@State装饰器只监听引用变化，不监听属性变化