王学岗鸿蒙开发(北向)——————(七、八)ArkUi的各种装饰器

news2024/11/23 6:08:18

arts包含如下：1，装饰器 ；2，组件的描述(build函数)；3，自定义组件(@Component修饰的),是可复用的单元；4，系统的组件(鸿蒙官方提供)；等
装饰器的作用:装饰类、变量、方法、结构等。
@State 可以用数据驱动UI更新。
@Entry 入口文件
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

组件的调用

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

  aboutToAppear() {

  }

  build() {
    Column() {
      //可以不传参
      Test()
      //也可以传参,使用{}
      Test({msg:'马超'})

    }.width('100%').height('100%').justifyContent(FlexAlign.Center)
  }

  aboutToDisappear() {

  }
}
//自定义组件
@Component
struct Test{
  private msg:string = '赵云';
  build(){
    Column(){
      Text(this.msg)
    }
  }
}

在这里插入图片描述

@Entry
@Component
@Preview
struct Index {
  @State message: string = 'Hello World'
   msg:string = '曹操'
  aboutToAppear() {

  }

  build() {
    Column() {
      //调用的时候需要使用this.this指代当前所属组件
      //注意，这里传递的是值不是引用。如果在Button的点击方法中更改了
      //this.msg的值，MyBuilderFunction1不会修改显示内容
      this.MyBuilderFunction1(this.msg)
      this.MyBuilderFunction2()
      this.MyBuilderFunction3()
      //调用全局构建函数，不能使用this
      GlobalBuilder()
      Button('按钮').onClick((event:ClickEvent)=>{
        console.log("点击了按钮")
        this.msg = '曹丕'})
    }.width('100%').height('100%').justifyContent(FlexAlign.Center)
  }

  aboutToDisappear() {

  }

  @Builder //自定义组件内构建函数
  MyBuilderFunction0() {
    Text(this.message).fontSize(50)
  }

  @Builder //自定义组件内构建函数
  MyBuilderFunction1(msg:string) {
    Text(msg).fontSize(50)
  }

  @Builder //自定义组件内构建函数
  MyBuilderFunction2() {
    Text('刘备').fontSize(50)
  }

  @Builder //自定义组件内构建函数
  MyBuilderFunction3() {
    Text('孙坚').fontSize(50)
  }

}

//全局构建函数,需要使用function
@Builder
function GlobalBuilder(){

  Text('我是全局的构建函数').fontSize(40)
}

@Entry
@Component
@Preview
struct Index {
  @State message: string = 'Hello World'
   msg:string = '曹操'
  aboutToAppear() {

  }

  build() {
    Column() {
      //MyBuilderFunction后这里不能用括号
     Child({builder:this.MyBuilderFunction})
    }.width('100%').height('100%').justifyContent(FlexAlign.Center)
  }

  aboutToDisappear() {

  }
  @Builder
  MyBuilderFunction(){
    Text('我爱你爱你').fontSize(50)
  }
}
//子组件被父组件调用，
@Component
struct Child{
  //不初始化会报错
  //Property 'builder' in the custom component 'Child' is missing assignment or initialization.
 // @BuilderParam装饰器：引用@Builder函数
  //  当开发者创建了自定义组件，并想对该组件添加特定功能时，例如在自定义组件中添加一个点击跳转操作。
  //  若直接在组件内嵌入事件方法，将会导致所有引入该自定义组件的地方均增加了该功能。
  //  为解决此问题，ArkUI引入了@BuilderParam装饰器，@BuilderParam用来装饰指向@Builder方法的变量，
  //  开发者可在初始化自定义组件时对此属性进行赋值，为自定义组件增加特定的功能。该装饰器用于声明任意UI描述的一个元素，
  //  类似slot占位符。

  @BuilderParam builder:()=>void;
  build(){
    Column(){
      this.builder()
      Text('吕玲绮').fontSize(50)
    }
  }
}

在这里插入图片描述

@Entry
@Component
@Preview
struct Index {
  @State message: string = 'Hello World'
  msg: string = '曹操'

  aboutToAppear() {

  }

