8. 食物列表——数字键盘

CYQ...

已于 2024-06-27 09:05:53 修改

阅读量1.6k

点赞数 55

文章标签：华为 harmonyos

于 2024-06-16 16:44:36 首次发布

本文链接：https://blog.csdn.net/2201_75587117/article/details/139718927

版权

8.1 UI设计

8.2 Grid组件介绍（网格容器）

接口

Grid(scroller?: Scroller)

参数：

参数名	参数类型	必填	参数描述
scroller	Scroller	否	可滚动组件的控制器。用于与可滚动组件进行绑定。说明：不允许和其他滚动类组件绑定同一个滚动控制对象。

参数名

参数类型

必填

参数描述

scroller

Scroller

否

可滚动组件的控制器。用于与可滚动组件进行绑定。

说明：

不允许和其他滚动类组件绑定同一个滚动控制对象。

属性

除支持通用属性外，还支持以下属性：

名称	参数类型	描述
columnsTemplate	string	设置当前网格布局列的数量，不设置时默认1列。例如， '1fr 1fr 2fr' 是将父组件分3列，将父组件允许的宽分为4等份，第一列占1份，第二列占1份，第三列占2份。说明：设置为'0fr'时，该列的列宽为0，不显示GridItem。设置为其他非法值时，GridItem显示为固定1列。
rowsTemplate	string	设置当前网格布局行的数量，不设置时默认1行。例如，'1fr 1fr 2fr'是将父组件分三行，将父组件允许的高分为4等份，第一行占1份，第二行占一份，第三行占2份。说明：设置为'0fr'，则这一行的行宽为0，这一行GridItem不显示。设置为其他非法值，按固定1行处理。
columnsGap	Length	设置列与列的间距。默认值：0 说明：设置为小于0的值时，按默认值显示。
rowsGap	Length	设置行与行的间距。默认值：0 说明：设置为小于0的值时，按默认值显示。
scrollBar	BarState	设置滚动条状态。默认值：BarState.Off
scrollBarColor	string \| number \| Color	设置滚动条的颜色。
scrollBarWidth	string \| number	设置滚动条的宽度。宽度设置后，滚动条正常状态和按压状态宽度均为滚动条的宽度值。默认值：4 单位：vp
cachedCount	number	设置预加载的GridItem的数量，只在LazyForEach中生效。具体使用可参考减少应用白块说明。默认值：1 说明：设置缓存后会在Grid显示区域上下各缓存cachedCount*列数个GridItem。LazyForEach超出显示和缓存范围的GridItem会被释放。设置为小于0的值时，按默认值显示。
editMode8+	boolean	设置Grid是否进入编辑模式，进入编辑模式可以拖拽Grid组件内部GridItem。默认值：false
layoutDirection8+	GridDirection	设置布局的主轴方向。默认值：GridDirection.Row
maxCount8+	number	当layoutDirection是Row/RowReverse时，表示可显示的最大列数当layoutDirection是Column/ColumnReverse时，表示可显示的最大行数。默认值：Infinity 说明：当maxCount小于minCount时，maxCount和minCount都按默认值处理。设置为小于0的值时，按默认值显示。
minCount8+	number	当layoutDirection是Row/RowReverse时，表示可显示的最小列数。当layoutDirection是Column/ColumnReverse时，表示可显示的最小行数。默认值：1 说明：设置为小于0的值时，按默认值显示。
cellLength8+	number	当layoutDirection是Row/RowReverse时，表示一行的高度。当layoutDirection是Column/ColumnReverse时，表示一列的宽度。默认值：第一个元素的大小
multiSelectable8+	boolean	是否开启鼠标框选。默认值：false - false：关闭框选。 - true：开启框选。
supportAnimation8+	boolean	是否支持动画。当前支持GridItem拖拽动画。默认值：false

Grid组件根据rowsTemplate、columnsTemplate属性的设置情况，可分为以下三种布局模式：

