鸿蒙-元服务-坚果派-第六章元服务json文件处理

红目香薰

发布于 2025-02-21 08:49:45

6300

代码可运行

运行总次数：0

代码可运行

作者简介：大数据领域优质创作者、CSDN博客专家、阿里云博客专家、华为云课堂认证讲师、华为云社区云享专家、坚果派社区成员、具有10余年横向开发经验，全国教师技能大赛获奖教师，现从事于大学计算机领域教育工作。 主要内容：人工智能与大数据、Java、Python、C#、PHP、ASP.NET、ArkTS、FAQ、简历模板、学习资料、面试题库、就业指导等。 初心目标：持续输出，为技术人创造更多的价值。

1、json权限获取

entry\src\main\resources\base\element\string.json

entry\src\main\module.json5

{
  "name": "read_media_permission",
  "value": "申请读取媒体文件权限，便于应用访问您的照片、视频等媒体资料。"
}

"requestPermissions": [
  {
    "name": "ohos.permission.READ_MEDIA",
    "reason": "$string:read_media_permission",
    "usedScene": {
      "abilities": [
        "MainAbility"
      ],
      "when": "always"
    }
  }
],

2、写入文件操作

需要的包

import { fileIo } from '@kit.CoreFileKit';
import { common } from '@kit.AbilityKit';
import { buffer, List } from '@kit.ArkTS';

写入函数

createFile(){
  // 获取应用文件路径
  let context = getContext(this) as common.UIAbilityContext;
  let filesDir = context.filesDir;
  // 新建并打开文件
  let file = fileIo.openSync(filesDir + "/info.json", fileIo.OpenMode.WRITE_ONLY | fileIo.OpenMode.CREATE);
  // 将集合转换成json序列化对象存储到文件中
  let writeLen = fileIo.writeSync(file.fd, "写入的信息");
  console.info("字符串长度: " + writeLen);
  // 从文件读取一段内容
  console.info(filesDir)
  // 关闭文件
  fileIo.closeSync(file);
}

3、读取文件操作

readFile():string{
  let context = getContext(this) as common.UIAbilityContext;
  if (!context) {
    console.info("无法获取有效的上下文");
    return "";
  }
  let filesDir = context.filesDir;
  // 新建并打开文件
  let file = fileIo.openSync(filesDir + "info.json", fileIo.OpenMode.READ_ONLY|fileIo.OpenMode.CREATE);

  let bufferSize = 1024;
  let arrayBuffer = new ArrayBuffer(bufferSize);
  class Option {
    public offset: number = 0;
    public length: number = bufferSize;
  }
  let option = new Option();
  let content: string = "";
  let readLen: number=0;
  do {
    // 读取文件内容到数组缓冲区
    readLen = fileIo.readSync(file.fd, arrayBuffer, option);
    if (readLen > 0) {
      let buf = buffer.from(arrayBuffer, 0, readLen);
      content += buf.toString();
      // 更新下一次读取的偏移量，继续从文件后续位置读取
      option.offset += readLen;
    }
  } while (readLen === bufferSize);
  console.info("内容是："+content)
  // 关闭文件
  fileIo.closeSync(file);
  return content;
}

4、完整示例

Index.ets

import { router } from '@kit.ArkUI'

@Entry
@Component
struct Index {
  @State title: string = "四边形战士";
  @State content: string = "开启游戏";
  @State foot: string = "游戏介绍：";
  @State fileName: string = "/info3.json";

