【鸿蒙开发从0到1 支付宝界面布局实现day11】

Transcend oneself

已于 2024-09-13 21:10:10 修改

阅读量380

点赞数 19

分类专栏：鸿蒙开发文章标签： harmonyos android 华为鸿蒙

于 2024-09-13 21:08:36 首次发布

本文链接：https://blog.csdn.net/qq_63713328/article/details/142205406

版权

鸿蒙开发专栏收录该内容

10 篇文章 1 订阅

订阅专栏

鸿蒙开发案例-支付宝界面

一.布局思路
二.页面搭建
三.整体效果展示
- 1.效果展示
- 2.完整代码演示
四.总结

一.布局思路

整体stack布局+底部的tab
主体区域的架子:头部+主体界面(层叠关系,主题页面可以滚动)
给主体内容填内容
装饰图片
整体效果展示

二.页面搭建

1.整体stack布局+底部的tab

我们设置好后我们可以看到,我们设置的区块居中显示,而我们需要将它固定在底部,我们可以使用层叠布局将白色区域固定在页面底部在这里插入图片描述

给组件内部添加图标
我这里采用的是layoutweight让他们进行子使用缩放,为的就是使得整个导航栏更加灵活,无论我们是往里面添加还是删除子菜单都不会影响到底部导航栏的排版,他们之间的间距都会自适应缩放
在这里插入图片描述

添加一个子菜单,依然会自适应子菜单之间的宽度

2.主体区域的架子:头部+主体界面(层叠关系,主题页面可以滚动)

层叠关系依然是使用我们的stack()组件,这里要想我们的主体页面达到滚动的效果,我们可以让一个scroll组件将主体部分包裹即可
在这里插入图片描述

设置了宽高,却没有显示,是因为头部的层级太低了,被遮住了,我们只需要使zIndex将头部的层级调大就可以了

继续是通过stack中的方位,将导航栏固定到顶部

完成主体内容的滚动
可以看到.会有一部分区域在我们内容区的外面,我们需要将此问题解决,我们只需要给主体部分的组件设置一个外边距,外边距的高度与导航窗格的高度保持一致

解决后

实现顶部导航栏,只需要给中间的搜索框设置一个layoutweight自适应,左右的宽高就让他由内容撑开,间距直接用内外边距就可以解决

实际上搜索框也可以让中间部分自适应,左右两侧通过内外边距调整间距,
这样就可以直接实现导航栏

3.给主体内容填内容

(1).完成快捷导航

布局: 一个行包裹四个列,为了实现四个快捷菜单之间的间距自适应,我们依然可以给每个column设置layoutweight(1)属性,我们可以不用给此设置高度,最后面只需要给row设置一个内边距,把区域撑大就可以了

在这里插入图片描述

(2)服务导航

服务导航的布局我们清晰的可以看到,是一个column包裹三个row,然后每个row中包裹五个column,因为每一个快捷菜单之间的间距都是一致的,我们依然使用自适应去做,只需要给row中的每个column加上layoutweight(1)即可,在row中的想要调节五个column之间的间距,我们可以直接给row传入对象space:
进行设置,同理,我们想要拉开三个row垂直的间距,可以直接给最外层的column设置一个space即可
在这里插入图片描述

4.装饰图片

下面的图片我都是直接使用图片进行装饰的,因为它这里是要通过点击图片跳转,我暂时只能做到这样,就直接给图片了,这里的布局与上面也是类似,一个row包含三个image,这里也一样不用设置图片的宽高,直接给三种图片都加上layoutWeight(1)即可,最后面就直接用两个image组件就可以完成整个页面啦

在这里插入图片描述

三.整体效果展示

1.效果展示

下面还有图片,我们可以按住鼠标左键拖拽,实现滚动效果哦
在这里插入图片描述

2.完整代码演示

