问题[swiftui](coding)

我对 SwiftUI 还不熟悉，想了解如何让一个视图在设备屏幕上水平居中，同时将另一个视图锚定到其后边缘（而不使原始视图不居中）。

我有一个可以运行的原型，但它有点丑，并且依赖于“onGeometryChange”来跟踪居中视图的大小，以便将相邻视图偏移正确的量。它之所以有效，是因为使用偏移量不会改变包含它的 ZStack 的几何形状，因为它认为相邻视图与第一个视图占据相同的居中位置。

虽然我的方法似乎有效，但它似乎有点问题，因为它依赖于多个布局周期（一个用于布局 ZStack 和居中视图，然后读取几何变化，然后更新相邻视图的位置）。此外，ZStack 容器的尺寸不包含相邻视图的偏移量。

struct ContentView: View {
    
    @State private var centeredLabelWidth: CGFloat = .zero
    @State private var offsetLabelWidth: CGFloat = .zero
    
    var body: some View {
        ZStack {
            Text("Centered Label")
            .border(Color.blue)
            .padding(1)
            .onGeometryChange(for: CGFloat.self) { $0.size.width } action: {
                centeredLabelWidth = $0
            }
            
            Text("Adjacent Label")
            .border(Color.red)
            .padding(1)
            .onGeometryChange(for: CGFloat.self) { $0.size.width } action: {
                offsetLabelWidth = $0
            }
            .offset(x: centeredLabelWidth / 2 + offsetLabelWidth / 2)
        }
    }
}

非常感谢社区的任何见解！

我正在创建一个应用，其主 UI 是 WKWebView，SwiftUI 仅用于应用的零散部分。我在使用 SwiftUI 系统 UI 时遇到了一些问题TabView。运行此示例应用时，出现了一些我无法解释的行为。

enum Page: String, Hashable, CaseIterable, Identifiable {
    case settings = "gear"
    case radio = "radio"
    case connect = "dot.radiowaves.right"
    
    var id: String { rawValue }
}

struct RandomColorHostedWebView: UIViewRepresentable {
    let webView: WKWebView
    
    init() {
        // Clear cache to be extra sure https://stackoverflow.com/a/34376943/3833632
        WKWebsiteDataStore.default().removeData(ofTypes: [WKWebsiteDataTypeDiskCache, WKWebsiteDataTypeMemoryCache], modifiedSince: Date(timeIntervalSince1970: 0), completionHandler:{ })
        let webConfiguration = WKWebViewConfiguration()
        self.webView = WKWebView(frame: .zero, configuration: webConfiguration)
        let urlRequest = URLRequest(url: URL(string: "https://randomcolour.com")!)
        self.webView.load(urlRequest)
    }
    
    func makeUIView(context: Context) -> UIView {
        return webView
    }

    func updateUIView(_ uiView: UIView, context: Context) {
    }
}



struct ContentView: View {
    let pages = Page.allCases
    
    let randomColor: RandomColorHostedWebView
    init() {
        randomColor = RandomColorHostedWebView()
    }
    
    var body: some View {
        TabView {
            ForEach(pages) { page in
                randomColor
                    .tag(page)
                    .tabItem {
                        Label(page.rawValue, systemImage: page.rawValue)
                    }
            }
        }
    }
}

运行此程序，你会发现每次点击标签页都会触发刷新动画，但不会加载新的颜色。此外，当你返回之前访问过的标签页时，页面会显示空白。

我无法解释这种现象。 （我很想知道为什么会发生这种情况）

话虽如此，我假设原因是 SwiftUI 不知道每个 tabItem 父视图都是相同的视图，因为它们具有不同的结构标识。

因此，我只能寻找一种解决方法，要么使 TabView 的背景清晰，以便我可以使用ZStack，要么将TabView高度限制为仅限选项卡内容，以便我可以使用VStack，或者其他方法。

现有的解决方案尝试移除 TabView 的背景，但似乎无效。我同意一位评论者的观点，即该解决方案在更高版本的操作系统中似乎已失效。

   var body: some View {
        ZStack {
            randomColor
            TabView {
                ForEach(pages) { page in
                    Color.clear
                        // https://stackoverflow.com/questions/63178381/make-tabview-background-transparent
                        .background(BackgroundHelper())
                        .tag(page)
                        .tabItem {
                            Label(page.rawValue, systemImage: page.rawValue)
                        }
                }
            }
        }
    }