  build() {
    Column() {
    //如果名字相同，都叫MyStyle，组件内的优先级高
    //@Styles不能传递参数
      Text('曹操').MyStyle1()
      Text('刘备').MyStyle2()
      Text('孙权').MyStyle1()
      Text('吕布').MyStyle2()
    }.justifyContent(FlexAlign.Center).height('100%').width('100%')
  }
  //自定义样式，组件内不需要function,只能是通用属性和事件,
  @Styles
  MyStyle1(){
    .width('100%')
    .height(100)
    .backgroundColor('green')
  }
}
//自定义样式，组件外需要function,只能是通用样式，不能传递参数
@Styles
function MyStyle2(){
  .width('100%')
  .height(100)
  .backgroundColor('blue')
}

在这里插入图片描述

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



  aboutToAppear() {

  }

  build() {
    Column({ space: 20 }) {
      Text('曹操').MyTextStyle(Color.White)
      Text('孙坚').MyTextStyle(Color.Blue)
      Text('刘备').MyTextStyle(Color.Green)
      Text('吕布').MyTextStyle()
    }.justifyContent(FlexAlign.Center).height('100%').width('100%')
  }
}
//扩展原生样式,可以用私有的,可以传递参数,参数可以设置默认值，有默认值的写在最后面
@Extend(Text) function MyTextStyle(color:Color = Color.Orange) {
  .fontSize(50)
  .fontColor(color)
  .backgroundColor(Color.Gray)

}

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

@Entry
@Component
@Preview
struct Index {
  //定义状态变量
  @State count: number = 0

  build() {
    Column({ space: 20 }) {
       Text(`count =${this.count}`).fontSize(50)
      Button('点击加一').onClick(()=>{this.count++})
    }.justifyContent(FlexAlign.Center).height('100%').width('100%')
  }
}

在这里插入图片描述

@Entry
@Component
@Preview
struct Index {
  //定义状态变量
  @State count: number = 0

  build() {
    Column({ space: 20 }) {
      Text(`父组件的count${this.count}`).fontSize(40)
      Button('父点击加一').onClick(() => {
        this.count++
      })
      Child({ childCount: this.count })

    }.justifyContent(FlexAlign.Center).height('100%').width('100%')
  }
}

@Component
struct Child {
  //把count传递给子组件Child,使用@Prop修饰

  @Prop private childCount: number

  build() {
    Column() {
      Text(`子组件的count${this.childCount}`).fontSize(40)
      //prop是单向同步，这里点击加一变得只有child组件，父组件不变
      Button('子点击加一').onClick(() => {
        this.childCount++
      })
    }
  }
}

@Entry
@Component
@Preview
struct Index {
  //定义状态变量
  @State count: number = 0

  build() {
    Column({ space: 20 }) {
      Text(`父组件的count${this.count}`).fontSize(40)
      Button('父点击加一').onClick(() => {
        this.count++
      })
      //@Link修饰的变量必须要加$
      Child({ childCount:$count})

    }.justifyContent(FlexAlign.Center).height('100%').width('100%')
  }
}

@Component
struct Child {
  //把count传递给子组件Child,使用@Prop修饰

  @Link private childCount: number

  build() {
    Column() {
      Text(`子组件的count${this.childCount}`).fontSize(40)
      //link是单向同步，这里点击加一变得父组件与子组件都会变
      Button('子点击加一').onClick(() => {
        this.childCount++
      })
    }
  }
}

@prop不能是数组、对象，但支持枚举类型，不允许初始化
@link支持类型比较多，详见上图

在这里插入图片描述
@Provider 和@Consume是生产者和消费者模式

@Entry
@Component
@Preview
struct Index {
  //定义状态变量
  @Provide count: number = 0

  build() {
    Column({ space: 20 }) {
      Text(`父组件的count ${this.count}`).fontSize(40)
      Button('父点击加一').onClick(() => {
        this.count++
      })
      //不需要传递参数了
      Child()
    }.justifyContent(FlexAlign.Center).height('100%').width('100%')
  }
}

@Component
struct Child {
  @Consume count: number

