You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在Flutter中展示指定格式的JSON数据?

实现JSON结构化美观展示的方法

1. 先修正合法的JSON格式

你提供的原始JSON未给键名添加引号,属于非法格式,先修正为标准JSON:

{
  "deploy": {
    "hash": "ac75b1d8664f2494f8aabcc218bb1ca6d819a44c223ddeb1f5367c3f4db51bf0",
    "header": {
      "account": "01f6EE89AC9acA3b01Ee2E33eFdbE899fF89B38D2DC7Fd2baC7B1f62FDD490f3F2",
      "timestamp": "2023-09-22T04:21:30.141Z",
      "ttl": "30m",
      "gas_price": 1,
      "body_hash": "be68953c273ff81ac1e62c975d27ecf8eafdda23203d70e116a6684216ebd385",
      "dependencies": [],
      "chain_name": "casper-test"
    },
    "payment": {
      "ModuleBytes": {
        "module_bytes": "",
        "args": [
          ["amount", {"bytes": "0400e1f505", "cl_type": "U512"}]
        ]
      }
    },
    "session": {
      "Transfer": {
        "args": [
          ["amount", {"bytes": "0400f90295", "cl_type": "U512"}],
          ["target", {"bytes": "0106ca7c39cd272dbf21a86eeb3b36b7c26e2e9b94af64292419f7862936bca2ca", "cl_type": "PublicKey"}],
          ["id", {"bytes": "010100000000000000", "cl_type": {"Option": "U64"}}]
        ]
      }
    },
    "approvals": []
  }
}

2. 用Markdown折叠块实现层级可展开的展示效果

如果想要类似参考图的可展开/折叠的结构化样式,用<details>和<summary>标签配合列表实现,在Stack Overflow、GitHub等平台都能正常渲染:

<details>
<summary>deploy</summary>
  <details>
  <summary>hash: ac75b1d8664f2494f8aabcc218bb1ca6d819a44c223ddeb1f5367c3f4db51bf0</summary>
  </details>
  <details>
  <summary>header</summary>
    - account: 01f6EE89AC9acA3b01Ee2E33eFdbE899fF89B38D2DC7Fd2baC7B1f62FDD490f3F2
    - timestamp: 2023-09-22T04:21:30.141Z
    - ttl: 30m
    - gas_price: 1
    - body_hash: be68953c273ff81ac1e62c975d27ecf8eafdda23203d70e116a6684216ebd385
    - dependencies: []
    - chain_name: casper-test
  </details>
  <details>
  <summary>payment</summary>
    <details>
    <summary>ModuleBytes</summary>
      - module_bytes: 
      - args: 
        - [amount, {bytes: 0400e1f505, cl_type: U512}]
    </details>
  </details>
  <details>
  <summary>session</summary>
    <details>
    <summary>Transfer</summary>
      - args:
        - [amount, {bytes: 0400f90295, cl_type: U512}]
        - [target, {bytes: 0106ca7c39cd272dbf21a86eeb3b36b7c26e2e9b94af64292419f7862936bca2ca, cl_type: PublicKey}]
        - [id, {bytes: 010100000000000000, cl_type: {Option: U64}}]
    </details>
  </details>
  <details>
  <summary>approvals: []</summary>
  </details>
</details>

渲染后点击每个summary就能展开对应的层级内容,嵌套结构清晰,符合你要的参考图样式。

3. 纯代码块高亮展示

如果不需要折叠功能,直接用带语法高亮的代码块也能清晰展示JSON结构,大部分平台都支持JSON语法高亮,代码块开头指定json即可。

内容的提问来源于stack exchange,提问作者zxcvbnm111

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.10 08:27:06