{"id":5608,"date":"2022-04-24T15:16:30","date_gmt":"2022-04-24T07:16:30","guid":{"rendered":"http:\/\/123.57.164.21\/?p=5608"},"modified":"2022-04-24T15:16:30","modified_gmt":"2022-04-24T07:16:30","slug":"%e5%9c%a8-swiftui-%e4%b8%ad%e7%94%a8-zindex-%e8%b0%83%e6%95%b4%e8%a7%86%e5%9b%be%e6%98%be%e7%a4%ba%e9%a1%ba%e5%ba%8f","status":"publish","type":"post","link":"https:\/\/92it.top\/?p=5608","title":{"rendered":"\u5728 SwiftUI \u4e2d\u7528 zIndex \u8c03\u6574\u89c6\u56fe\u663e\u793a\u987a\u5e8f"},"content":{"rendered":"\n<p>\u8f6c\u8f7d\uff1ahttps:\/\/www.fatbobman.com\/posts\/zIndex\/<\/p>\n\n\n\n<p>\u672c\u6587\u5c06\u5bf9 SwiftUI \u7684 zIndex \u4fee\u9970\u7b26\u505a\u4ee5\u4ecb\u7ecd\uff0c\u5305\u62ec\uff1a\u4f7f\u7528\u65b9\u6cd5\u3001zIndex \u7684\u4f5c\u7528\u57df\u3001\u901a\u8fc7 zIndex \u907f\u514d\u52a8\u753b\u5f02\u5e38\u3001\u4e3a\u4ec0\u4e48 zIndex \u9700\u8981\u8bbe\u7f6e\u7a33\u5b9a\u7684\u503c\u4ee5\u53ca\u5728\u591a\u79cd\u5e03\u5c40\u5bb9\u5668\u5185\u4f7f\u7528 zIndex \u7b49\u5185\u5bb9\u3002<\/p>\n\n\n\n<p><strong>zIndex \u4fee\u9970\u7b26<\/strong><\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>\u5728 SwiftUI \u4e2d\uff0c\u5f00\u53d1\u8005\u4f7f\u7528 zIndex \u4fee\u9970\u7b26\u6765\u63a7\u5236\u91cd\u53e0\u89c6\u56fe\u95f4\u7684\u663e\u793a\u987a\u5e8f\uff0c\u5177\u6709\u8f83\u5927 zIndex \u503c\u7684\u89c6\u56fe\u5c06\u663e\u793a\u5728\u5177\u6709\u8f83\u5c0f zIndex \u503c\u7684\u89c6\u56fe\u4e4b\u4e0a\u3002\u5728\u6ca1\u6709\u6307\u5b9a zIndex \u503c\u7684\u65f6\u5019\uff0cSwiftUI \u9ed8\u8ba4\u4f1a\u7ed9\u89c6\u56fe\u4e00\u4e2a\u4e3a 0 \u7684 zIndex \u503c\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">ZStack {\n    Text(\"Hello\") \/\/ \u9ed8\u8ba4 zIndex \u503c\u4e3a 0 \uff0c\u663e\u793a\u5728\u6700\u540e\u9762\n    \n    Text(\"World\")\n        .zIndex(3.5)  \/\/ \u663e\u793a\u5728\u6700\u524d\u9762\n    \n    Text(\"Hi\")\n        .zIndex(3.0)  \n    \n    Text(\"Fat\")\n        .zIndex(3.0) \/\/ \u663e\u793a\u5728 Hi \u4e4b\u524d\uff0c \u76f8\u540c zIndex \u503c\uff0c\u6309\u5e03\u5c40\u987a\u5e8f\u663e\u793a\n}\n\n<\/pre>\n\n\n\n<p><strong>zIndex \u7684\u4f5c\u7528\u57df<\/strong><\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<ul><li>zIndex \u4f5c\u7528\u8303\u56f4\u88ab\u9650\u5b9a\u5728\u5e03\u5c40\u5bb9\u5668\u5185<\/li><\/ul>\n\n\n\n<p>\u89c6\u56fe\u7684 zIndex \u503c\u4ec5\u9650\u4e8e\u5728\u540c\u4e00\u4e2a\u5e03\u5c40\u5bb9\u5668\u4e4b\u95f4\u8fdb\u884c\u6bd4\u8f83\uff08 Group \u4e0d\u662f\u5e03\u5c40\u5bb9\u5668\uff09\u3002\u5904\u4e8e\u4e0d\u540c\u7684\u5e03\u5c40\u5bb9\u5668\u6216\u7236\u5b50\u5bb9\u5668\u4e4b\u95f4\u7684\u89c6\u56fe\u65e0\u6cd5\u76f4\u63a5\u6bd4\u8f83\u3002<\/p>\n\n\n\n<ul><li>\u5f53\u4e00\u4e2a\u89c6\u56fe\u6709\u591a\u4e2a zIndex \u4fee\u9970\u7b26\u65f6\uff0c\u89c6\u56fe\u5c06\u4f7f\u7528\u6700\u5185\u5c42\u7684 zIndex \u503c<\/li><\/ul>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">struct ScopeDemo: View {\n    var body: some View {\n        ZStack {\n            \/\/ zIndex = 1\n            Color.red\n                .zIndex(1)\n\n            \/\/ zIndex = 0.5\n            SubView()\n                .zIndex(0.5)\n\n            \/\/ zIndex = 0.5, \u4f7f\u7528\u6700\u5185\u5c42\u7684 zIndex \u503c\n            Text(\"abc\")\n                .padding()\n                .zIndex(0.5)\n                .foregroundColor(.green)\n                .overlay(\n                    Rectangle().fill(.green.opacity(0.5))\n                )\n                .padding(.top, 100)\n                .zIndex(1.3)\n\n            \/\/ zIndex = 1.5 \uff0cGroup \u4e0d\u662f\u5e03\u5c40\u5bb9\u5668\uff0c\u4f7f\u7528\u6700\u5185\u5c42\u7684 zIndex \u503c\n            Group {\n                Text(\"Hello world\")\n                    .zIndex(1.5)\n            }\n            .zIndex(0.5)\n        }\n        .ignoresSafeArea()\n    }\n}\n\nstruct SubView: View {\n    var body: some View {\n        ZStack {\n            Text(\"Sub View1\")\n                .zIndex(3) \/\/ zIndex = 3 \uff0c\u4ec5\u5728\u672c ZStack \u4e2d\u6bd4\u8f83\n\n            Text(\"Sub View2\") \/\/ zIndex = 3.5 \uff0c\u4ec5\u5728\u672c ZStack \u4e2d\u6bd4\u8f83\n                .zIndex(3.5)\n        }\n        .padding(.top, 100)\n    }\n}<\/pre>\n\n\n\n<p>\u6267\u884c\u4e0a\u9762\u7684\u4ee3\u7801\uff0c\u6700\u7ec8\u53ea\u80fd\u770b\u5230 <code>Color<\/code> \u548c <code>Group<\/code><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/123.57.164.21\/wp-content\/uploads\/2022\/04\/\u56fe\u7247-159.png\" alt=\"\" class=\"wp-image-5609\" width=\"441\" height=\"193\" srcset=\"https:\/\/92it.top\/wp-content\/uploads\/2022\/04\/\u56fe\u7247-159.png 1008w, https:\/\/92it.top\/wp-content\/uploads\/2022\/04\/\u56fe\u7247-159-300x132.png 300w, https:\/\/92it.top\/wp-content\/uploads\/2022\/04\/\u56fe\u7247-159-768x337.png 768w, https:\/\/92it.top\/wp-content\/uploads\/2022\/04\/\u56fe\u7247-159-830x364.png 830w, https:\/\/92it.top\/wp-content\/uploads\/2022\/04\/\u56fe\u7247-159-230x101.png 230w, https:\/\/92it.top\/wp-content\/uploads\/2022\/04\/\u56fe\u7247-159-350x153.png 350w, https:\/\/92it.top\/wp-content\/uploads\/2022\/04\/\u56fe\u7247-159-480x210.png 480w\" sizes=\"(max-width: 441px) 100vw, 441px\" \/><\/figure><\/div>\n\n\n\n<p><strong>\u8bbe\u5b9a zIndex \u907f\u514d\u52a8\u753b\u5f02\u5e38<\/strong><\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>\u5982\u679c\u89c6\u56fe\u7684 zIndex \u503c\u76f8\u540c\uff08\u6bd4\u5982\u5168\u90e8\u4f7f\u7528\u9ed8\u8ba4\u503c 0 \uff09\uff0cSwiftUI \u4f1a\u6309\u7167\u5e03\u5c40\u5bb9\u5668\u7684\u5e03\u5c40\u65b9\u5411\uff08 \u89c6\u56fe\u4ee3\u7801\u5728\u95ed\u5305\u4e2d\u7684\u51fa\u73b0\u987a\u5e8f \uff09\u5bf9\u89c6\u56fe\u8fdb\u884c\u7ed8\u5236\u3002\u5728\u89c6\u56fe\u6ca1\u6709\u589e\u51cf\u53d8\u5316\u7684\u9700\u6c42\u65f6\uff0c\u53ef\u4ee5\u4e0d\u5fc5\u663e\u5f0f\u8bbe\u7f6e zIndex \u3002\u4f46\u5982\u679c\u6709\u52a8\u6001\u7684\u89c6\u56fe\u589e\u51cf\u9700\u6c42\uff0c\u5982\u4e0d\u663e\u5f0f\u8bbe\u7f6e zIndex \uff0c\u67d0\u4e9b\u60c5\u51b5\u4e0b\u4f1a\u51fa\u73b0\u663e\u793a\u5f02\u5e38\uff0c\u4f8b\u5982\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">struct AnimationWithoutZIndex: View {\n    @State var show = true\n    var body: some View {\n        ZStack {\n            Color.red\n            if show {\n                Color.yellow\n            }\n            Button(show ? \"Hide\" : \"Show\") {\n                withAnimation {\n                    show.toggle()\n                }\n            }\n            .buttonStyle(.bordered)\n            .padding(.top, 100)\n        }\n        .ignoresSafeArea()\n    }\n}\n\n<\/pre>\n\n\n\n<p>\u70b9\u51fb\u6309\u94ae\uff0c\u7ea2\u8272\u51fa\u73b0\u65f6\u6ca1\u6709\u6e10\u53d8\u8fc7\u573a\uff0c\u9690\u85cf\u65f6\u6709\u6e10\u53d8\u8fc7\u573a\u3002<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/123.57.164.21\/wp-content\/uploads\/2022\/04\/animationException20220409.gif\" alt=\"\" class=\"wp-image-5610\" width=\"386\" height=\"241\"\/><\/figure><\/div>\n\n\n\n<p>\u5982\u679c\u6211\u4eec\u663e\u5f0f\u5730\u7ed9\u6bcf\u4e2a\u89c6\u56fe\u8bbe\u7f6e\u4e86 zIndex \u503c\uff0c\u5c31\u53ef\u4ee5\u89e3\u51b3\u8fd9\u4e2a\u663e\u793a\u5f02\u5e38\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">struct AnimationWithZIndex: View {\n    @State var show = true\n    var body: some View {\n        ZStack {\n            Color.red\n                .zIndex(1) \/\/ \u6309\u987a\u5e8f\u8bbe\u7f6e zIndex \u503c\n            if show {\n                Color.yellow\n                    .zIndex(2) \/\/ \u53d6\u6d88\u6216\u663e\u793a\u65f6\uff0cSwiftUI \u5c06\u660e\u786e\u77e5\u9053\u8be5\u89c6\u56fe\u5728 Color \u548c Button \u4e4b\u95f4\n            }\n            Button(show ? \"Hide\" : \"Show\") {\n                withAnimation {\n                    show.toggle()\n                }\n            }\n            .buttonStyle(.bordered)\n            .padding(.top, 100)\n            .zIndex(3) \/\/ \u6700\u4e0a\u5c42\u89c6\u56fe\n        }\n        .ignoresSafeArea()\n    }<\/pre>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/123.57.164.21\/wp-content\/uploads\/2022\/04\/zIndexAnimation2022-04-09-17.15.18.2022-04-09-17_17_08.gif\" alt=\"\" class=\"wp-image-5611\" width=\"392\" height=\"245\"\/><\/figure><\/div>\n\n\n\n<p><strong>zIndex \u662f\u4e0d\u53ef\u52a8\u753b\u7684<\/strong><\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>\u540c <code>offset<\/code> \u3001<code>rotationEffect<\/code> \u3001<code>opacity<\/code> \u7b49\u4fee\u9970\u7b26\u4e0d\u540c\uff0c zIndex \u662f\u4e0d\u53ef\u52a8\u753b\u7684 \uff08 \u5176\u5185\u90e8\u5bf9\u5e94\u7684 _TraitWritingModifier \u5e76\u4e0d\u7b26\u5408 Animatable \u534f\u8bae\uff09\u3002\u8fd9\u610f\u5473\u7740\u5373\u4f7f\u6211\u4eec\u4f7f\u7528\u4f8b\u5982 <code>withAnimation<\/code> \u4e4b\u7c7b\u7684\u663e\u5f0f\u52a8\u753b\u624b\u6bb5\u6765\u6539\u53d8\u89c6\u56fe\u7684 zIndex \u503c\uff0c\u5e76\u4e0d\u4f1a\u51fa\u73b0\u9884\u671f\u4e2d\u7684\u5e73\u6ed1\u8fc7\u6e21\uff0c\u4f8b\u5982\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">struct SwapByZIndex: View {\n    @State var current: Current = .page1\n    var body: some View {\n        ZStack {\n            SubText(text: Current.page1.rawValue, color: .red)\n                .onTapGesture { swap() }\n                .zIndex(current == .page1 ? 1 : 0)\n\n            SubText(text: Current.page2.rawValue, color: .green)\n                .onTapGesture { swap() }\n                .zIndex(current == .page2 ? 1 : 0)\n\n            SubText(text: Current.page3.rawValue, color: .cyan)\n                .onTapGesture { swap() }\n                .zIndex(current == .page3 ? 1 : 0)\n        }\n    }\n\n    func swap() {\n        withAnimation {\n            switch current {\n            case .page1:\n                current = .page2\n            case .page2:\n                current = .page3\n            case .page3:\n                current = .page1\n            }\n        }\n    }\n}\n\nenum Current: String, Hashable, Equatable {\n    case page1 = \"Page 1 tap to Page 2\"\n    case page2 = \"Page 2 tap to Page 3\"\n    case page3 = \"Page 3 tap to Page 1\"\n}\n\nstruct SubText: View {\n    let text: String\n    let color: Color\n    var body: some View {\n        ZStack {\n            color\n            Text(text)\n        }\n        .ignoresSafeArea()\n    }\n}<\/pre>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/123.57.164.21\/wp-content\/uploads\/2022\/04\/swapWithzIndex2022-04-09-17.31.01.2022-04-09-17_33_07.gif\" alt=\"\" class=\"wp-image-5612\" width=\"394\" height=\"246\"\/><\/figure><\/div>\n\n\n\n<p>\u56e0\u6b64\u5728\u8fdb\u884c\u89c6\u56fe\u7684\u663e\u793a\u5207\u6362\u65f6\uff0c\u6700\u597d\u901a\u8fc7 <code>opacity<\/code> \u6216 <code>transition<\/code> \u7b49\u65b9\u5f0f\u6765\u5904\u7406\uff08\u53c2\u9605\u4e0b\u9762\u7684\u4ee3\u7801\uff09\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ \u4f7f\u7528 opacity\nZStack {\n    SubText(text: Current.page1.rawValue, color: .red)\n        .onTapGesture { swap() }\n        .opacity(current == .page1 ? 1 : 0)\n\n    SubText(text: Current.page2.rawValue, color: .green)\n        .onTapGesture { swap() }\n        .opacity(current == .page2 ? 1 : 0)\n\n    SubText(text: Current.page3.rawValue, color: .cyan)\n        .onTapGesture { swap() }\n        .opacity(current == .page3 ? 1 : 0)\n}\n\n\/\/ \u901a\u8fc7 transition\nVStack {\n    switch current {\n    case .page1:\n        SubText(text: Current.page1.rawValue, color: .red)\n            .onTapGesture { swap() }\n    case .page2:\n        SubText(text: Current.page2.rawValue, color: .green)\n            .onTapGesture { swap() }\n    case .page3:\n        SubText(text: Current.page3.rawValue, color: .cyan)\n            .onTapGesture { swap() }\n    }\n}<\/pre>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"250\" src=\"http:\/\/123.57.164.21\/wp-content\/uploads\/2022\/04\/swapWithTransition2022-04-09-17.36.08.2022-04-09-17_38_34.gif\" alt=\"\" class=\"wp-image-5613\"\/><\/figure><\/div>\n\n\n\n<p><strong>\u4e3a zIndex \u8bbe\u7f6e\u7a33\u5b9a\u7684\u503c<\/strong><\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>\u7531\u4e8e zIndex \u662f\u4e0d\u53ef\u52a8\u753b\u7684\uff0c\u6240\u4ee5\u5e94\u5c3d\u91cf\u4e3a\u89c6\u56fe\u8bbe\u7f6e\u7a33\u5b9a\u7684 zIndex \u503c\u3002<\/p>\n\n\n\n<p>\u5bf9\u4e8e\u56fa\u5b9a\u6570\u91cf\u7684\u89c6\u56fe\uff0c\u53ef\u4ee5\u624b\u52a8\u5728\u4ee3\u7801\u4e2d\u8fdb\u884c\u6807\u6ce8\u3002\u5bf9\u4e8e<strong>\u53ef\u53d8\u6570\u91cf<\/strong>\u7684\u89c6\u56fe\uff08\u4f8b\u5982\u4f7f\u7528\u4e86 ForEach\uff09\uff0c\u9700\u8981\u5728\u6570\u636e\u4e2d\u627e\u5230<strong>\u53ef\u4f5c\u4e3a zIndex \u503c\u53c2\u8003\u4f9d\u636e\u7684\u7a33\u5b9a\u6807\u8bc6<\/strong>\u3002<\/p>\n\n\n\n<p>\u4f8b\u5982\u4e0b\u9762\u7684\u4ee3\u7801\uff0c\u5c3d\u7ba1\u6211\u4eec\u5229\u7528\u4e86 <code>enumerated<\/code> \u4e3a\u6bcf\u4e2a\u89c6\u56fe\u6dfb\u52a0\u5e8f\u53f7\uff0c\u5e76\u4ee5\u6b64\u5e8f\u53f7\u4f5c\u4e3a\u89c6\u56fe\u7684 zIndex \u503c\uff0c\u4f46\u5f53\u89c6\u56fe\u53d1\u751f\u589e\u51cf\u65f6\uff0c\u7531\u4e8e\u5e8f\u53f7\u7684\u91cd\u7ec4\uff0c\u5c31\u4f1a\u6709\u51e0\u7387\u51fa\u73b0\u52a8\u753b\u5f02\u5e38\u7684\u60c5\u51b5\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">struct IndexDemo1: View {\n    @State var backgrounds = (0...10).map { _ in BackgroundWithoutIndex() }\n    var body: some View {\n        ZStack {\n            ForEach(Array(backgrounds.enumerated()), id: \\.element.id) { item in\n                let background = item.element\n                background.color\n                    .offset(background.offset)\n                    .frame(width: 200, height: 200)\n                    .onTapGesture {\n                        withAnimation {\n                            if let index = backgrounds.firstIndex(where: { $0.id == background.id }) {\n                                backgrounds.remove(at: index)\n                            }\n                        }\n                    }\n                    .zIndex(Double(item.offset))\n            }\n        }\n        .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)\n        .ignoresSafeArea()\n    }\n}\n\nstruct BackgroundWithoutIndex: Identifiable {\n    let id = UUID()\n    let color: Color = {\n        [Color.orange, .green, .yellow, .blue, .cyan, .indigo, .gray, .pink].randomElement() ?? .red.opacity(Double.random(in: 0.8...0.95))\n    }()\n\n    let offset: CGSize = .init(width: CGFloat.random(in: -200...200), height: CGFloat.random(in: -200...200))\n}<\/pre>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/123.57.164.21\/wp-content\/uploads\/2022\/04\/unStablezIndex2022-04-09-17.47.49.2022-04-09-17_49_14.gif\" alt=\"\" class=\"wp-image-5614\" width=\"349\" height=\"311\"\/><\/figure><\/div>\n\n\n\n<p>\u5220\u9664\u7b2c\u56db\u4e2a\u8272\u5757\uff08\u7d2b\u8272\uff09\u65f6\uff0c\u663e\u793a\u5f02\u5e38\u3002<\/p>\n\n\n\n<p>\u901a\u8fc7\u4e3a\u89c6\u56fe\u6307\u5b9a\u7a33\u5b9a\u7684 zIndex \u503c\uff0c\u53ef\u4ee5\u907f\u514d\u4e0a\u8ff0\u95ee\u9898\u3002\u4e0b\u9762\u7684\u4ee3\u7801\uff0c\u4e3a\u6bcf\u4e2a\u89c6\u56fe\u6dfb\u52a0\u4e86\u7a33\u5b9a\u7684 zIndex \u503c\uff0c\u8be5\u503c\u5e76\u4e0d\u4f1a\u56e0\u4e3a\u6709\u89c6\u56fe\u88ab\u5220\u9664\u5c31\u53d1\u751f\u53d8\u5316\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">struct IndexDemo: View {\n    \/\/ \u5728\u521b\u5efa\u65f6\u6dfb\u52a0\u56fa\u5b9a\u7684 zIndex \u503c\n    @State var backgrounds = (0...10).map { i in BackgroundWithIndex(index: Double(i)) }\n    var body: some View {\n        ZStack {\n            ForEach(backgrounds) { background in\n                background.color\n                    .offset(background.offset)\n                    .frame(width: 200, height: 200)\n                    .onTapGesture {\n                        withAnimation {\n                            if let index = backgrounds.firstIndex(where: { $0.id == background.id }) {\n                                backgrounds.remove(at: index)\n                            }\n                        }\n                    }\n                    .zIndex(background.index)\n            }\n        }\n        .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)\n        .ignoresSafeArea()\n    }\n}\n\nstruct BackgroundWithIndex: Identifiable {\n    let id = UUID()\n    let index: Double \/\/ zIndex \u503c\n    let color: Color = {\n        [Color.orange, .green, .yellow, .blue, .cyan, .indigo, .gray, .pink].randomElement() ?? .red.opacity(Double.random(in: 0.8...0.95))\n    }()\n\n    let offset: CGSize = .init(width: CGFloat.random(in: -200...200), height: CGFloat.random(in: -200...200))\n}<\/pre>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/123.57.164.21\/wp-content\/uploads\/2022\/04\/stableZindex2022-04-09-18.07.18.2022-04-09-18_09_12.gif\" alt=\"\" class=\"wp-image-5615\" width=\"371\" height=\"331\"\/><\/figure><\/div>\n\n\n\n<p>\u5e76\u975e\u4e00\u5b9a\u8981\u5728\u6570\u636e\u7ed3\u6784\u4e2d\u4e3a zIndex \u9884\u7559\u72ec\u7acb\u7684\u5c5e\u6027\uff0c\u4e0b\u8282\u4e2d\u7684\u8303\u4f8b\u4ee3\u7801\u5219\u662f\u5229\u7528\u4e86\u6570\u636e\u4e2d\u7684\u65f6\u95f4\u6233\u5c5e\u6027\u4f5c\u4e3a zIndex \u503c\u7684\u53c2\u7167\u4f9d\u636e\u3002<\/p>\n\n\n\n<p><strong>zIndex \u5e76\u975e ZStack \u7684\u4e13\u5229<\/strong><\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>\u5c3d\u7ba1\u5927\u591a\u6570\u4eba\u90fd\u662f\u5728 ZStack \u4e2d\u4f7f\u7528 zIndex \uff0c\u4f46 zIndex \u4e5f\u540c\u6837\u53ef\u4ee5\u4f7f\u7528\u5728 VStack \u548c HStack \u4e2d\uff0c\u4e14\u901a\u8fc7\u548c spacing \u7684\u914d\u5408\uff0c\u53ef\u4ee5\u975e\u5e38\u65b9\u4fbf\u7684\u5b9e\u73b0\u67d0\u4e9b\u7279\u6b8a\u7684\u6548\u679c\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">struct ZIndexInVStack: View {\n    @State var cells: [Cell] = []\n    @State var spacing: CGFloat = -95\n    @State var toggle = true\n    var body: some View {\n        VStack {\n            Button(\"New Cell\") {\n                newCell()\n            }\n            .buttonStyle(.bordered)\n            Slider(value: $spacing, in: -150...20)\n                .padding()\n            Toggle(\"\u65b0\u89c6\u56fe\u663e\u793a\u5728\u6700\u4e0a\u9762\", isOn: $toggle)\n                .padding()\n                .onChange(of: toggle, perform: { _ in\n                    withAnimation {\n                        cells.removeAll()\n                        spacing = -95\n                    }\n                })\n            VStack(spacing: spacing) {\n                Spacer()\n                ForEach(cells) { cell in\n                    cell\n                        .onTapGesture { delCell(id: cell.id) }\n                        .zIndex(zIndex(cell.timeStamp))\n                }\n            }\n        }\n        .padding()\n    }\n\n    \/\/ \u5229\u7528\u65f6\u95f4\u6233\u8ba1\u7b97 zIndex \u503c\n    func zIndex(_ timeStamp: Date) -> Double {\n        if toggle {\n            return timeStamp.timeIntervalSince1970\n        } else {\n            return Date.distantFuture.timeIntervalSince1970 - timeStamp.timeIntervalSince1970\n        }\n    }\n\n    func newCell() {\n        let cell = Cell(\n            color: ([Color.orange, .green, .yellow, .blue, .cyan, .indigo, .gray, .pink].randomElement() ?? .red).opacity(Double.random(in: 0.9...0.95)),\n            text: String(Int.random(in: 0...1000)),\n            timeStamp: Date()\n        )\n        withAnimation {\n            cells.append(cell)\n        }\n    }\n\n    func delCell(id: UUID) {\n        guard let index = cells.firstIndex(where: { $0.id == id }) else { return }\n        withAnimation {\n            let _ = cells.remove(at: index)\n        }\n    }\n}\n\nstruct Cell: View, Identifiable {\n    let id = UUID()\n    let color: Color\n    let text: String\n    let timeStamp: Date\n    var body: some View {\n        RoundedRectangle(cornerRadius: 15)\n            .fill(color)\n            .frame(width: 300, height: 100)\n            .overlay(Text(text))\n            .compositingGroup()\n            .shadow(radius: 3)\n            .transition(.move(edge: .bottom).combined(with: .opacity))\n    }\n}<\/pre>\n\n\n\n<p>\u5728\u4e0a\u9762\u7684\u4ee3\u7801\u4e2d\uff0c\u6211\u4eec\u65e0\u9700\u66f4\u6539\u6570\u636e\u6e90\uff0c\u53ea\u9700\u8c03\u6574\u6bcf\u4e2a\u89c6\u56fe\u7684 zIndex \u503c\uff0c\u4fbf\u53ef\u4ee5\u5b9e\u73b0\u5bf9\u65b0\u589e\u89c6\u56fe\u662f\u51fa\u73b0\u5728\u6700\u4e0a\u9762\u8fd8\u662f\u6700\u4e0b\u9762\u7684\u63a7\u5236\u3002<\/p>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/123.57.164.21\/wp-content\/uploads\/2022\/04\/zIndexInVStack2022-04-09-19.18.42.2022-04-09-19_20_20.gif\" alt=\"\" class=\"wp-image-5616\" width=\"360\" height=\"356\"\/><\/figure><\/div>\n\n\n\n<p><strong>\u603b\u7ed3<\/strong><\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>zIndex \u4f7f\u7528\u7b80\u5355\uff0c\u6548\u679c\u660e\u663e\uff0c\u4e3a\u6211\u4eec\u63d0\u4f9b\u4e86\u4ece\u53e6\u4e00\u4e2a\u7ef4\u5ea6\u6765\u8c03\u5ea6\u3001\u7ec4\u7ec7\u89c6\u56fe\u7684\u80fd\u529b\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u8f6c\u8f7d\uff1ahttps:\/\/www.fatbobman.com\/posts\/zIndex\/ \u672c\u6587\u5c06\u5bf9 SwiftUI [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"_links":{"self":[{"href":"https:\/\/92it.top\/index.php?rest_route=\/wp\/v2\/posts\/5608"}],"collection":[{"href":"https:\/\/92it.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/92it.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/92it.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/92it.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5608"}],"version-history":[{"count":1,"href":"https:\/\/92it.top\/index.php?rest_route=\/wp\/v2\/posts\/5608\/revisions"}],"predecessor-version":[{"id":5617,"href":"https:\/\/92it.top\/index.php?rest_route=\/wp\/v2\/posts\/5608\/revisions\/5617"}],"wp:attachment":[{"href":"https:\/\/92it.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5608"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/92it.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=5608"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/92it.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=5608"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}