import { text } from '@kit.ArkGraphics2D';

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    //整体stack布局+底部导航
    //布局顶部的导航和实现主体内容的滚动


    Stack({ alignContent: Alignment.Bottom }) {
      //头部导航
      //头部导航,我们需要让其固定在页面的顶部,
      //直接给stack设置
      Stack({ alignContent: Alignment.Top }) {
        Row() {
          //左
          Column() {
            Row() {
              Text('北京')
                .fontColor('#ffff')

              Image($r('app.media.xiajiantou'))
                .width(20)
                .fillColor('#fff')
            }

            Text('晴27℃')
              .fontSize(12)
              .fontColor('#fff')


          }.padding({
            left: 10,
            right: 10
          })
          .alignItems(HorizontalAlign.Start)

          //中
          Row() {

            Image($r('app.media.sousuo'))
              .width(20)
              .margin({
                left: 5,
                right: 5
              })

            Text('北京交通一卡通')
              .fontSize(14)
              .layoutWeight(1)

            Text('搜索')
              .fontColor('#5b73e1')
              .width(55)
              .textAlign(TextAlign.Center)
              .border({
                width: { left: 1 },
                color: '#ccc',
              })
          }.layoutWeight(1)
          .height(32)
          .backgroundColor('#fff')
          .borderRadius(5)

          //右
          Image($r('app.media.gengduo'))
            .width(30)
            .margin({ left: 12, right: 10 })
            .fillColor('#fff')

        }
        .width('100%')
        .height(60)
        .backgroundColor('#5b73e1')

        //主体展示区域

        Scroll() {
          Column() {
            //tap快捷导航
            Row(){
              Column(){
                Image($r('app.media.saoyisao'))
                  .width(36)
                  .fillColor('#fff')
                Text('扫一扫')
                  .fontColor('#fff')
              }.layoutWeight(1)

              Column(){
                Image($r('app.media.shoufukuan'))
                  .width(36)
                  .fillColor('#fff')
                Text('收付款')
                  .fontColor('#fff')
              }.layoutWeight(1)

              Column(){
                Image($r('app.media.chuhang'))
                  .width(36)
                  .fillColor('#fff')
                Text('出行')
                  .fontColor('#fff')
              }.layoutWeight(1)

              Column(){
                Image($r('app.media.kabao'))
                  .width(36)
                  .fillColor('#fff')
                Text('卡包')
                  .fontColor('#fff')
              }.layoutWeight(1)

            }.width('100%')
            .backgroundColor('#5b73e1')
            .padding({
              top:5,
              bottom:15
            })

            //中间部分的快捷导航
            Column({space:10}){
              Row(){
                Column({space:8}){
                  Image($r('app.media.chuhang'))
                    .width(28)
                  Text('滴滴出行')
                    .fontSize(12)
                    .fontColor('#666')
                }.layoutWeight(1)

                Column({space:8}){
                  Image($r('app.media.chuhang'))
                    .width(28)
                  Text('滴滴出行')
                    .fontSize(12)
                    .fontColor('#666')
                }.layoutWeight(1)

                Column({space:8}){
                  Image($r('app.media.chuhang'))
                    .width(28)
                  Text('滴滴出行')
                    .fontSize(12)
                    .fontColor('#666')
                }.layoutWeight(1)

                Column({space:8}){
                  Image($r('app.media.chuhang'))
                    .width(28)
                  Text('滴滴出行')
                    .fontSize(12)
                    .fontColor('#666')
                }.layoutWeight(1)

                Column({space:8}){
                  Image($r('app.media.chuhang'))
                    .width(28)
                  Text('滴滴出行')
                    .fontSize(12)
                    .fontColor('#666')
                }.layoutWeight(1)

              }
              .padding({left:10,right:10})

              Row(){
                Column({space:8}){
                  Image($r('app.media.chuhang'))
                    .width(28)
                  Text('滴滴出行')
                    .fontSize(12)
                    .fontColor('#666')
                }.layoutWeight(1)

                Column({space:8}){
                  Image($r('app.media.chuhang'))
                    .width(28)
                  Text('滴滴出行')
                    .fontSize(12)
                    .fontColor('#666')
                }.layoutWeight(1)

                Column({space:8}){
                  Image($r('app.media.chuhang'))
                    .width(28)
                  Text('滴滴出行')
                    .fontSize(12)
                    .fontColor('#666')
                }.layoutWeight(1)

                Column({space:8}){
                  Image($r('app.media.chuhang'))
                    .width(28)
                  Text('滴滴出行')
                    .fontSize(12)
                    .fontColor('#666')
                }.layoutWeight(1)

                Column({space:8}){
                  Image($r('app.media.chuhang'))
                    .width(28)
                  Text('滴滴出行')
                    .fontSize(12)
                    .fontColor('#666')
                }.layoutWeight(1)

              }
              .padding({left:10,right:10})

              Row(){
                Column({space:8}){
                  Image($r('app.media.chuhang'))
                    .width(28)
                  Text('滴滴出行')
                    .fontSize(12)
                    .fontColor('#666')
                }.layoutWeight(1)

                Column({space:8}){
                  Image($r('app.media.chuhang'))
                    .width(28)
                  Text('滴滴出行')
                    .fontSize(12)
                    .fontColor('#666')
                }.layoutWeight(1)

                Column({space:8}){
                  Image($r('app.media.chuhang'))
                    .width(28)
                  Text('滴滴出行')
                    .fontSize(12)
                    .fontColor('#666')
                }.layoutWeight(1)

                Column({space:8}){
                  Image($r('app.media.chuhang'))
                    .width(28)
                  Text('滴滴出行')
                    .fontSize(12)
                    .fontColor('#666')
                }.layoutWeight(1)

                Column({space:8}){
                  Image($r('app.media.chuhang'))
                    .width(28)
                  Text('滴滴出行')
                    .fontSize(12)
                    .fontColor('#666')
                }.layoutWeight(1)

              }
              .padding({left:10,right:10})

            }

            .borderRadius({
              topLeft:20,
              topRight:20
            })
            .padding({top:10})

            //装饰图片
            Row({space:5}){
              Image($r('app.media.math'))
                .layoutWeight(1)
                .borderRadius(10)

              Image($r('app.media.moco'))
                .layoutWeight(1)
                .borderRadius(10)

              Image($r('app.media.math'))
                .layoutWeight(1)
                .borderRadius(10)
            }

            Image($r('app.media.tieyi'))
              .width('100%')
            Image($r('app.media.tieyi'))
              .width('100%')


          }
          .width('100%')
          .backgroundColor('#fff')
          .layoutWeight(1)




        }
        .scrollable(ScrollDirection.Vertical)
        //让滚动条一直显示
        .scrollBar(BarState.On)
        .margin({ top: 60, bottom: 60 })


      }
      .width('100%')
      .zIndex(666)


      //底部导航栏
      //底部是一行,选择组件row
      Row() {
        //图标
        Column() {
          Image($r('app.media.zhifubao'))
            .width(35)
        }
        .layoutWeight(1)

        Column() {
          Image($r('app.media.licai'))
            .width(28)
            .margin({ bottom: 3 })
          Text('理财')
            .fontSize(10)

        }.layoutWeight(1)


        Column() {
          Image($r('app.media.shenghuofuwu'))
            .width(28)
            .margin({ bottom: 3 })

          Text('生活')
            .fontSize(10)

        }.layoutWeight(1)


        Column() {
          Image($r('app.media.xiaoxi'))
            .margin({ bottom: 3 })
            .width(28)
          Text('消息')
            .fontSize(10)

        }.layoutWeight(1)

        Column() {
          Image($r('app.media.wode'))
            .margin({ bottom: 3 })
            .width(28)
          Text('我的')
            .fontSize(10)

        }.layoutWeight(1)

      }.width('100%')
      .height('100%')
      .height(60)
      .backgroundColor('#ccc')

    }
    .width('100%')
    .height('100%')
    .backgroundColor('#5b73e1')
  }
}

四.总结

本章呢主要是给前面学的知识点的一个总结,还有提升自己在鸿蒙界面开发中一个整体布局的能力,要注意的是,我们在设计界面的时候尽量不要随意给高度,就像最外层的column组件一定不要给,因为在我们实现滚动的时候就会被高度限制,导致滚动失效,本章我用到了两个新组件一个stack层叠组件,一个scroll滚动组件,还有一个属性layoutweight特别好用的一个组件属性,特别是当组件间的间隔相同且有规律,这可以作为首选