  build() {
    GridRow({
      breakpoints: {
        value: ['200vp', '300vp', '400vp', '500vp', '600vp'],
        reference: BreakpointsReference.WindowSize
      }
    }) {
      GridCol({
        span: {
          xs: 12, // 在最小宽度类型设备上，栅格子组件占据的栅格容器2列。
          sm: 12, // 在小宽度类型设备上，栅格子组件占据的栅格容器3列。
          md: 12, // 在中等宽度类型设备上，栅格子组件占据的栅格容器4列。
          lg: 12, // 在大宽度类型设备上，栅格子组件占据的栅格容器6列。
          xl: 12, // 在特大宽度类型设备上，栅格子组件占据的栅格容器8列。
          xxl: 12 // 在超大宽度类型设备上，栅格子组件占据的栅格容器12列。
        }
      }) {
        Row() {
          Text(this.title){
            Span(this.title.charAt(0)).fontColor("#B03737")
            Span(this.title.charAt(1)).fontColor("#002FA7")
            Span(this.title.charAt(2)).fontColor("#A05747")
            Span(this.title.charAt(3)).fontColor("#42426F").fontSize(45)
            Span(this.title.charAt(4)).fontColor("#cc0000").fontSize(42)
          }
            .fontSize(40)
            .fontColor(Color.Gray)
            .fontStyle(FontStyle.Italic)
            .fontWeight(FontWeight.Bolder)
            .minFontSize(20)
            .maxFontSize(40)
            .letterSpacing(22)
        }.width("100%").height('33.33%').alignItems(VerticalAlign.Bottom).justifyContent(FlexAlign.Center)
      }.backgroundColor(Color.White)

      GridCol({
        span: {
          xs: 12, // 在最小宽度类型设备上，栅格子组件占据的栅格容器2列。
          sm: 12, // 在小宽度类型设备上，栅格子组件占据的栅格容器3列。
          md: 12, // 在中等宽度类型设备上，栅格子组件占据的栅格容器4列。
          lg: 12, // 在大宽度类型设备上，栅格子组件占据的栅格容器6列。
          xl: 12, // 在特大宽度类型设备上，栅格子组件占据的栅格容器8列。
          xxl: 12 // 在超大宽度类型设备上，栅格子组件占据的栅格容器12列。
        }
      }) {
        Row() {
          Button("开 启 游 戏")
            .width('80%')
            .height('30%')
            .fontColor(Color.White)
            .fontSize(36)
            .backgroundColor('#3CB371')
            .onClick(() => {
              router.pushUrl({ url: 'pages/GamePage' })
            })
        }.width("100%").height('33.33%').justifyContent(FlexAlign.Center)
      }.backgroundColor(Color.White)

      GridCol({
        span: {
          xs: 12, // 在最小宽度类型设备上，栅格子组件占据的栅格容器2列。
          sm: 12, // 在小宽度类型设备上，栅格子组件占据的栅格容器3列。
          md: 12, // 在中等宽度类型设备上，栅格子组件占据的栅格容器4列。
          lg: 12, // 在大宽度类型设备上，栅格子组件占据的栅格容器6列。
          xl: 12, // 在特大宽度类型设备上，栅格子组件占据的栅格容器8列。
          xxl: 12 // 在超大宽度类型设备上，栅格子组件占据的栅格容器12列。
        }
      }) {
        Row() {
          Button("操 作 说 明")
            .width('40%')
            .height('30%')
            .fontSize(18)
            .onClick(() => {
              router.pushUrl({ url: 'pages/InfoPage' })
            }).backgroundColor("#7EA4FC")
          Button("个 人 排 名")
            .width('40%')
            .height('30%')
            .fontSize(18)
            .onClick(() => {
              router.pushUrl({ url: 'pages/OrderPage' })
            })
        }.width("100%").height('33.33%').alignItems(VerticalAlign.Top).justifyContent(FlexAlign.Center)
      }.backgroundColor(Color.White)
    }.width('100%')
    .height('100%').backgroundImage($r("app.media.bg")).backgroundImageSize(ImageSize.Cover)
  }
}

infoPage.ets

import { LengthMetrics, LengthMetricsUnit } from '@kit.ArkUI';

@Entry
@Component
struct InfoPage {
  scroller: Scroller = new Scroller();

  build() {
    Scroll(this.scroller) {
      Column() {
        Text() {
          Span("游戏简介\n").fontSize(36)
            .width('100%')
            .height('15%')
            .align(Alignment.Center)
          Span("\n        游戏画面以独特的四边形舞台为核心展开，这里是勇气与反应力的试炼场。身为 “四边形战士” 的玩家操控着角色伫立其中，而危机四伏的挑战悄然从四方逼近。\n" +
            "每一局游戏开启，静谧不过刹那，转瞬之间，在角色的上下左右方位，“魑”“魅”“魍”“魉” 四字所化身的诡异怪物便会随机闪现。它们张牙舞爪、形态各异，携带着阴森的气息与凌厉的攻势，仿佛要冲破屏幕，给角色带来致命一击。但玩家手中掌握着克敌制胜的关键 —— 位于屏幕下方精准对应的上下左右操控按钮。\n" +
            "在怪物现身的短短 1 秒之内，时间仿若被按下了极速键，紧张氛围飙升至顶点。玩家需凭借眼疾手快的本能与高度集中的精神，飞速判断怪物出现的方位，闪电点击相应按钮。一旦操作精准无误，伴随着一道炫目的特效光芒，怪物瞬间灰飞烟灭。").lineHeight(36)
        }
        .fontSize(26)
        .margin({ top: '10%' ,left:'10%'})
        .lineSpacing(LengthMetrics.px(55))
      }.width('90%').justifyContent(FlexAlign.Center)
    }
  }
}