rowsTemplate、columnsTemplate同时设置：
- Grid只展示固定行列数的元素，其余元素不展示，且Grid不可滚动。
- 此模式下以下属性不生效：layoutDirection、maxCount、minCount、cellLength。
- Grid的宽高没有设置时，默认适应父组件尺寸。
- Gird网格列大小按照Gird自身内容区域大小减去所有行列Gap后按各个行列所占比重分配。
- GridItem默认填满网格大小。
- 此模式下GridItem同时设置了rowStart、columnStart，会用设置的rowStart、columnStart所在位置摆放GridItem。如果这个位置已经有GridItem则会发生重叠。
- 如果GridItem设置了rowStart、columnStart其中一个，会从上一个GridItem布局位置开始遍历寻找满足rowStart或columnStart的空闲位置摆放，如果无满足条件的空闲位置，则不布局该GridItem。
- 如果GridItem的rowStart、columnStart属性都没有设置，会从上一个GridItem布局位置开始遍历寻找空闲位置摆放，如果没有空闲位置，则不布局该GridItem。
- 如果GridItem的rowEnd有设置，但是rowStart没有设置，当做rowStart已经设置，并且和rowEnd设置为相同值。如果GridItem的columnEnd有设置，但是columnStart没有设置，当做columnStart已经设置，并且和columnEnd设置为相同值。
rowsTemplate、columnsTemplate仅设置其中的一个：
- 元素按照设置的方向进行排布，超出Grid显示区域后，Grid可通过滚动的方式展示。
- 如果设置了columnsTemplate，Gird滚动方向为垂直方向，主轴方向为垂直方向，交叉轴方向为水平方向。
- 如果设置了rowsTemplate，Gird滚动方向为水平方向，主轴方向为水平方向，交叉轴方向为垂直方向。
- 此模式下以下属性不生效：layoutDirection、maxCount、minCount、cellLength。
- 网格交叉轴方向尺寸根据Gird自身内容区域交叉轴尺寸减去交叉轴方向所有Gap后按所占比重分配。
- 网格主轴方向尺寸取当前网格交叉轴方向所有GridItem高度最大值。
- 此模式下GridItem同时设置了rowStart、columnStart，会用设置的rowStart、columnStart所在位置摆放GridItem。如果这个位置已经有GridItem则会发生重叠。
- 如果GridItem设置了rowStart、columnStart其中一个，会从上一个GridItem布局位置开始遍历寻找满足rowStart或columnStart的空闲位置摆放。
- 如果GridItem的rowStart、columnStart属性都没有设置，会从上一个GridItem布局位置开始遍历寻找空闲位置摆放。
- 如果GridItem的rowEnd有设置，但是rowStart没有设置，当做rowStart已经设置，并且和rowEnd设置为相同值。如果GridItem的columnEnd有设置，但是columnStart没有设置，当做columnStart已经设置，并且和columnEnd设置为相同值。
rowsTemplate、columnsTemplate都不设置：
- 元素在layoutDirection方向上排布，列数由Grid的宽度、首个元素的宽度、minCount、maxCount、columnsGap共同决定。
- 行数由Grid高度、首个元素高度、cellLength、rowsGap共同决定。超出行列容纳范围的元素不显示，也不能通过滚动进行展示。
- 此模式下仅生效以下属性：layoutDirection、maxCount、minCount、cellLength、editMode、columnsGap、rowsGap。
- 当前layoutDirection设置为Row时，先从左到右排列，排满一行再排一下一列。剩余高度不足时不再布局，整体内容顶部居中。
- 当前layoutDirection设置为Column时，先从上到下排列，排满一列再排一下一列，剩余宽度度不足时不再。整体内容顶部居中。
- 此模式下GridItem的rowStart、columnStart不生效。

GridDirection8+枚举说明

名称	描述
Row	主轴布局方向沿水平方向布局，即自左往右先填满一行，再去填下一行。
Column	主轴布局方向沿垂直方向布局，即自上往下先填满一列，再去填下一列。
RowReverse	主轴布局方向沿水平方向反向布局，即自右往左先填满一行，再去填下一行。
ColumnReverse	主轴布局方向沿垂直方向反向布局，即自下往上先填满一列，再去填下一列。

事件

除支持通用事件外，还支持以下事件：