  build() {
    Column() {
      Text(`子组件${this.count}`).fontSize(40)
      GrandSon()
    }
  }
}

@Component
struct GrandSon {
  @Consume count: number

  build() {
    Column() {
      Text(`孙组件${this.count}`).fontSize(40)
      Button('孙点击加一').onClick(() => {
        //孙组件点击改变count，父组件，子组件也会改变
        this.count++
      })
    }
  }
}


@Entry
@Component
@Preview
struct Index {
  @State grade:Grade = new Grade(new Student('孙悟空',18))
  build() {
    Column({ space: 20 }) {
      Text(`父组件中的name=${this.grade.stu.name},年龄=${this.grade.stu.age}`).fontSize(30)
      Button('父组件').onClick(()=>{
        this.grade.stu.age+=1
        console.log(`年龄${this.grade.stu.age}`)
      })
      Child({stu:this.grade.stu})
    }.justifyContent(FlexAlign.Center).height('100%').width('100%')
  }
}
//子组件
@Component
struct Child{
  //传递学生对象,增加@ObjectLink后，在父组件中点击修改年龄，子组件可以响应，也会修改
  @ObjectLink stu:Student
  build(){
    Column(){
      Text(`子组件中的name=${this.stu.name},年龄=${this.stu.age}`).fontSize(30)
    }
  }
}
//学生类，单独使用Observed没任何效果，需要搭配@ObjectLink或者@Prop
@Observed
class Student {
  name: string = ''
  age: number = 18

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}
//年级
@Observed
class Grade {
   stu: Student

  constructor(stu: Student) {
    this.stu = stu;
  }
}

@Watch，监听某个值，一旦值变化了，会调用某个函数

@Entry
@Component
@Preview
struct Index {
  @State
  @Watch('myCallBack')//@Watch的作用是监听count的值，只要count值发生变化,myCallBack就会被回调一次
  count:number = 0
  @State message:string = '@Watch回调函数被第0次调用'
  build() {
    Column({ space: 20 }) {
      Text(this.message).fontSize(40).fontColor(Color.Green)
      Button('点击count+1').onClick(()=>{
        //如果这里注释掉，myCallBack函数不会调用，因为count值没有变化
        this.count++
      })
    }.justifyContent(FlexAlign.Center).height('100%').width('100%')
  }
  myCallBack(){
    console.log('callback被调用了');
  }
}

@Watch修饰的可以是类

@Entry
@Component
@Preview
struct Index {
  @State
  @Watch('myCallBack')//@Watch的作用是监听count的值，只要count值发生变化,myCallBack就会被回调一次
  person:Person = new Person(1)
  build() {
    Column({ space: 20 }) {
      Text(`${this.person.count}`).fontSize(40).fontColor(Color.Green)
      Button('点击count+1').onClick(()=>{
        //如果这里注释掉，myCallBack函数不会调用，因为count值没有变化
        this.person.count++
      })
    }.justifyContent(FlexAlign.Center).height('100%').width('100%')
  }
  myCallBack(){
    console.log('callback被调用了');
  }

}
class Person{
 count:number;

  constructor(count:number) {
    this.count = count;
  }
}

UI状态存储，上面讲述的是组件传值，组件传值是在一个界面传值，多个界面传值无法使用。
多个界面如下配置
在这里插入图片描述

import router from '@ohos.router'
@Entry
@Component
@Preview
struct Index {

  build() {
    Column({ space: 20 }) {

      Button('界面跳转').onClick(()=>{
        //界面跳转,
         router.pushUrl({url:'pages/Index2'})
      })
    }.justifyContent(FlexAlign.Center).height('100%').width('100%')
  }
}

界面跳转的写法
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
上代码：
在这里插入图片描述

//定义常量，购物车中存取都用这个键
export const Key: string = 'cart_key'
//添加购物车,这里直接使用string，不再新建一个类
export const addCart = (goods:string) => {
  //从购物车中取出对应的商品，从AppStorage中通过键取,没有值就给个空字符串
  const myGoods = AppStorage.Get(Key) as string || ''
  //字符串拼接下，
  let str = goods.concat(myGoods)
  //将购物车信息放入到AppStorage中
  AppStorage.SetOrCreate(Key,str)
}
//清空购物车
export const clearCart = ()=>{
  AppStorage.SetOrCreate(Key,'')
}
//不要忘记了export