GamePage.ets

import { LengthMetrics } from '@kit.ArkUI'
import { Orders } from '../model/Orders'
import { fileIo } from '@kit.CoreFileKit';
import { common } from '@kit.AbilityKit';
import { buffer, List } from '@kit.ArkTS';

@Entry
@Component
struct GamePage {
  @State ok: number = 0;
  @State isf: boolean = false;
  @State miss: number = 0;
  @State result: number = 0;
  @State choose_0: string = "";
  @State choose_1: string = "";
  @State choose_2: string = "";
  @State choose_3: string = "";
  @State choose_state_0: boolean = false;
  @State choose_state_1: boolean = false;
  @State choose_state_2: boolean = false;
  @State choose_state_3: boolean = false;
  @State pic: string = "app.media.init";
  @State start_text: string = "开 始 游 戏";
  @State rotateAngle: number = 0;
  @State speed: number = 1;
  @State fileName :string ="/info4.json";

  getTime():string{
    let base_time: Date = new Date(Date.now());
    return base_time.getFullYear()+"-"+(base_time.getMonth()+1)+"-"+base_time.getDate()+" "+base_time.getHours() + ":" + base_time.getMinutes() + ":" + base_time.getSeconds();
  }
  createFile(){
    // 获取应用文件路径
    let context = getContext(this) as common.UIAbilityContext;
    let filesDir = context.filesDir;
    // 新建并打开文件
    let file = fileIo.openSync(filesDir + this.fileName, fileIo.OpenMode.WRITE_ONLY | fileIo.OpenMode.CREATE);
    // 写入一段内容至文件
    let orderList : Array<Orders> = this.jsonInit();
    let no:number=1;
    if(orderList.length>0){
      no = orderList[orderList.length-1].no;
    }
    let order = new Orders();
    order.getTime=this.getTime();
    order.no = no+1;
    order.count = this.ok;
    orderList.push(order);
    // 将集合转换成json序列化对象存储到文件中
    let writeLen = fileIo.writeSync(file.fd, JSON.stringify(orderList));
    console.info("字符串长度: " + writeLen);
    // 从文件读取一段内容
    console.info(filesDir)
    // 关闭文件
    fileIo.closeSync(file);
  }
  /**
   * 读取信息文件
   */
  readFile():string{
    let context = getContext(this) as common.UIAbilityContext;
    if (!context) {
      console.info("无法获取有效的上下文");
      return "";
    }
    let filesDir = context.filesDir;
    // 新建并打开文件
    let file = fileIo.openSync(filesDir + this.fileName, fileIo.OpenMode.READ_ONLY|fileIo.OpenMode.CREATE);

    let bufferSize = 1024;
    let arrayBuffer = new ArrayBuffer(bufferSize);
    class Option {
      public offset: number = 0;
      public length: number = bufferSize;
    }
    let option = new Option();
    let content: string = "";
    let readLen: number=0;
    do {
      // 读取文件内容到数组缓冲区
      readLen = fileIo.readSync(file.fd, arrayBuffer, option);
      if (readLen > 0) {
        let buf = buffer.from(arrayBuffer, 0, readLen);
        content += buf.toString();
        // 更新下一次读取的偏移量，继续从文件后续位置读取
        option.offset += readLen;
      }
    } while (readLen === bufferSize);
    console.info("内容是："+content)
    // 关闭文件
    fileIo.closeSync(file);
    return content;
  }


