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

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

相关推荐
蒙奇D索大几秒前
【计算机网络】408计算机网络高分指南：物理层编码与调制技术精讲
java·前端·学习·计算机网络
姝孟10 分钟前
C++学习——类与对象详细知识点总结
c++·笔记·学习
im_AMBER19 分钟前
Leetcode 35
笔记·学习·算法·leetcode
xiaoxiaoxiaolll1 小时前
封面论文丨薄膜铌酸锂平台实现强耦合电光调制，《Light Sci. Appl. 》报道机器学习优化新范式
人工智能·学习
im_AMBER2 小时前
React 03
前端·笔记·学习·react.js·前端框架·react
职业考试资料墙2 小时前
通信安全员备考真题及答案
学习·考试·题库·考证
朝朝暮暮Quake4 小时前
提示学习思想
学习
我的xiaodoujiao4 小时前
使用 Python 语言 从 0 到 1 搭建完整 Web UI自动化测试学习系列 20--PO（POM） 设计模式和用例撰写
python·学习·测试工具·设计模式·pytest
子不语1804 小时前
深度学习(一)——基础知识：Python语言/解释器/环境/编辑器
python·学习
热门推荐
01BongoCat - 跨平台键盘猫动画工具02GitHub 镜像站点03UV安装并设置国内源04GitLab 零基础入门指南：从安装到项目管理全流程05Linux下V2Ray安装配置指南062025软件测试面试八股文（含答案+文档）07Labelme从安装到标注：零基础完整指南08在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）09NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南10【vue篇】Vue 项目中的静态资源管理：assets vs static 终极指南