如何在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
相关产品推荐
相关产品推荐