import router from '@ohos.router'
@Entry
@Component
@Preview
struct Index {

  build() {
    Column({ space: 20 }) {

      Button('界面跳转').onClick(()=>{
        //界面跳转,
         router.pushUrl({url:'pages/GoodsPages'})
      })
    }.justifyContent(FlexAlign.Center).height('100%').width('100%')
  }
}


import promptAction from '@ohos.promptAction'
import router from '@ohos.router'
import { addCart } from '../tools/util'
@Entry
@Component
@Preview
struct GoodsPages {
  //商品页面
  build() {
    Column({ space: 20 }) {

      Button('苹果手机加入购物车').onClick(()=>{
              addCart('苹果手机')
        promptAction.showToast({message:"苹果购买成功"})
      })

      Button('华为手机加入购物车').onClick(()=>{
        addCart('华为手机')
        promptAction.showToast({message:"华为购买成功"})
      })
      Button('跳转到购物车界面').onClick(()=>{
        router.pushUrl({url:'pages/Index2'})
      })
    }.justifyContent(FlexAlign.Center).height('100%').width('100%')
  }

}

上述代码有一个问题，数据没有持久化存储，观点app在重新打开，购物车里的商品会消失
在这里插入图片描述
需要持久化
//一句话实现持久化存储
PersistentStorage.PersistProp(Key,‘’)

import { Key } from '../tools/util'
//一句话实现持久化存储
PersistentStorage.PersistProp(Key,'')
@Entry
@Component
@Preview
struct Index2 {
  //购物车界面，有添加商品，跳转到别的界面，购物车信息依然可以共享
  //大部分的时候存储的是json字符串,AppStorage是存储在内存中，需要持久化
  @StorageProp(Key)//必须初始化，如果有值就取出来，如果没值就把初始化的值存入AppStorage
  cart:string = ''
  build() {
    Column({ space: 20 }) {
       Text(`购物车的商品:${this.cart}`).fontSize(30)

    }.justifyContent(FlexAlign.Center).height('100%').width('100%')
  }
   // test(){
   //   JSON.parse(this.cart)
   //   JSON.stringify()
   // }
}

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在src/main/ets/entryability/EntryAbility.ts的onWindowStageCreate()中加载默认启动的界面
在这里插入图片描述
在这里插入图片描述
//组件在界面中的生命周期函数
//界面出现时候的回调
aboutToAppear(){}
//界面销毁时候的回调
aboutToDisappear(){}

import router from '@ohos.router'
@Entry
@Component
@Preview
struct Index {
  aboutToAppear(){
    console.log("马超","aboutToAppear")
  }
  aboutToDisappear(){
    console.log("马超","aboutToDisappear")
  }
  onPageShow(){
    console.log("马超","onPageShow")
  }
  onPageHide(){
    console.log("马超","onPageHide")
  }

  build() {
    Column({ space: 20 }) {

      Button('界面跳转').onClick(()=>{
        //界面跳转,
         router.pushUrl({url:'pages/GoodsPages'})
      })
    }.justifyContent(FlexAlign.Center).height('100%').width('100%')
  }
}

启动app时候的打印

06-09 16:53:36.367 20540-974/? I 0FEFE/JsApp: 马超 aboutToAppear
06-09 16:53:36.368 20540-974/? I 0FEFE/JsApp: 马超 onPageShow

屏幕息屏的时候调用

06-09 16:54:06.228 20540-974/com.example.myapplication I 0FEFE/JsApp: 马超 onPageHide

pushUrl时候的跳转

06-09 16:55:12.002 20540-974/com.example.myapplication I 0FEFE/JsApp: 马超 onPageHide

replaceUrl时候的跳转

06-09 16:56:29.723 22798-1042/com.example.myapplication I 0FEFE/JsApp: 马超 aboutToDisappear

退出app时候的跳转

06-09 16:56:29.723 22798-1042/com.example.myapplication I 0FEFE/JsApp: 马超 aboutToDisappear

