零基础开始学习鸿蒙开发-基础页面的设计

心之所想，行之将至2024-12-18 21:20

目录

1.样例图

2.逐项分析

[2.1 头顶布局分析：首先我们要把第一行的图标绘制出来，一个左一个右，很明显，需要放在一个Row容器中，具体代码如下：](#2.1 头顶布局分析：首先我们要把第一行的图标绘制出来，一个左一个右，很明显，需要放在一个Row容器中，具体代码如下：)

[2.2 和头像同一行的布局，需要注意的是，头像要绘制成圆角，使用 borderRadius方法调整即可，具体代码如下](#2.2 和头像同一行的布局，需要注意的是，头像要绘制成圆角，使用 borderRadius方法调整即可，具体代码如下)

[2.3 下面一行有四列，需要保持一致，所以，需要在Row中添加Column容器，保证里面的子项垂直排列。具体代码如下:](#2.3 下面一行有四列，需要保持一致，所以，需要在Row中添加Column容器，保证里面的子项垂直排列。具体代码如下:)

[2.4 剩下的布局即菜单布局，一共有6个，具体代码如下。](#2.4 剩下的布局即菜单布局，一共有6个，具体代码如下。)

3.完整的页面布局代码如下:

4.最终页面的运行效果如下

5.如代码有不足之处，欢迎各位博友批评和指正，吾将虚心接受建议，共同改进和进步。

1.样例图

1.1 我们拿到布局图片，比如这一张图是UI设计图，我们首先要分析一下布局， 可以简单的用visio或者word绘制一下草图，来确定整个页面的布局。

1.2 从图片中不难看出，该布局为垂直布局。

2.逐项分析

2.1 头顶布局分析：首先我们要把第一行的图标绘制出来，一个左一个右，很明显，需要放在一个Row容器中，具体代码如下：

javascript 复制代码 
 Row({space:250}){
           Row(){
             Column(){
               Image($r('app.media.settings')).width(30).height(30)
             }.justifyContent(FlexAlign.Start)
           }
           //设置水平左对齐
           Column(){
             Image($r('app.media.msg')).width(30).height(30)
           }.justifyContent(FlexAlign.End)
           //设置顶部对齐，并且设置顶部间距
         }

2.2 和头像同一行的布局，需要注意的是，头像要绘制成圆角，使用 borderRadius方法调整即可，具体代码如下

javascript 复制代码 
  Column(){
         Row(){
           Column(){
             Row(){
               Column(){
                 Image($r('app.media.avator')).width(50).height(50).borderRadius(50)
               }.margin({left:20}).borderRadius(50).backgroundColor('#FFFF')
               Column(){
                 Text('超级用户:admin').fontColor(Color.White)
                 Row(){
                   Text('金融会员').fontColor(Color.White).fontSize(10)
                 }.width(80).height(30)
               }
             }.width('70%')
           }.justifyContent(FlexAlign.Start)
           //设置水平左对齐
           Column(){
             Column(){
               Text('96.5').fontSize(20).fontColor(Color.Gray)
               Text('小白信用').fontColor(Color.Gray)
             }.backgroundColor(Color.White).width(70).height(70).borderRadius(50)
            /* Shape(){
               Circle({ width: 70, height: 70 }).fill(Color.White)
             }*/
           }.justifyContent(FlexAlign.Start).width('20%')
         }.width('100%')
       }

2.3 下面一行有四列，需要保持一致，所以，需要在Row中添加Column容器，保证里面的子项垂直排列。具体代码如下:

javascript 复制代码 
  Row({space:60}){
         Column(){
           Image($r('app.media.signIn')).width(20).height(20)
           Text('签到')
         }
          Column(){
            Image($r('app.media.sun')).width(20).height(20)
            Text('早起打卡')
          }
          Column(){
            Image($r('app.media.lunar')).width(20).height(20)
            Text('日历')
          }
          Column(){
            Image($r('app.media.task')).width(20).height(20)
            Text('任务')
          }

        }.justifyContent(FlexAlign.Start).width('100%').margin({left:20})

2.4 剩下的布局即菜单布局，一共有6个，具体代码如下。

javascript 复制代码 
 Column(){
          Row({space:150}){
            Column(){
              Row({space:5}){
                Image($r('app.media.cardIcon')).width(20).height(20)
                Text('卡包')
              }.alignItems(VerticalAlign.Top)
            }
          Column(){
            Text('银行卡、优惠券').fontColor('#ff706f6f')
          }
          }.height(10).width('100%').margin({left:30})
          Row().height(45)
          //账单设计
          Row(){
           Column(){
            Row({space:5}){
              Image($r('app.media.payment')).width(20).height(20)
              Text('账单')
            }.alignItems(VerticalAlign.Top)
           }
          }.height(10).width('100%').margin({left:30})

          Row().height(45)
          Row(){
            Column(){
             Row({space:80}){
              Column(){
                Row({space:5}){
                  Image($r('app.media.memberCenter')).width(20).height(20)
                  Text('会员中心')
                }.alignItems(VerticalAlign.Top)
              }
              Column(){
                Text('会员红包派对，约起!').fontColor('#ff706f6f')
              }
             }
            }
          }.height(10).width('100%').margin({left:30})
          Row().height(45)

          Row(){
            Column(){
            Row({space:180}){
            Column(){
              Row({space:5}){
                Image($r('app.media.myAsset')).width(20).height(20)
                Text('我的资产')
              }.alignItems(VerticalAlign.Top)
            }
            Column(){
              Text('9999.99').fontColor('#ff706f6f')
            }
            }
            }
          }.height(10).width('100%').margin({left:30})
          Row().height(45)
          Row(){
            Column(){
              Row({space:180}){
              Column(){
                Row({space:5}){
                  Image($r('app.media.iou')).width(20).height(20)
                  Text('我的白条')
                }.alignItems(VerticalAlign.Top)
              }
                Column(){
                  Text('去开通').fontColor('#ff706f6f')
                }
              }
            }
          }.height(10).width('100%').margin({left:30})
          //间隔行
          Row().height(45)
          Row(){
            Column(){
              Row({space:5}){
                Image($r('app.media.collection')).width(20).height(20)
                Text('我的收藏')
              }.alignItems(VerticalAlign.Top)
            }
          }.height(10).width('100%').margin({left:30})
        }

3.完整的页面布局代码如下:

javascript 复制代码 
@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  build() {
    Row() {
      //垂直布局
      Column() {
        //设置 和消息设置在同一行  ,alignItems设置为顶部布局
     Column(){
       Row(){
         Row({space:250}){
           Row(){
             Column(){
               Image($r('app.media.settings')).width(30).height(30)
             }.justifyContent(FlexAlign.Start)
           }
           //设置水平左对齐
           Column(){
             Image($r('app.media.msg')).width(30).height(30)
           }.justifyContent(FlexAlign.End)
           //设置顶部对齐，并且设置顶部间距
         }
       }
         Row(){
         }.height(50)
         //第二行
       Column(){
         Row(){
           Column(){
             Row(){
               Column(){
                 Image($r('app.media.avator')).width(50).height(50).borderRadius(50)
               }.margin({left:20}).borderRadius(50).backgroundColor('#FFFF')
               Column(){
                 Text('超级用户:admin').fontColor(Color.White)
                 Row(){
                   Text('金融会员').fontColor(Color.White).fontSize(10)
                 }.width(80).height(30)
               }
             }.width('70%')
           }.justifyContent(FlexAlign.Start)
           //设置水平左对齐
           Column(){
             Column(){
               Text('96.5').fontSize(20).fontColor(Color.Gray)
               Text('小白信用').fontColor(Color.Gray)
             }.backgroundColor(Color.White).width(70).height(70).borderRadius(50)
            /* Shape(){
               Circle({ width: 70, height: 70 }).fill(Color.White)
             }*/
           }.justifyContent(FlexAlign.Start).width('20%')
         }.width('100%')
       }
       }.width('100%').backgroundColor('#ff47ace3')

        Row(){
        }.height(20)
        //第三行
        Row({space:60}){
         Column(){
           Image($r('app.media.signIn')).width(20).height(20)
           Text('签到')
         }
          Column(){
            Image($r('app.media.sun')).width(20).height(20)
            Text('早起打卡')
          }
          Column(){
            Image($r('app.media.lunar')).width(20).height(20)
            Text('日历')
          }
          Column(){
            Image($r('app.media.task')).width(20).height(20)
            Text('任务')
          }

        }.justifyContent(FlexAlign.Start).width('100%').margin({left:20})

        Row(){
        }.height(10)

        Row(){
        }.height(2).width('95%').backgroundColor(Color.Gray)

        Row(){
        }.height(5)
        //用Column控制相同间隔
        Column(){
          Row({space:150}){
            Column(){
              Row({space:5}){
                Image($r('app.media.cardIcon')).width(20).height(20)
                Text('卡包')
              }.alignItems(VerticalAlign.Top)
            }
          Column(){
            Text('银行卡、优惠券').fontColor('#ff706f6f')
          }
          }.height(10).width('100%').margin({left:30})
          Row().height(45)
          //账单设计
          Row(){
           Column(){
            Row({space:5}){
              Image($r('app.media.payment')).width(20).height(20)
              Text('账单')
            }.alignItems(VerticalAlign.Top)
           }
          }.height(10).width('100%').margin({left:30})

          Row().height(45)
          Row(){
            Column(){
             Row({space:80}){
              Column(){
                Row({space:5}){
                  Image($r('app.media.memberCenter')).width(20).height(20)
                  Text('会员中心')
                }.alignItems(VerticalAlign.Top)
              }
              Column(){
                Text('会员红包派对，约起!').fontColor('#ff706f6f')
              }
             }
            }
          }.height(10).width('100%').margin({left:30})
          Row().height(45)

          Row(){
            Column(){
            Row({space:180}){
            Column(){
              Row({space:5}){
                Image($r('app.media.myAsset')).width(20).height(20)
                Text('我的资产')
              }.alignItems(VerticalAlign.Top)
            }
            Column(){
              Text('9999.99').fontColor('#ff706f6f')
            }
            }
            }
          }.height(10).width('100%').margin({left:30})
          Row().height(45)
          Row(){
            Column(){
              Row({space:180}){
              Column(){
                Row({space:5}){
                  Image($r('app.media.iou')).width(20).height(20)
                  Text('我的白条')
                }.alignItems(VerticalAlign.Top)
              }
                Column(){
                  Text('去开通').fontColor('#ff706f6f')
                }
              }
            }
          }.height(10).width('100%').margin({left:30})
          //间隔行
          Row().height(45)
          Row(){
            Column(){
              Row({space:5}){
                Image($r('app.media.collection')).width(20).height(20)
                Text('我的收藏')
              }.alignItems(VerticalAlign.Top)
            }
          }.height(10).width('100%').margin({left:30})
        }
      }.width('100%').height('100%')
    }.height('100%')
  }


}

4.最终页面的运行效果如下

5.如代码有不足之处，欢迎各位博友批评和指正，吾将虚心接受建议，共同改进和进步。

相关推荐
西岸行者6 天前
学习笔记：SKILLS 能帮助更好的vibe coding
笔记·学习
悠哉悠哉愿意6 天前
【单片机学习笔记】串口、超声波、NE555的同时使用
笔记·单片机·学习
别催小唐敲代码6 天前
嵌入式学习路线
学习
毛小茛6 天前
计算机系统概论——校验码
学习
babe小鑫6 天前
大专经济信息管理专业学习数据分析的必要性
学习·数据挖掘·数据分析
winfreedoms6 天前
ROS2知识大白话
笔记·学习·ros2
在这habit之下6 天前
Linux Virtual Server（LVS）学习总结
linux·学习·lvs
我想我不够好。6 天前
2026.2.25监控学习
学习
im_AMBER6 天前
Leetcode 127 删除有序数组中的重复项 | 删除有序数组中的重复项 II
数据结构·学习·算法·leetcode
CodeJourney_J6 天前
从“Hello World“ 开始 C++
c语言·c++·学习
热门推荐
01GitHub 镜像站点02OpenClaw 使用和管理 MCP 完全指南03OpenClaw + 飞书（Feishu）环境搭建指南04Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services05OpenClaw优化飞书API 额度已耗尽问题06Window 10部署openclaw报错node.exe : npm error code 12807Clawdbot部署教程：解决‘gateway token missing’授权问题的完整步骤08小黑课堂计算机二级WPSoffice题库软件下载安装教程（2026年3月最新版）09OpenClaw大龙虾机器人完整安装教程10网站改了域名，如何查找？