当用户在 macOS 上单击 SwiftUI 时Table，我想知道被点击的是哪对（列，行），或者说是哪一点。我给 添加了onTapGesture()处理程序Table，但它从未被调用。我该如何确定被点击的是哪一列，哪一行？

我的目标是在视图模型中实现单元格选择。我需要能够确定点击的（列，行）对，以便在视图模型中选择正确的单元格。

下面是 Apple 示例代码，我在其中添加了无效onTapGesture()处理程序。

struct Person: Identifiable {
    let givenName: String
    let familyName: String
    let emailAddress: String
    let id = UUID()
}
struct PeopleTable: View {
    @State private var people = [
        Person(givenName: "Juan", familyName: "Chavez", emailAddress: "[email protected]"),
        Person(givenName: "Mei", familyName: "Chen", emailAddress: "[email protected]"),
        Person(givenName: "Tom", familyName: "Clark", emailAddress: "[email protected]"),
        Person(givenName: "Gita", familyName: "Kumar", emailAddress: "[email protected]")
    ]
    var body: some View {
        Table(people) {
            TableColumn("Given Name", value: \.givenName)
            TableColumn("Family Name", value: \.familyName)
            TableColumn("E-Mail Address", value: \.emailAddress)
        }
        .onTapGesture(perform: { p in
            print("clicked point \(p)")
        })
    }
}
#Preview {
    PeopleTable()
}

我有一个简单的 Swift Chart，我试图将 RuleMark 放在 BarMark 后面。

当 RuleMark 位于 BarMark 之前时，条形会出现问题，并会随着选定内容的移动而移动。以下是可重现的示例。

import SwiftUI
import Charts

struct datStruct: Identifiable {
    let id = UUID()
    let label: String
    let value: Int
}

struct ContentView: View {
    
    let dat = [
        datStruct(label: "A", value: 1),
        datStruct(label: "B", value: 2),
        datStruct(label: "C", value: 3)
    ]
    @State var rawSelection: String?
    
    var selection: datStruct? {
        guard let rawSelection else {return nil}
        return dat.first(where: { $0.label == rawSelection })
    }
    
    var body: some View {
    
        Chart(){
            
            if let selection {
                RuleMark(x: .value("label", selection.label))
                    .foregroundStyle(.red)
            }
            
            ForEach(dat) {dat in
                BarMark(x: .value("label", dat.label), y: .value("count", dat.value))
            }
        }
        .chartXSelection(value: $rawSelection)
    }
}

#Preview {
    ContentView()
}

当 RuleMark 移动到 BarMark 之后，并应用负的 ZIndex 时，规则会按预期显示在栏的后面。但是，当我为选定内容添加动画时，规则会短暂地显示在栏的上方，然后动画移动到栏的后面。

如何才能始终显示 BarMark 后面的 RuleMark 并应用动画？

import SwiftUI
import Charts

struct datStruct: Identifiable {
    let id = UUID()
    let label: String
    let value: Int
}

struct ContentView: View {
    
    let dat = [
        datStruct(label: "A", value: 1),
        datStruct(label: "B", value: 2),
        datStruct(label: "C", value: 3)
    ]
    @State var rawSelection: String?
    
    var selection: datStruct? {
        guard let rawSelection else {return nil}
        return dat.first(where: { $0.label == rawSelection })
    }
    
    var body: some View {
    
        Chart(){
        
            ForEach(dat) {dat in
                BarMark(x: .value("label", dat.label), y: .value("count", dat.value))
            }
            
            if let selection {
                RuleMark(x: .value("label", selection.label))
                    .foregroundStyle(.red)
                    .zIndex(-1)
            }
        }
        .chartXSelection(value: $rawSelection.animation())
    }
}

#Preview {
    ContentView()
}

我想绘制一个带有模糊面板的图像，该面板带有文本。问题是面板框架依赖于文本框架。同时，mask修饰符的设置与文本和面板是分开的。

我的代码：

struct SomeView: View {
    @State var frame: CGRect = .zero
    
