【HarmonyOS NEXT星河版开发学习】小型测试案例13-美团购物车

@VON

发布于 2025-12-21 11:45:26

1620

前言

由于组件过多，刚开始接触的时候也是很迷茫，一个小时了都没写出来。想了好久还是要先理清思路，画好草图，知识点就那么多不过是混合使用罢了。本页面的功能还是挺有意思的，感兴趣的可以尝试一下。

构建思路

先利用电脑自带的画图工具画一个草图

上半部分预期效果

下半部分预期效果

总体效果展示

购买数量可以通过两边的加减进行修改，数量最少为1，数量修改的同时，总价也会相应的修改

界面实现

所用到的组件

所用到的State

上半部分的图片和文字效果

价格部分

注：此处用到了Blank组件，是为了价格和上述文字之间产生间距

数量部分

注：数量部分的加减都进行了绑定，如果数量为1时再次进行减的操作会提示不能再减了

下半部分

文字和按钮全都居右显示 上下部分距离无法确定，所以也用了Blank组件

知识点概述

State组件

1.State 组件的概念

基本定义:
- State 组件是一种可以根据内部状态改变而自动更新UI的组件。
- 它通常用于表示那些具有不同状态的UI元素，比如按钮的不同状态（正常、悬停、按下等）。
适用场景:
- 适合用于创建交互性强的UI元素，例如开关、按钮、标签等。
- 特别适合于需要响应用户交互的场景。

2. State 组件的使用

创建 State 组件:
- 你可以使用 State 组件类来创建一个基础的 State 组件。
- 通常会结合 Builder 模式来定义不同的状态。
状态定义:
- 你需要为每个可能的状态定义一个子组件，这些子组件会在状态改变时被渲染。
- 例如，对于一个按钮，你可以定义正常状态、按下状态、禁用状态等。
状态改变:
- 当状态改变时，对应的子组件会被重新渲染。
- 可以通过事件触发状态改变，例如点击事件、触摸事件等。

Blank组件

在鸿蒙应用开发中，Blank组件主要用于填充布局中的剩余空间，确保布局的对齐和整齐。该组件不显示任何内容，但能在需要时扩展以填充空白区域。下面将详细解释Blank组件的功能和使用场景：

基本功能

填充空间：Blank组件的主要功能是在其父容器（如Row、Column或Flex）的主轴方向上自动填充剩余的空间。此功能特别适用于需要确保布局一致性和对齐的场景。
无内容显示：此组件本身不渲染任何可见内容，其存在的目的是为了更好地布局管理。

主要属性

min属性：从API version 10开始，Blank组件支持min属性，用于设置其在主轴上的最小大小。这个属性帮助开发者在布局设计时定义Blank组件的最小拉伸范围，避免因空间过小而无法达到预期布局效果。
color属性：从API version 9起，可以通过color属性为Blank组件设置背景色，尽管默认是透明的。这在视觉设计中提供了更多灵活性，特别是在需要用背景色区分不同区块时。

使用场景示例

布局间隔调整：通过在Row或Column容器中使用Blank组件，可以方便地管理子组件之间的间隔。例如，在一个水平排列的Row中，通过在元素之间加入Blank组件，可以自动填充所有剩余空间，确保下一个元素与下一个元素的间隔相等。
自适应布局：在响应式设计中，Blank组件可以自动调整其大小以适应不同的屏幕尺寸和方向。当屏幕旋转或尺寸改变时，Blank组件会相应地扩展或收缩，保持布局的整洁和一致。

代码展示

@Entry
@Component
struct Index {
  @State count:number=1
  @State oldprice:number=20.9
  @State newprice:number=10.9
  build() {
    Column(){
      Row(){
        Image($r('app.media.mt_02'))
          .width('40%')
          .borderRadius(10)
        Column(){
          Text('【mini】酸奶水果捞200g')
            .width('100%')
            .fontSize(18)
            .margin(10)
            .fontWeight(500)
          Text('规格：200克')
            .width('100%')
            .fontColor('#a0a0a0')
            .fontSize(14)
            .margin({left:20})
          Blank()
          Row(){
            Row({space:5}){
              Text(){
                Span('￥')
                  .fontSize(13)
                  .fontColor(Color.Red)
                Span(this.newprice.toFixed(2))
                  .fontColor(Color.Red)
              }
              .margin({left:10})
              .fontColor('#ff4000')
              Text(){
                Span('￥')
                  .fontSize(13)
                Span(this.oldprice.toFixed(2))
                  .fontSize(13)
              }
              .fontColor('#999')
              .decoration({type:TextDecorationType.LineThrough,color:'#999'})
            }
            .margin({bottom:10})
            Row(){
              Text('-')
                .width(20)
                .border({width:1,color:'#999',radius:{topLeft:3,bottomLeft:3}})
                .textAlign(TextAlign.Center)
                .onClick(()=>{
                  if(this.count>1){
                    this.count--
                  }
                  else{
                    AlertDialog.show({
                      message:'最小值为1，不能再减了'
                    })
                  }
                })
              Text(this.count.toString())
                .width(30)
                .border({width:{top:1,bottom:1},color:'#999'})
                .textAlign(TextAlign.Center)
              Text('+')
                .width(20)
                .border({width:1,color:'#999',radius:{bottomRight:3,topRight:3}})
                .textAlign(TextAlign.Center)
                .onClick(()=>{
                  this.count++
                })
            }
            .margin({bottom:10})
          }
          .justifyContent(FlexAlign.SpaceBetween)
          .width('100%')
        }
        .width('60%')
        .height('100%')

      }
      .width('100%')
      .height(100)
      Blank()
      Row(){
        Column({space:5}){
          Text(){
            Span('已选两件,')
              .fontColor('#a0a0a0')
              .fontSize(16)
            Span('合计:')
            Span('￥')
              .fontColor(Color.Red)
            Span((this.newprice*this.count).toFixed(2))
              .fontColor(Color.Red)
          }
          .width('100%')
          .textAlign(TextAlign.End)
          Text(){
            Span('共减:￥')
              .fontColor(Color.Red)
            Span(((this.oldprice-this.newprice)*this.count).toFixed(2))
              .fontColor(Color.Red)
          }
          .fontSize(14)
          .width('100%')
          .textAlign(TextAlign.End)
        }
        .width('60%')
        .justifyContent(FlexAlign.End)
        Button('结算外卖')
          .fontColor(Color.Black)
          .margin({left:10,right:10})
          .backgroundColor('#fdd744')
      }
      .width('100%')
      .height(80)
      .justifyContent(FlexAlign.End)
    }
    .width('100%')
    .height('100%')
    .padding(10)
  }
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-10-27，如有侵权请联系 cloudcommunity@tencent.com 删除

测试