  /**
   * 返回读取列表的集合
   * @returns
   */
  jsonInit():Array<Orders>{
    let list:Array<Orders> = new Array<Orders>();
    let tempList:string = this.readFile();
    if(tempList==""||tempList==null){
      return list;
    }
    let l:Array<Orders>=JSON.parse(tempList);
    for (let index = 0; index < l.length; index++) {
      let o :Orders = new Orders();
      o.getTime =  l[index].getTime;
      o.count =  l[index].count;
      list.push(o);
    }
    return list;
  }
  build() {
    GridRow({
      breakpoints: {
        value: ['200vp', '300vp', '400vp', '500vp', '600vp'],
        reference: BreakpointsReference.WindowSize
      }
    }) {
      // 顶部游戏状态
      GridCol({
        span: {
          xs: 12, // 在最小宽度类型设备上，栅格子组件占据的栅格容器2列。
          sm: 12, // 在小宽度类型设备上，栅格子组件占据的栅格容器3列。
          md: 12, // 在中等宽度类型设备上，栅格子组件占据的栅格容器4列。
          lg: 12, // 在大宽度类型设备上，栅格子组件占据的栅格容器6列。
          xl: 12, // 在特大宽度类型设备上，栅格子组件占据的栅格容器8列。
          xxl: 12 // 在超大宽度类型设备上，栅格子组件占据的栅格容器12列。
        }
      }) {
        Row() {
          Text(this.choose_0).fontSize(36).fontWeight(FontWeight.Bolder)
        }.height('20%').justifyContent(FlexAlign.Center)
      }.backgroundColor(Color.White)

      // 左侧游戏状态
      GridCol({
        span: {
          xs: 3, // 在最小宽度类型设备上，栅格子组件占据的栅格容器2列。
          sm: 3, // 在小宽度类型设备上，栅格子组件占据的栅格容器3列。
          md: 3, // 在中等宽度类型设备上，栅格子组件占据的栅格容器4列。
          lg: 3, // 在大宽度类型设备上，栅格子组件占据的栅格容器6列。
          xl: 3, // 在特大宽度类型设备上，栅格子组件占据的栅格容器8列。
          xxl: 3 // 在超大宽度类型设备上，栅格子组件占据的栅格容器12列。
        }
      }) {
        Row() {
          Text(this.choose_1).fontSize(36).fontWeight(FontWeight.Bolder)
        }.height('30%').justifyContent(FlexAlign.Center)
      }.backgroundColor(Color.White)

      // 中部人物显示
      GridCol({
        span: {
          xs: 6, // 在最小宽度类型设备上，栅格子组件占据的栅格容器2列。
          sm: 6, // 在小宽度类型设备上，栅格子组件占据的栅格容器3列。
          md: 6, // 在中等宽度类型设备上，栅格子组件占据的栅格容器4列。
          lg: 6, // 在大宽度类型设备上，栅格子组件占据的栅格容器6列。
          xl: 6, // 在特大宽度类型设备上，栅格子组件占据的栅格容器8列。
          xxl: 6 // 在超大宽度类型设备上，栅格子组件占据的栅格容器12列。
        }
      }) {
        Column() {
          Image($r(this.pic)).width('90%').height('80%').borderRadius(55)
          Button(this.start_text).width('100%')
            .onClick(() => {
              // 开启游戏前修改按钮显示文字
              this.start_text = "60";
              this.ok = 0;
              this.result = 0;
              // 开启游戏
              this.isf = true;
              // 倒计时
              let start_time = setInterval(() => {
                let now = parseInt(this.start_text);
                this.start_text = (parseInt(this.start_text) - 1).toString();
                if (now <= 0) {
                  this.start_text = "开 始 游 戏";
                  this.choose_0 = "";
                  this.choose_1 = "";
                  this.choose_2 = "";
                  this.choose_3 = "";
                  this.pic = "app.media.init";
                  clearInterval(start_time);
                  clearInterval(start_change);
                  this.createFile();
                }
              }, 1000)
              // 变换文字
              let start_change = setInterval(() => {
                this.choose_state_0 = false;
                this.choose_state_1 = false;
                this.choose_state_2 = false;
                this.choose_state_3 = false;
                let num: number = parseInt((Math.random() * 4).toString());
                let arr: string[] = ["魑", "魅", "魍", "魉"];
                this.choose_0 = "";
                this.choose_1 = "";
                this.choose_2 = "";
                this.choose_3 = "";

                console.info("启动了：" + arr[num]);
                switch (num) {
                  case 0:
                    this.choose_0 = arr[num];
                    break;
                  case 1:
                    this.choose_1 = arr[num];
                    break;
                  case 2:
                    this.choose_2 = arr[num];
                    break;
                  case 3:
                    this.choose_3 = arr[num];
                    break;
                }
              }, 1000)
              console.info("启动游戏。");
            })
        }.height('30%').justifyContent(FlexAlign.Center)
      }.backgroundColor(Color.White)

      // 右侧游戏状态
      GridCol({
        span: {
          xs: 3, // 在最小宽度类型设备上，栅格子组件占据的栅格容器2列。
          sm: 3, // 在小宽度类型设备上，栅格子组件占据的栅格容器3列。
          md: 3, // 在中等宽度类型设备上，栅格子组件占据的栅格容器4列。
          lg: 3, // 在大宽度类型设备上，栅格子组件占据的栅格容器6列。
          xl: 3, // 在特大宽度类型设备上，栅格子组件占据的栅格容器8列。
          xxl: 3 // 在超大宽度类型设备上，栅格子组件占据的栅格容器12列。
        }
      }) {
        Row() {
          Text(this.choose_2).fontSize(36).fontWeight(FontWeight.Bolder)
        }.height('30%').justifyContent(FlexAlign.Center)
      }.backgroundColor(Color.White)

      // 底部游戏状态
      GridCol({
        span: {
          xs: 12, // 在最小宽度类型设备上，栅格子组件占据的栅格容器2列。
          sm: 12, // 在小宽度类型设备上，栅格子组件占据的栅格容器3列。
          md: 12, // 在中等宽度类型设备上，栅格子组件占据的栅格容器4列。
          lg: 12, // 在大宽度类型设备上，栅格子组件占据的栅格容器6列。
          xl: 12, // 在特大宽度类型设备上，栅格子组件占据的栅格容器8列。
          xxl: 12 // 在超大宽度类型设备上，栅格子组件占据的栅格容器12列。
        }
      }) {
        Row() {
          Text(this.choose_3).fontSize(36).fontWeight(FontWeight.Bolder)
        }.height('20%').justifyContent(FlexAlign.Center)
      }.backgroundColor(Color.White)

      // 计分板
      GridCol({
        span: {
          xs: 12, // 在最小宽度类型设备上，栅格子组件占据的栅格容器2列。
          sm: 12, // 在小宽度类型设备上，栅格子组件占据的栅格容器3列。
          md: 12, // 在中等宽度类型设备上，栅格子组件占据的栅格容器4列。
          lg: 12, // 在大宽度类型设备上，栅格子组件占据的栅格容器6列。
          xl: 12, // 在特大宽度类型设备上，栅格子组件占据的栅格容器8列。
          xxl: 12 // 在超大宽度类型设备上，栅格子组件占据的栅格容器12列。
        }
      }) {
        Row() {
          Text() {
            Span("击中：")
            Span(this.ok + "\t")
            Span("   ")
            Span("积分：" + this.result)
          }
        }.height('5%').justifyContent(FlexAlign.Center)
      }.backgroundColor("#80D8CF")

      // 方向按钮
      GridCol({
        span: {
          xs: 12, // 在最小宽度类型设备上，栅格子组件占据的栅格容器2列。
          sm: 12, // 在小宽度类型设备上，栅格子组件占据的栅格容器3列。
          md: 12, // 在中等宽度类型设备上，栅格子组件占据的栅格容器4列。
          lg: 12, // 在大宽度类型设备上，栅格子组件占据的栅格容器6列。
          xl: 12, // 在特大宽度类型设备上，栅格子组件占据的栅格容器8列。
          xxl: 12 // 在超大宽度类型设备上，栅格子组件占据的栅格容器12列。
        }
      }) {
        Row() {
          Button("上踢").width("50%").onClick(() => {
            if (!this.isf) {
              return;
            }
            if (this.choose_state_0) {
              return;
            }
            this.pic = "app.media.up";
            if (this.choose_0 == "魑") {
              this.ok += 1;
              this.result += 100;
              this.choose_0 = "";
              this.choose_state_0 = true;
            }
          }).gesture(SwipeGesture({ direction: SwipeDirection.Vertical })
            .onAction((event: GestureEvent | undefined) => {
              if (event) {
                this.speed = event.speed;
                let count = event.angle;
                if((count>=0 && count<=45)||(count>=315&&count<=360)){
                  console.info("滑动触发。up")
                  if (!this.isf) {
                    return;
                  }
                  if (this.choose_state_0) {
                    return;
                  }
                  this.pic = "app.media.up";
                  if (this.choose_0 == "魑") {
                    this.ok += 1;
                    this.result += 100;
                    this.choose_0 = "";
                    this.choose_state_0 = true;
                  }
                }
              }
            }))
        }.height('8%').justifyContent(FlexAlign.Center)
      }.backgroundColor(Color.White)

      GridCol({
        span: {
          xs: 6, // 在最小宽度类型设备上，栅格子组件占据的栅格容器2列。
          sm: 6, // 在小宽度类型设备上，栅格子组件占据的栅格容器3列。
          md: 6, // 在中等宽度类型设备上，栅格子组件占据的栅格容器4列。
          lg: 6, // 在大宽度类型设备上，栅格子组件占据的栅格容器6列。
          xl: 6, // 在特大宽度类型设备上，栅格子组件占据的栅格容器8列。
          xxl: 6 // 在超大宽度类型设备上，栅格子组件占据的栅格容器12列。
        }
      }) {
        Row() {
          Button("左拳").width("95%").onClick(() => {
            if (!this.isf) {
              return;
            }
            if (this.choose_state_1) {
              return;
            }
            this.pic = "app.media.left_right";
            if (this.choose_1 == "魅") {
              this.ok += 1;
              this.result += 100;
              this.choose_1 = "";
              this.choose_state_0 = true;
            }
          }).gesture(SwipeGesture({ direction: SwipeDirection.Vertical })
            .onAction((event: GestureEvent | undefined) => {
              if (event) {
                this.speed = event.speed;
                let count = event.angle;
                if(count>45 && count<=135){
                  console.info("滑动触发。left")
                  if (!this.isf) {
                    return;
                  }
                  if (this.choose_state_1) {
                    return;
                  }
                  this.pic = "app.media.left_right";
                  if (this.choose_1 == "魅") {
                    this.ok += 1;
                    this.result += 100;
                    this.choose_1 = "";
                    this.choose_state_0 = true;
                  }
                }
              }
            }))
        }.height('8%').justifyContent(FlexAlign.End)
      }.backgroundColor(Color.White)

      GridCol({
        span: {
          xs: 6, // 在最小宽度类型设备上，栅格子组件占据的栅格容器2列。
          sm: 6, // 在小宽度类型设备上，栅格子组件占据的栅格容器3列。
          md: 6, // 在中等宽度类型设备上，栅格子组件占据的栅格容器4列。
          lg: 6, // 在大宽度类型设备上，栅格子组件占据的栅格容器6列。
          xl: 6, // 在特大宽度类型设备上，栅格子组件占据的栅格容器8列。
          xxl: 6 // 在超大宽度类型设备上，栅格子组件占据的栅格容器12列。
        }
      }) {
        Row() {
          Button("右拳").width("95%").onClick(() => {
            if (!this.isf) {
              return;
            }
            if (this.choose_state_2) {
              return;
            }
            this.pic = "app.media.right_left";
            if (this.choose_2 == "魍") {
              this.ok += 1;
              this.result += 100;
              this.choose_2 = "";
              this.choose_state_0 = true;
            }
          }).gesture(SwipeGesture({ direction: SwipeDirection.Vertical })
            .onAction((event: GestureEvent | undefined) => {
              if (event) {
                this.speed = event.speed;
                let count = event.angle;
                if(count>135 && count<=225){
                  console.info("滑动触发。left")
                  if (!this.isf) {
                    return;
                  }
                  if (this.choose_state_2) {
                    return;
                  }
                  this.pic = "app.media.right_left";
                  if (this.choose_2 == "魍") {
                    this.ok += 1;
                    this.result += 100;
                    this.choose_2 = "";
                    this.choose_state_0 = true;
                  }
                }
              }
            }))
        }.height('8%').justifyContent(FlexAlign.Start)
      }.backgroundColor(Color.White)

      GridCol({
        span: {
          xs: 12, // 在最小宽度类型设备上，栅格子组件占据的栅格容器2列。
          sm: 12, // 在小宽度类型设备上，栅格子组件占据的栅格容器3列。
          md: 12, // 在中等宽度类型设备上，栅格子组件占据的栅格容器4列。
          lg: 12, // 在大宽度类型设备上，栅格子组件占据的栅格容器6列。
          xl: 12, // 在特大宽度类型设备上，栅格子组件占据的栅格容器8列。
          xxl: 12 // 在超大宽度类型设备上，栅格子组件占据的栅格容器12列。
        }
      }) {
        Row() {
          Button("下砸").width("50%").onClick(() => {
            if (!this.isf) {
              return;
            }
            if (this.choose_state_3) {
              return;
            }
            this.pic = "app.media.down";
            if (this.choose_3 == "魉") {
              this.ok += 1;
              this.result += 100;
              this.choose_3 = "";
              this.choose_state_0 = true;
            }
          }).gesture(SwipeGesture({ direction: SwipeDirection.Vertical })
            .onAction((event: GestureEvent | undefined) => {
              if (event) {
                this.speed = event.speed;
                let count = event.angle;
                if(count>225 && count<315){
                  console.info("滑动触发。up")
                  if (!this.isf) {
                    return;
                  }
                  if (this.choose_state_3) {
                    return;
                  }
                  this.pic = "app.media.down";
                  if (this.choose_3 == "魉") {
                    this.ok += 1;
                    this.result += 100;
                    this.choose_3 = "";
                    this.choose_state_0 = true;
                  }
                }
              }
            }))
        }.height('8%').justifyContent(FlexAlign.Center)
      }.backgroundColor(Color.White)
    }
  }
}