名称	功能描述
onScrollIndex(event: (first: number) => void)	当前网格显示的起始位置item发生变化时触发。 - first: 当前显示的网格起始位置的索引值。 Grid显示区域上第一个子组件的索引值有变化就会触发。
onItemDragStart(event: (event: ItemDragInfo, itemIndex: number) => (() => any) \| void)	开始拖拽网格元素时触发。 - event: 见ItemDragInfo对象说明。 - itemIndex: 被拖拽网格元素索引值。说明：返回void表示不能拖拽。手指长按GridItem时触发该事件。
onItemDragEnter(event: (event: ItemDragInfo) => void)	拖拽进入网格元素范围内时触发。 - event: 见ItemDragInfo对象说明。
onItemDragMove(event: (event: ItemDragInfo, itemIndex: number, insertIndex: number) => void)	拖拽在网格元素范围内移动时触发。 - event: 见ItemDragInfo对象说明。 - itemIndex: 拖拽起始位置。 - insertIndex: 拖拽插入位置。
onItemDragLeave(event: (event: ItemDragInfo, itemIndex: number) => void)	拖拽离开网格元素时触发。 - event: 见ItemDragInfo对象说明。 - itemIndex: 拖拽离开的网格元素索引值。
onItemDrop(event: (event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => void)	绑定该事件的网格元素可作为拖拽释放目标，当在网格元素内停止拖拽时触发。 - event: 见ItemDragInfo对象说明。 - itemIndex: 拖拽起始位置。 - insertIndex: 拖拽插入位置。 - isSuccess: 是否成功释放。

ItemDragInfo对象说明

名称	类型	描述
x	number	当前拖拽点的x坐标。
y	number	当前拖拽点的y坐标。

8.3 键盘的实现

8.3.1 定义键盘样式

   Grid()
    {
         ForEach(this.numbers,num=>{
           GridItem(){
             Text(num)
               .fontSize(20)
               .fontWeight(CommonConstants.FONT_WEIGHT_900)
           }
           .keyBoxStyle()
           .onClick(()=>this.clickNumber(num))
         })
           GridItem(){
             Text('删除')
               .fontSize(20)
               .fontWeight(CommonConstants.FONT_WEIGHT_900)
           }
           .keyBoxStyle()
           .onClick(()=>this.clickDelete())

    }
    .width('100%')
    .height(280)
    .backgroundColor($r('app.color.index_page_background'))
    .columnsTemplate('1fr 1fr 1fr')//三列
    .columnsGap(8)//行间距
    .rowsGap(8)//列间距
    .padding(8)
    .margin({top:10})

8.3.2 定义键盘事件

1.普通键事件

clickNumber(num:string)
  {
       //1.拼接用户输入内容
        let val=this.value+num
       //2.校验输入格式是否正确
    let firstIndex=val.indexOf('.')//记录小数点角标从前往后数
    let lastIndex=val.lastIndexOf('.')//记录小数点角标从后往前数
    if(firstIndex!=lastIndex || (lastIndex!=-1&&lastIndex<val.length-2))//两个小数点或者一个小数点但是小数超出一位
    {
       //非法输入
      return
    }
      //3.将字符串转为数值
    //例如2.
      let amount=this.parseFloat(val)
      //4.保存
    //例如有上限
    if(amount>=999.9)
    {
      this.amount=999.0
      this.value='999'
    }
  else
  {
    this.amount=amount
    this.value=val
  }

  }

2.删除键事件

clickDelete(){
         if(this.value.length<=0)
         {
         this.value=''
         this.amount=0
           return//删到头了
         }
    this.value=this.value.substring(0,this.value.length-1)
    this.amount=this.parseFloat(this.value)
  }

3.定义拼接方法将字符串转为数值

 parseFloat(str:string)
 {
   if(!str)
   {
     return 0
   }
   if(str.endsWith('.'))
   {
     str=str.substring(0,str.length-1)//去除从零开始去除到str.length-1
   }
   return parseFloat(str)
 }

8.3.3 ItemCard里面的营养素发生改变

@Prop amount:number//状态变量
//数量不是一个死的值，这个组件只渲染，改变是在键盘组件里

 @Builder NutrientInfo($$:{label:string,value:number}){
    Column({space:CommonConstants.SPACE_8})
    {
      Text($$.label)
        .fontSize(14)
        .fontColor($r('app.color.light_gray'))
      Text(($$.value*this.amount).toFixed(1))//一位小数
        .fontSize(18)
        .fontWeight(CommonConstants.FONT_WEIGHT_700)
    }
  }

8.4 按钮以及点击事件实现


  @Builder PanelButton(){
    Row({space: CommonConstants.SPACE_6}){
      Button('取消')
        .panelButtonStyle()
        .backgroundColor($r('app.color.light_gray'))
        .onClick(() => this.showPanel = false)
      Button('提交')
        .panelButtonStyle()
        .backgroundColor($r('app.color.primary_color'))
        .onClick(() => {
          // 1.持久化保存
          RecordService.insert(this.type.id, this.item.id, this.amount)
            .then(() => {
              // 2.关闭弹窗
              this.showPanel = false
            })
        })
    }
    .margin({top: 10})
  }