学习鸿蒙基础(5)

一、honmonyos的page路由界面的路径

新建了一个page,然后删除了。运行模拟器的时候报错了。提示找不到这个界面。原来是在路由界面没有删除这个page。新手刚接触找了半天才找到这个路由。在resources/base/profile/main_pages.json 这个和微信小程序好类似呀。

吐槽:华为模拟器启动起来好慢呀。等的花儿都快谢了。并且输入法没有中文。太坑了吧。

二、@State组件

@state装饰的变量,或称为状态变量,一旦变量拥有了状态属性,就和自定义组件的渲染绑定起来。当状态改变时,UI会发生对应的改变。

1、当装饰的数据类型为boolean、string、number类型时,可以观察到数值的变化。

2、当装饰的数据类型为class或者Object时,可以观察到自身的赋值的变化,和其属性赋值的变化。注意:嵌套属性的赋值观察不到。

3、当装饰的对象是array时,可以观察到数组本身的赋值和添加、删除、更新数组的变化。

state修饰符修饰的时候,

@state修饰数组的时候,filter作为过滤器进行数组搜索的过滤。实现一个数组列表的简单搜索功能

代码如下:

TypeScript 复制代码
import bankList from '../utils/bankName'

@Entry
@Component
struct TestState {
  @State banks: any [] = bankList
  @State value: string = ""

  build() {
    Row() {
      Column() {
        TextInput().onChange(value => {
          console.log(value)
          this.value = value
        })
        List() {
          ForEach(this.getCop(), (item, index) => {
            ListItem() {
              Text(item.value).fontSize(20).textAlign(TextAlign.Center).width("100%")
            }.margin(10)
          })
        }.height(500).divider({
          strokeWidth: 1,
          color: Color.Blue,
          startMargin: 40,
          endMargin: 40
        })
      }
    }
  }

  getCop() {
    //数组的filter是过滤器
    return this.banks.filter(item =>item.value.includes(this.value))
  }
}
TypeScript 复制代码
const  list = [
  {
    value: 'CCB',
    text: '中国建设银行'
  },
  {
    value: 'ABC',
    text: '中国农业银行'
  },
  {
    value: 'BOC',
    text: '中国银行'
  },
  {
    value: 'PSBC',
    text: '中国邮政储蓄银行'
  },
  {
    value: 'ICBC',
    text: '中国工商银行'
  },

  {
    value: 'COMM',
    text: '交通银行'
  },
  {
    value: 'CDB',
    text: '国家开发银行'
  },
  {
    value: 'GSBANK',
    text: '甘肃银行'
  },
  {
    value: 'CMB',
    text: '招商银行'
  },
  {
    value: 'SPDB',
    text: '上海浦东发展银行'
  },
  {
    value: 'CIB',
    text: '兴业银行'
  }
];
export default list
相关推荐
zhangxiaomm43 分钟前
pytorch 学习笔记(2)-实现一个线性回归模型
pytorch·笔记·学习
NfN-sh3 小时前
计数组合学7.12( RSK算法的一些推论)
笔记·学习·算法
农夫山泉(代码版)3 小时前
Linux驱动学习(七)平台总线框架
linux·服务器·学习
驱动起爆大师x_x3 小时前
STM32_Hal库学习SPI
stm32·嵌入式硬件·学习
小眼睛FPGA3 小时前
【盘古100Pro+开发板实验例程】FPGA学习 | 基于 UDP 的以太网传输实验例程
科技·单片机·学习·ai·fpga开发·fpga
pusue_the_sun3 小时前
从零开始搞定类与对象(中)
开发语言·c++·学习
小眼睛FPGA3 小时前
【盘古100Pro+开发板实验例程】FPGA学习 | HDMI 回环实验
科技·学习·ai·fpga开发·fpga
屁股割了还要学3 小时前
【数据结构入门】链表
c语言·开发语言·数据结构·c++·学习·算法·链表
Wendy14415 小时前
【目标检测基础】——yolo学习
学习·yolo·目标检测
天上的光6 小时前
机器学习——学习路线
人工智能·学习·机器学习