model/Orders.ets

export class Orders {
  public getTime: string = "";
  public no :number = 0;
  public count: number = 0;
}

OrderPage.ets

import { LengthMetrics } from '@kit.ArkUI'
import { Orders } from '../model/Orders'
import { fileIo } from '@kit.CoreFileKit';
import { common } from '@kit.AbilityKit';
import { buffer} from '@kit.ArkTS';

@Entry
@Component
struct OrderPage {
  @State fileName: string = "/info4.json";
  @State list: Array<Orders> = new Array<Orders>();

  /**
   * 读取信息文件
   */
  readFile(): string {
    let context = getContext(this) as common.UIAbilityContext;
    if (!context) {
      console.info("无法获取有效的上下文");
      return "";
    }
    let filesDir = context.filesDir;
    // 新建并打开文件
    let file = fileIo.openSync(filesDir + this.fileName, fileIo.OpenMode.READ_ONLY|fileIo.OpenMode.CREATE);
    let bufferSize = 1024;
    let arrayBuffer = new ArrayBuffer(bufferSize);

    class Option {
      public offset: number = 0;
      public length: number = bufferSize;
    }

    let option = new Option();
    let content: string = "";
    let readLen: number = 0;
    do {
      // 读取文件内容到数组缓冲区
      readLen = fileIo.readSync(file.fd, arrayBuffer, option);
      if (readLen > 0) {
        let buf = buffer.from(arrayBuffer, 0, readLen);
        content += buf.toString();
        // 更新下一次读取的偏移量，继续从文件后续位置读取
        option.offset += readLen;
      }
    } while (readLen === bufferSize);
    // 关闭文件
    fileIo.closeSync(file);
    return content;
  }

