{"id":16833548,"url":"https://github.com/ole/swiftui-layout-inspector","last_synced_at":"2025-03-17T04:32:34.091Z","repository":{"id":63177056,"uuid":"540415545","full_name":"ole/swiftui-layout-inspector","owner":"ole","description":"A tool for learning how the SwiftUI layout system works, and for debugging your own layout code.","archived":false,"fork":false,"pushed_at":"2023-01-05T11:16:00.000Z","size":613,"stargazers_count":170,"open_issues_count":3,"forks_count":4,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-02-27T18:00:56.511Z","etag":null,"topics":["swiftui"],"latest_commit_sha":null,"homepage":"","language":"Swift","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ole.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-09-23T11:50:28.000Z","updated_at":"2025-02-09T17:43:34.000Z","dependencies_parsed_at":"2023-02-04T02:45:24.661Z","dependency_job_id":null,"html_url":"https://github.com/ole/swiftui-layout-inspector","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ole%2Fswiftui-layout-inspector","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ole%2Fswiftui-layout-inspector/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ole%2Fswiftui-layout-inspector/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ole%2Fswiftui-layout-inspector/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ole","download_url":"https://codeload.github.com/ole/swiftui-layout-inspector/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243841223,"owners_count":20356446,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["swiftui"],"created_at":"2024-10-13T11:54:34.914Z","updated_at":"2025-03-17T04:32:33.774Z","avatar_url":"https://github.com/ole.png","language":"Swift","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SwiftUI Layout Inspector\n\n\u003chttps://github.com/ole/swiftui-layout-inspector\u003e\n\nA Swift library (and iOS/Mac app) for learning how the SwiftUI layout system works,\nand for debugging your own layout code. Inspect the layout behavior of SwiftUI\nviews, i.e. what sizes views propose to their children and how a view determines\nits own size.\n\n![Layout Inspector screenshot on iPhone simulator](assets/LayoutInspector-screenshot.png)\n\n## Motivation\n\nAt its core, SwiftUI’s layout algorithm is wonderfully simple:\n\n1.  The parent view proposes a size to its child view(s). Width and height are\n    both optional; either one (or both) can be `nil`.\n\n2.  The child view determines its own size, taking the proposed size into\n    account, as well as the sizes of its own children (it’s a recursive\n    process).\n    \n3.  The child reports its size back to the parent. The parent can’t change the\n    child’s size (in SwiftUI, each view determines its own size).\n    \n4.  The parent view positions its children.\n\nComplex layouts in SwiftUI can be achieved by composing built-in views and view\nmodifiers. The tricky part about understanding the layout system is learning the\nlayout behaviors of the built-in views, many of which are poorly documented (as\nof November 2022). The goal of this package is to help you learn.\n\n## Components\n\nLayout Inspector consists of:\n\n- The `LayoutInspector` library, provided as a SwiftPM package. Add it to your\n  own SwiftUI app to debug your layout code.\n\n- The `LayoutInspectorDemo` app, an iOS and Mac app that shows Layout Inspector\n  in action.\n\n## Requirements\n\niOS 16.0 or macOS 13.0 (because it requires the `Layout` protocol).\n\n## Instructions\n\n1.  `import LayoutInspector`\n\n2.  At the top of the view tree you want to inspect, insert `.inspectLayout()`.\n    \n3.  Insert `.layoutStep(\"View label\")` at each point in a view tree where you\n    want to inspect the layout algorithm (what sizes are being proposed and\n    returned). This is necessary to inject the helper \"views\" that observe the\n    layout process.\n\n## Acknowledgements\n\nIdea and initial code based on: [objc.io, Swift Talk episode 318, Inspecting SwiftUI's Layout Process (2022-08-19)](https://talk.objc.io/episodes/S01E318-inspecting-swiftui-s-layout-process)\n\nRuntime warnings in Xcode: [Point-Free, Unobtrusive runtime warnings for libraries (2022-01-03)](https://www.pointfree.co/blog/posts/70-unobtrusive-runtime-warnings-for-libraries)\n\nSee also [Credits.md](Credits.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fole%2Fswiftui-layout-inspector","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fole%2Fswiftui-layout-inspector","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fole%2Fswiftui-layout-inspector/lists"}