    var body: some View {
        ZStack {
            Image(.defaultCard)
            Image(.defaultCard)
                .blur(radius: 30)
                .mask {
                    Rectangle()
                        .frame(width: frame.width, height: frame.height)
                        .position(x: frame.midX, y: frame.midY)
                }
            ZStack(alignment: .bottomLeading) {
                Color.clear
                HStack {
                    Text("...")
                    Text("...")
                }
                .padding()
                .background {
                    GeometryReader { geometry in
                        Color.clear
                            .onAppear {
                                frame = geometry.frame(in: .global)
                            }
                            .onChange(of: geometry.size) { _ in
                                frame = geometry.frame(in: .global)
                            }
                    }
                }
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
        }
    }
}

所有内容都已绘制，但遮罩位置不正确。以下代码返回了错误的帧：

frame = geometry.frame(in: .global)

如何解决这个问题？我知道我可以使用 UIKit 的模糊功能，但 SwiftUI 模糊功能更符合我的要求。

我在将图像保存到 SwiftData 时遇到问题，并且我不完全确定最好的方法。

我有一个用于单个条目的 EntryModel 数据模型，如下所示：

@Model
class EntryModel {
   var type: EntryType
   var who: UserModel
   var what: String
   var value: Double? = nil
   var note: String
   @Attribute(.externalStorage) var images: [Data]?
   var when: Date = Date.now