只有@Component修饰而没有@Entry修饰的组件只有下面两个方法

  aboutToAppear(){
    console.log("马超","aboutToAppear")
  }
  aboutToDisappear(){
    console.log("马超","aboutToDisappear")
  }```
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/394fdc2d4ecb4f7f933328cd3fae3cfb.png)

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1807434.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

汇编语言LDS指令

汇编语言LDS指令

在8086架构的实模式下，LDS指令（Load Pointer Using DS）用于从内存中加载一个32位的指针到指定寄存器和DS寄存器。我们来详细解释一下这条指令为什么会修改DS段寄存器。 LDS指令的功能 LDS指令格式如下： LDS destination, sourc…
阅读更多...
SNAT与DNAT

SNAT与DNAT

一、SNAT策略概述 1、SNAT 策略的典型应用环境 局域网主机共享单个公网IP地址接入Internet（私有IP不能在Internet中正常路由） 局域共享上网 2、 SNAT 策略的原理 修改数据包的源地址 把从内网 --> 外网的数据的源内网地址转换成公网源地址 3、SN…
阅读更多...
多目标检测模型加权框集成

多目标检测模型加权框集成

优秀项目推荐：https://gitcode.com/ZFTurbo/Weighted-Boxes-Fusion/overview 参考链接： 目标检测加权框融合 WBF原理讲解 https://blog.csdn.net/YXD0514/article/details/132574588 目标检测加权框融合 WBF原理讲解（Weighted Boxes Fusion&…
阅读更多...
java中集合List，Set，Queue，Map

java中集合List，Set，Queue，Map

Java SE中的集合框架是一组用于存储和操作对象的类和接口。它提供了丰富的数据结构，可以用于解决各种问题。Java SE中的集合框架包含以下主要类和接口： 一. Collection接口： 是集合框架的根接口，它定义了一些通用的集合操作方法…
阅读更多...
微服务之远程调用

微服务之远程调用

常见的远程调用方式 RPC：Remote Produce Call远程过程调用，类似的还有 。自定义数据格式，基于原生TCP通信，速度快，效率高。早期的webservice，现在热门的dubbo （12不再维护、17年维护权交给apac…
阅读更多...
【设计模式】行为型设计模式之 迭代器模式

【设计模式】行为型设计模式之 迭代器模式

介绍 迭代器模式（Iterator Pattern） 是行为设计模式之一，它提供了一种访问集合对象（如列表、数组或其他集合结构）中元素的方式，而不需要暴露集合的内部结构。迭代器模式定义了一个迭代器接口，该…
阅读更多...
专业学习|南开大学《随机过程》学习笔记（一）

专业学习|南开大学《随机过程》学习笔记（一）

（1）有哪些经典的关于基本随机过程的书籍推荐？ 对于想要系统学习基本随机过程的学生来说，可以参考Sheldon M.Rose编著的经典著作《随机过程》。该书涉及的内容也比较宽泛。但并不局限于单个细节论证。 此外，萨缪尔科林(…
阅读更多...
Vulnhub靶机之reven 1

Vulnhub靶机之reven 1

一、信息收集 nmap扫描网段，靶机地址为192.168.145.129。 nmap -sP 192.168.145.* 扫一下端口，开放了22、80、111、50967。 nmap -sT -T4 -p1-65535 192.168.145.129 再看一下目录情况，发现一个疑似后台登录的地址。 dirsearch -u http://…
阅读更多...
DeepSeek-7B-chat 4bits量化 Qlora 微调

DeepSeek-7B-chat 4bits量化 Qlora 微调

在本文中我们将学习DeepSeek量化微调的方法，并且从微调结果体会大模型微调的重要性。 引言 在当前快速发展的自然语言处理领域，模型的精度和效率是关键。量化和微调技术可以有效提高模型性能。本文将探讨如何对DeepSeek-7B-chat模型进行4bits量化&…
阅读更多...
Linux | buildrootfs 添加mkfs.ext3/mkfs.ext4 支持

Linux | buildrootfs 添加mkfs.ext3/mkfs.ext4 支持

因个人需要，mkfs.ext3 但是项目中还没有这个命令 所以琢磨了半天 这里将其小记一下 在buildrootfsz中，需要将e2fsprogs 勾选上然后重新编译就好了 make menuconfig Target packages-> Filesystem and flash utilities-> e2fsprogs
阅读更多...
stm32编写Modbus步骤

stm32编写Modbus步骤

1. modbus协议简介： modbus协议基于rs485总线，采取一主多从的形式，主设备轮询各从设备信息，从设备不主动上报。 日常使用都是RTU模式，协议帧格式如下所示： 地址 功能码 寄存器地址 读取寄存器…
阅读更多...
springCloudAlibaba之分布式事务组件---seata

springCloudAlibaba之分布式事务组件---seata

Seata Sea学习分布式事务Seata二阶段提交协议AT模式 Sea学习 事务：事务是访问数据库并更新数据库中各项数据的一个程序执行单元。在关系数据库中，一个事务由一组或多组SQL语句组成。事务应该具有4个属性：原子性、一致性、隔离性、持久性。例如…
阅读更多...
数据交换平台_10_activatemq 中间件容错性测试

数据交换平台_10_activatemq 中间件容错性测试

目录概要 3. 容错测试： - 模拟ActiveMQ在异常情况下的表现，如网络中断、节点故障等。 - 观察ActiveMQ的容错机制是否能够正确处理异常情况，保证消息的可靠传输。 - 根据容错测试结果，优化ActiveMQ的容错机制，确保系统在面对异常情况时能够正确处理并恢复。 设计： 容错测…
阅读更多...
WPF-UI布局

WPF-UI布局

WPF布局元素有如下几个： Grid：网格。可以自定义行和列并通过行列的数量、行高和列宽来调整控件的布局。StackPanel：栈式面板。可将包含的元素在竖直或水平方向上排成一条直线，当移除一个元素后，后面的元素会自动向前移…
阅读更多...
鸿蒙HarmonyOS中的ohpm相关知识点总结

鸿蒙HarmonyOS中的ohpm相关知识点总结

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 OHPM是什么？一、OpenHarmony三方库中心仓网站（website）：用于检索、查看所需 OpenHarmony 三方库信息，也可…
阅读更多...
二维鱼游CFD代码

二维鱼游CFD代码

最近学了会Julia，参考了原作者的shark，做一下基于airfoils 2D的鱼游，暂时没想好有什么需要深入研究的，代码公开如下： 鱼身是naca0016，然后一些参数可以参考我以前发的论文。 using WaterLily, StaticArra…
阅读更多...
如何解决网络问题？

如何解决网络问题？

组织和 IT 管理员尽其所能完善他们的网络，但是，不同程度的网络问题仍然可能出现，这些网络问题需要立即响应和解决，如果这些问题在不合理的时间内得不到解决，网络和组织的损害可能会付出高昂的代价。这就是为什么 IT 管…
阅读更多...
【C#线程设计】3：threadpool

【C#线程设计】3：threadpool

实现： （1）.控件：group Box，text Box，check Box，label，botton，richtextbox 控件拉取见：https://blog.csdn.net/m0_74749240/article/details/139409510?spm1…
阅读更多...
IDEA配置mybatis-config.xml模板文件

IDEA配置mybatis-config.xml模板文件

IDEA配置mybatis-config.xml模板文件 File>>Settings>>File and Code Templates 创建mybatis-config.xml模板 模板内容取自mybatis官网 mybatis官网 <?xml version"1.0" encoding"UTF-8" ?> <!DOCTYPE configurationPUBLIC &qu…
阅读更多...
怎么使用手机远程访问电脑文件？（3种方法）

怎么使用手机远程访问电脑文件？（3种方法）

手机远程访问电脑文件 “有时&#xff0c;当我离开电脑时&#xff0c;仍然需要访问和使用桌面上的文件。是否有一种工具可以通过WiFi而不是USB连接&#xff0c;让我的手机远程访问电脑上的文件&#xff1f;如果有任何建议&#xff0c;我将非常感激&#xff01;” 除了希望手机…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023