  /**
   * 返回读取列表的集合
   * @returns
   */
  jsonInit() {
    let tempList:string = this.readFile();
    if(tempList==""||tempList==null){
      return;
    }
    let l:Array<Orders>=JSON.parse(tempList);
    for (let index = 0; index < l.length; index++) {
      let o :Orders = new Orders();
      o.getTime =  l[index].getTime;
      o.count =  l[index].count;
      this.list.push(o);
    }
  }

  aboutToAppear(): void {
    // 初始化数据
    this.jsonInit();
  }

  build() {
    Column() {
      Text("排 名").fontSize(36).lineSpacing(LengthMetrics.prototype).margin({ top: '15%' })
      Column() {
        Text().borderStyle(BorderStyle.Solid).borderWidth(2).width('100%')
        Row(){
          Text("排名").width('20%').textAlign(TextAlign.Center).fontSize(22)
          Text("时间").width('57%').textAlign(TextAlign.Center).fontSize(22)
          Text("成绩").width('23%').textAlign(TextAlign.Center).fontSize(22)
        }
        Text().borderStyle(BorderStyle.Solid).borderWidth(1).width('100%')
        ForEach(this.list,(order:Orders,index)=>{
          Row(){
            Text((index+1).toString()).width('20%').textAlign(TextAlign.Center).fontSize(22)
            Text(order.getTime).width('57%').textAlign(TextAlign.Center).fontSize(18)
            Text(order.count.toString()).width('23%').textAlign(TextAlign.Center).fontSize(22)
          }
          Text().borderStyle(BorderStyle.Solid).borderWidth(1).width('100%')
        })
      }
    }
    .width('100%')
    .height('100%')
    .backgroundImage($r("app.media.bg"))
    .backgroundImageSize(ImageSize.Cover)
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
  }
}