  init(type: EntryType, who: UserModel, what: String, note: String, images: [Data] = [], when: Date) {
    self.type = type
    self.who = who
    self.what = what
    self.note = note
    self.images = images
    self.when = when
}

然后我创建了一个 NewEntryView，它允许用户创建一个新条目，并附加一些可选的图片来提供额外的信息。代码如下：

struct New EntryView {
   @State private var entryItems = [PhotosPickerItem]()
   @State private var entryImages = [Image]()

// Other code pertaining to different parts of my form

HStack {
    PhotosPicker(selection: $entryItems, maxSelectionCount: 5, matching: .images) {
        Image(systemName: "plus")
          .font(.title)
          .foregroundStyle(.adaptiveBlack)
          .frame(width: 80, height: 70)
          .background(
              RoundedRectangle(cornerRadius: 10)
                 .stroke(lineWidth: 2)
                 .fill(selectedEntryType.color)
                 .frame(width: 70, height: 60)
           )
       }
                        
       ScrollView(.horizontal) {
          HStack(spacing: 10) {
             ForEach(0..<entryImages.count, id: \.self) { i in
                entryImages[i]
                    .resizable()
                    .scaledToFill()
                    .clipShape(RoundedRectangle(cornerRadius: 10))
                    .frame(height: 60)
             }
          }
          .onChange(of: entryItems) {
             Task {
                entryImages.removeAll()
                                    
                for item in entryItems {
                   if let image = try? await item.loadTransferable(type: Image.self) {
                   entryImages.append(image)
                }
            }
        }
   }

// More code

Button {
   let entry = EntryModel(type: selectedEntryType, who: selectedUser!, what: titleTextField, note: noteTextField, when: selectedDate)
   modelContext.insert(entry)
} label: {
// Custom label
}

现在，通过当前的实现，我确实可以从我的相册中选择图像并将它们填充到 HStack 中。

当单击底部的按钮时，用户填写的其他信息也会保存到 SwiftData 中，并可在整个应用程序中使用。

我遇到的问题是将这些图像保存到 SwiftData 中以供整个应用程序使用。

我是否应该像其他值一样将它们插入到模型上下文中？如果是，该怎么做？

如果不是，那么我该如何更改我当前的代码？

任何帮助都将不胜感激。

顺便说一句，我不确定它是否相关，但自从我实现了 PhotosPicker 后，我在 Xcode 中收到以下警告：

PHPickerViewControllerDelegate_Private 不响应 _pickerDidPerformConfirmationAction：

在我的特定情况下，我在 swiftui 中遇到了一个问题，它不允许在同一个 上添加超过 1 个警报View。这个问题是已知的，并且已经得到解决，例如通过添加额外的空视图：

https://stackoverflow.com/a/67395026/805701

但还有一个问题——SwiftUI 对这种情况完全没有反应（警报直接跳过）。所以你需要手动搜索所有代码来查找这些可能出现在不同文件中的重复代码。

是否有可能以某种方式指示这些重复出现的位置，例如通过在默认修饰符上添加一个包装器，当该修饰符已经添加到视图中时.alert(...)抛出该包装器？fatalError

当我单击侧面菜单时，工具栏将被隐藏，但所有背景将向上移动。

var body: some View {
        NavigationStack {
            ZStack {
                VStack {
                    SlideView()
                    ButtonView()
                }
                SideMenuView(isShowing: $showMenu, selectedTab: $selectedTab)
            }
            .toolbar(showMenu ? .hidden : .visible, for: .navigationBar)
            .navigationTitle("HKSTBC")
            .navigationBarTitleDisplayMode(.inline)
            .toolbar {
                ToolbarItem(placement: .topBarLeading) {
                    Button(action: {
                        showMenu.toggle()
                    }, label: {
                        Image(systemName: "line.3.horizontal")
                    })
                }
            }
        }
    }

我刚才设置了.navigationBarTitleDisplayMode(.inline)，但是不行。请问如何才能让背景停止向上移动呢？

这可能是一个简单的问题，但我一直在努力。

假设我在 SwiftUI 中有以下视图布局

我希望日期字符串10.5.2020在父 VStack 中右对齐。

但重要的是，这样做不会破坏 VStack 的固有大小。

我之所以这么说，是因为最明显的两个解决方案都是这样做的。

1. 用 围起来，并在左边HStack放一个。Spacer
2. 使用框架maxWidth: .infinity和alignment: .trailing

我对对齐指南进行了更深入的研究，但无法解决这个问题。

到目前为止我的最佳结果是GeometryReader，将文本标签的宽度设置为几乎与周围 VStack 的宽度相同。

但不幸的是，我的目标结构要复杂得多，这种方法会导致该结构出现问题。而且GeometryReader似乎不适合进行对齐。

struct ContentView: View {
    var body: some View {
        ScrollView {
            VStack(alignment: .leading) {
                
                HStack {
                    VStack(alignment: .leading) {
                        Text("Alignment Test")
                        Text("This is a longer text left aligned")
                         
                        
                        Text("10.5.2020")
                    }
                    .padding(16)
                    .background(Color.blue)
                    
                    Spacer(minLength: 50)
                }
                
                
                HStack {
                    VStack(alignment: .leading) {
                        Text("left")
                        Text("Date should rigzht align to here <-")
                        Text("10.5.2020")
                    }
                    .padding(16)
                    .background(Color.blue)
                    
                    Spacer(minLength: 50)
                }
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .border(.red)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.gray.opacity(0.5))
    }
}

预览：

我正在尝试在 SwiftUI 中实现带有文本标记的离散洗涤器，如下所示。我的问题是我无法确定先验HStack内部的高度ScrollView，因此我尝试使用onGeometryChange修饰符，但它不起作用（即覆盖文本被截断）。一种解决方法是使用并根据几何代理GeometryReader分配高度，但我想知道是否有另一种不使用的方法。HStackGeometryReader

struct ScrollScrubber: View {
    var config:ScrubberConfig
    
    @State var viewSize:CGSize?
    
    var body: some View {
        let horizontalPadding = (viewSize?.width ?? 0)/2
        
        ScrollView(.horizontal) {
            HStack(spacing:config.spacing) {
                let totalSteps = config.steps * config.count
                
                ForEach(0...totalSteps, id: \.self) { index in
                    let remainder = index % config.steps
                    Divider()
                        .background( remainder == 0 ? Color.primary : Color.gray)
                        .frame(width: 0, height: remainder == 0 ? 20 : 10, alignment: .center)
                        .frame(maxHeight: 20, alignment: .bottom)
                        .overlay(alignment: .bottom) {
                            if remainder == 0 {
                                Text("\(index / config.steps)")
                                    .font(.caption)
                                    .fontWeight(.semibold)
                                    .textScale(.secondary)
                                    .fixedSize()
                                    .offset(y:20)
                            }
                        }
                    
                }
            }
            .frame(height:viewSize?.height)
            
        }
        .scrollIndicators(.hidden)
        .safeAreaPadding(.horizontal, horizontalPadding)
        .onGeometryChange(for: CGSize.self) { proxy in
            proxy.size
        } action: { newValue in
            viewSize = newValue
            print("View Size \(newValue)")
        }


    }
}

struct ScrubberConfig:Equatable {
    var count:Int
    var steps:Int
    var spacing:CGFloat
}

#Preview {
    ScrollScrubber(config: .init(count: 100, steps: 5, spacing: 5.0))
        .frame(height:60)
}