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

心之所想，行之将至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.如代码有不足之处，欢迎各位博友批评和指正，吾将虚心接受建议，共同改进和进步。

相关推荐
qiuiuiu4132 分钟前
正点原子RK3568学习日志12-注册字符设备
linux·开发语言·单片机·学习·ubuntu
_dindong1 小时前
Linux网络编程：Socket编程TCP
linux·服务器·网络·笔记·学习·tcp/ip
金士顿1 小时前
ethercat网络拓扑详细学习
学习
知识分享小能手2 小时前
uni-app 入门学习教程，从入门到精通，uni-app组件 —— 知识点详解与实战案例(4）
前端·javascript·学习·微信小程序·小程序·前端框架·uni-app
wahkim2 小时前
Flutter 学习资源及视频
学习
小白要努力sgy2 小时前
待学习--中间件
学习·中间件
~无忧花开~2 小时前
CSS学习笔记(五)：CSS媒体查询入门指南
开发语言·前端·css·学习·媒体
吴鹰飞侠3 小时前
AJAX的学习
前端·学习·ajax
我的xiaodoujiao3 小时前
使用 Python 语言 从 0 到 1 搭建完整 Web UI自动化测试学习系列 19--测试框架Pytest基础 3--前后置操作应用
python·学习·测试工具·pytest
lzj_pxxw3 小时前
嵌入式开发技巧：舍弃标志位,用宏定义函数实现程序单次运行
笔记·stm32·单片机·嵌入式硬件·学习
热门推荐
01GitHub 镜像站点02BongoCat - 跨平台键盘猫动画工具03UV安装并设置国内源04Linux下V2Ray安装配置指南05GitLab 零基础入门指南：从安装到项目管理全流程06XXE 注入漏洞全解析：从原理到实战07NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南08在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）092025软件测试面试八股文（含答案+文档）10两千字总结：Codex 国内如何安装和使用的教程，以及如何设置中文回答