问题[swiftui](coding)

我从以下代码开始：

import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack(spacing: 20) {
            ExtractedView(text: "Energy")
            ExtractedView(text: "Breath Control")
                
        }
        .padding(.horizontal, 20)
    }
}

#Preview {
    ContentView()
}

struct ExtractedView: View {
    let text: String
    
    var body: some View {
        Button {
            
        } label: {
            HStack(spacing: 8) {
                Image(systemName: "globe")
                    .imageScale(.large)
                    .foregroundStyle(.tint)
                Text(text)
                    .lineLimit(1)
                    .font(.system(size: 18, weight: .bold))
            }
            .padding(.horizontal, 8)
            .padding(.vertical, 8)
            .background {
                Color.yellow
            }
        }
    }
}

我想要达到的大致结果：

换句话说，我需要在每个元素内的文本后添加相等的间距，但我不知道该怎么做。尝试了不同的代码，但按钮大小变得相等，或者 iOS 为第二个标签添加了换行符，或者即使有足够的空间也试图缩短第二个标签。

我正在为 tvOS 开发一款 SwiftUI 应用。我有一个带有图片和一行文本的 NavigationLink。该项目按预期工作，当聚焦时它会变大。但是，如果我更改圆角半径（默认值太大），那么即使圆角半径变小并且图片和文本变大，图片也会被剪裁（图片会变大但其边界保持不变）。我该如何解决这个问题？

NavigationStack {
        ScrollView {
            VStack(alignment: .leading, spacing: 20) {
                ForEach(sections) { section in
                    VStack(alignment: .leading, spacing: 20) {
                        // Section title
                        Text(section.title)
                            .font(.title)
                            .padding(.horizontal)
                        
                        // Items
                        ScrollView(.horizontal) {
                            LazyHStack(spacing: 50) {
                                ForEach(section.items) { item in
                                    NavigationLink {
                                        VideoDetailView(mediaItem: item)
                                    } label: {
                                        AsyncImage(url: item.imageURL) { phase in
                                            switch phase {
                                            case .empty:
                                                // This shows while the image is loading
                                                ProgressView()
                                                    .aspectRatio(700/500, contentMode: .fit)
                                                    .containerRelativeFrame(.horizontal, count: 6, spacing: 50)
                                            case .success(let image):
                                                // This shows the successfully loaded image
                                                image
                                                    .resizable()
                                                    .aspectRatio(700/500, contentMode: .fit)
                                                    .containerRelativeFrame(.horizontal, count: 6, spacing: 50)
                                            case .failure(_):
                                                // This shows if the image fails to load
                                                Image(systemName: "photo")
                                                    .resizable()
                                                    .aspectRatio(700/500, contentMode: .fit)
                                                    .containerRelativeFrame(.horizontal, count: 6, spacing: 50)
                                            @unknown default:
                                                // Any other
                                                EmptyView()
                                            }
                                        } .cornerRadius(5) // WHen I add this, the image gets clipped
                                        Text(item.title)
                                        //Text(item.subtitle)
                                    }
                                    .buttonStyle(.borderless)
                                }
                            }
                        }
                        .scrollClipDisabled()
                    }
                }
            }
        }
    }

我正在首次使用 SwiftUI 创建 tvOS 应用。我在这方面还很陌生。

我有一排按钮，它们工作正常。每当我改变焦点时，焦点中的项目就会增大。

var body: some View {
    NavigationView {
                ScrollView(.horizontal) {
                    LazyHStack(spacing: 50) {
                        ForEach(sections[0].items) { item in
                            Button {} label: {
                                Image(systemName: "photo")
                                    .resizable()
                                    .frame(width: 300, height: 170)
                                Text(item.title)
                            }
                            .buttonStyle(.borderless)
                            
                        }
                    }
                }
                .scrollClipDisabled()
                .buttonStyle(.borderless)
            }

}

但是，如果我尝试添加如下导航链接：

NavigationLink(destination: VideoDetailView(mediaItem: item)) {
                                        Button...
                                    }

焦点动画丢失。

我做错了什么？如何保持按钮的焦点动画并让它带我进入新屏幕？

使用以下内容

@main
struct aspectratioApp: App {
  var body: some Scene {
    WindowGroup { ContentView().border(.blue, width: 2).padding() }
  }
}

并且ContentView没有aspectRatio应用修饰符（见下文），结果符合预期，包括Canvas填充可用空间（我认为这是默认行为），输出canvas size: (243.0, 78.0)到控制台：

接下来，让我们应用.aspectRatio(isSquare ? 1 : nil, contentMode: isSquare ? .fit : .fill)修饰符，我认为修饰符的意思是制作Canvas一个适合的正方形或任何填充可用空间的东西（参见下面带有aspectRatio的ContentView）。从一开始我就得到了一个正方形，Canvas如下所示：

控制台中会打印一个方形画布大小。切换后，isSquare画布会保持方形，尺寸会略小一些：

canvas size: (157.0, 157.0)
canvas size: (130.0, 130.0)

我这里漏掉了什么？ aspectRatio的文档将aspectRatio 参数记录如下：结果视图使用的宽高比。使用 nil 可在结果视图中保持当前的宽高比。我理解的意思是，如果不应用修饰符，则比例将是原来的。

这不是它的工作原理吗？修改器不是无状态的吗？也就是说，它是否记得画布曾经是正方形，并且现在一直保持这种状态，包括重新启动应用程序？

没有aspectRatio的ContentView

struct ContentView: View {
  @State private var isSquare = false
  var body: some View {
    VStack {
      Text("isSquare: \(isSquare)").padding()
      Canvas { _, size in print("canvas size: \(size)") }
        .border(.teal, width: 2)
        .padding()
      Toggle(isOn: $isSquare) { Text("Constrain to Square") }.padding()
    }
    .border(.yellow, width: 2)
    .padding()
  }
}

带有aspectRatio的ContentView

struct ContentView: View {
  @State private var isSquare = false
  var body: some View {
    VStack {
      Text("isSquare: \(isSquare)").padding()
      Canvas { _, size in print("canvas size: \(size)") }
        .aspectRatio(isSquare ? 1 : nil, contentMode: isSquare ? .fit : .fill)
        .border(.teal, width: 2)
        .padding()
      Toggle(isOn: $isSquare) { Text("Constrain to Square") }.padding()
    }
    .border(.yellow, width: 2)
    .padding()
  }
}

以下是尝试双粘性标题视图的完整代码示例：

struct ContentView: View {
    var body: some View {
        ScrollView(showsIndicators: false) {
            LazyVStack(spacing: 0, pinnedViews: .sectionHeaders) {
                Section {
                    SecondView()
                } header: {
                    HeaderView()
                }
            }
        }
    }
}

struct HeaderView: View {
    var body: some View {
        Rectangle()
            .fill(.green)
            .frame(height: 50)
    }
}

struct SecondView: View {
    var body: some View {
        LazyVStack(spacing: 0, pinnedViews: .sectionHeaders) {
            Section {
                VStack {
                    ForEach(0..<20) { index in
                        ItemView(index: index)
                    }
                }
            } header: {
                SecondHeaderView()
            }
        }
    }
}

struct SecondHeaderView: View {
    var body: some View {
        Rectangle()
            .fill(.red)
            .frame(height: 60)
    }
}

struct ItemView: View {
    let index: Int
    var body: some View {
        VStack {
            Text("Item \(index)")
                .padding()
        }
        .frame(height: 80)
        .background(.gray)
    }
}

#Preview {
    ContentView()
}

请注意，最初，红色的SecondHeaderView正确位置位于绿色的下方HeaderView。但是，滚动时，红色标题会滚动到绿色标题下方，直到它停留在与绿色标题相同的 y 位置。

我需要红色标题固定在绿色标题下方。请注意，SecondView可能并不总是嵌入在中ContentView。它可以独立存在，但仍然需要自己的单个粘性标题才能工作，因此我认为两个视图都需要LazyVStack。

我弄乱了各种 GeometryReader 视图偏移，试图让红色标题正确定位，但我无法做到正确。

我在具有 Material 背景的“半圆”视图中有一个 Toggle 视图。为了实现“半圆”，我使用了.clipShapewith.rect和选定的半径。
似乎使用.clipShapewith .rect（带有特定radius参数）会导致Toggle丢失背景颜色。

代码：

ZStack {
    Color.blue
    Toggle("On", isOn: .constant(false))
    .padding()
        .frame(width: 150, height: 100)
        .background(.thinMaterial)
        .clipShape(
            .rect(
                topLeadingRadius: 20,
                bottomLeadingRadius: 0,
                bottomTrailingRadius: 0,
                topTrailingRadius: 20
            )
        )
}

如果我使用.clipShape，RoundedRectangle(cornerRadius:)我会再次获得背景，但我需要底部不圆润。

编辑

后来我还需要扩展视图，使底部可以延伸，只有材质应该位于安全区域下方。

简而言之，我需要将“材质”背景嵌入另一个背景修饰符中，然后将“材质”应用于“清晰颜色”视图。
以下是代码：

ZStack {
    Color.blue
        .ignoresSafeArea()
    VStack {
        Spacer()
        Toggle("On", isOn: .constant(false))
            .padding()
            .frame(height: 100)
            .background( // 'Regular background container
                Color.clear // Apply the Material background with 'ignoresSafeArea'
                    .background(.thinMaterial,
                                in: .rect(
                        topLeadingRadius: 20,
                        bottomLeadingRadius: 0,
                        bottomTrailingRadius: 0,
                        topTrailingRadius: 20
                    ))
                    .ignoresSafeArea()
            )
    }
}

我正在尝试重新创建 Apple 的消息应用程序，我注意到聊天选择上的 V 形位于顶部，而不是像 navigationLink 默认提供的那样位于中心。

以下是 Apple Messages 的图片：

这是我的应用程序的图片：

import SwiftUI

struct ContentView: View {
    
    private var imageSize: CGFloat = 50
    var body: some View {
        NavigationStack {
            List(NavigationScreens.allCases, id: \.self) { screen in
                NavigationLink(value: screen) {
                    Label(title: {
                        MessageChat(name: "SwiftUI")
                            .padding(.leading, 15)
                            //.border(.red)
                    }, icon: {
                        HStack {
                            Image(systemName: "circle.fill")
                                .resizable()
                                .frame(width: 10, height: 10)
                            Image("image_test")
                                .resizable()
                                .frame(width: imageSize, height: imageSize)
                                .clipShape(Circle())
                        }
                        .padding(10)
                    })
                }
            }
            .navigationTitle("Messages")
            .listStyle(.plain)
            .scrollContentBackground(.hidden)
            .navigationDestination(for: NavigationScreens.self) { screen in
                switch screen {
                case .Chat, .Profile, .Settings:
                    ChatSelection()
                }
            }
        }
    }
}

我不完全确定这是否是正确的做法或者是否需要自定义的 NavigationLink。

留言聊天代码：

struct MessageChat: View {
@State var contact: Contact

var body: some View {
    HStack {
        VStack(alignment: .leading, spacing: 4) {
            HStack {
                // MARK: Name
                Text(contact.name)
                    .font(.headline)
                    .lineLimit(1)
                    .foregroundStyle(Color.primary)
                
                Spacer()
                
                // MARK: Message Date
                Text("12/12/12")
                    .font(.subheadline)
                    .foregroundStyle(Color.gray)
            }
            .padding(.trailing, 20)
            
            // MARK: Message Description
            Text("Some random text long enough to have the multiple lines effect, just in case its not long enough")
                .lineLimit(2)
                .font(.subheadline)
                .foregroundStyle(Color.secondary)
                .frame(maxHeight: 40, alignment: .topLeading)
        }
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity)
}

}

我有 HStack，其中包含两个视图：图像和文本。我想将图像对齐到顶部，但将文本居中对齐到 VerticalAlignment。但是，为文本指定对齐方式 .center 不起作用，它仍然位于顶部。我遗漏了什么吗？

struct SwiftUIView: View {
    var body: some View {
        HStack(alignment: .top) {
            Image(systemName: "star.fill")
                .resizable()
                .frame(width: 100, height: 100)
                .background(.green)

            HStack(alignment: .center) {
                Text("Text that has dynamic height and should be aligned center")
                    .background(.pink)
            }
        }
        .background(.gray)
    }
}

预览截图

我有一个包含音频的字符串和 URL，想通过 Sharelink 分享两者。

我已经写了一个可转让的：

struct TransferableTextAndAudio: Codable, Transferable {
  let text: String
  let audio: URL
  
  static var transferRepresentation: some TransferRepresentation {
    ProxyRepresentation(exporting: \.text)
    FileRepresentation(exportedContentType: .audio) { item in
      return SentTransferredFile(item.audio, allowAccessingOriginalFile: true)
    }
  }
}

与我分享：

ShareLink(item: TransferableTextAndAudio(text: "String to share", audio: audioUrl),
          preview: SharePreview("Preview")) {
  Label("Share text and audio", systemImage: "square.and.arrow.up")
}

但是，只有文本被共享。当我注释掉 ProxyRepresentation 行时，音频被共享。为什么会这样？我是不是对 Transferable 的工作原理有些不了解？

正在开发一款简单的纸牌游戏。尝试让逻辑发挥作用，从牌堆中“抽”一张牌并将其添加到玩家手中。

以下是相关的代码片段。

import Foundation

struct Player: Identifiable {
    var id: UUID = UUID()
    var name: String
    var cards: [Card] = []
    var plays: [Plays] = []
    let human: Bool
    
    init(name: String, human: Bool) {
        self.name = name
        self.human = human
    }
    
    mutating func addCard(card: Card)
    {
        print("Adding card \(card.id) to the players cards")
        cards.append(card)
        print("Player now has \(cards.count) cards")
    }
    
}

class Game: ObservableObject {
    @Published var deck:Deck = Deck()
    @Published var discard: [Card] = []
    @Published var players: [Player]
    @Published var round: Int = 1
    
    init(){
        players = []
        players.append(Player(name: "Player 1", human: false))
        players.append(Player(name: "Player 2", human: false))
        players.append(Player(name: "Player 3", human: false))
        players.append(Player(name: "Player 4", human: true))
        //self.deal()
    }
    
    func deal() {
        if players[0].cards.isEmpty {
            for _ in 1...7 {
                players[0].addCard(card: deck.deal())
                players[1].addCard(card: deck.deal())
                players[2].addCard(card: deck.deal())
                players[3].addCard(card: deck.deal())
            }
            print("All the cards are dealt and player 4 now has \(players[3].cards.count) cards")
        } else {
            print("Players already have 7 cards")
        }
    }
    
    
    func discard(card: Card, player: Player) {
        var selectedPlayer = players.first(where: { $0.id == player.id })
        selectedPlayer?.cards.removeAll(where: { $0.id == card.id})
        discard.append(card)
    }
    
    func draw(player: Player){
        var selectedPlayer = players.first(where: { $0.id == player.id })
        let drawnCard = deck.deal()
        print("They drew the \(drawnCard.rank.name) of \(drawnCard.suit.name) with ID \(drawnCard.id)")
        selectedPlayer?.addCard(card: drawnCard)
        
    }
    
}

我不明白的是，当我player.addCard(card: card)从 Game 类中的函数内部调用时deal()，它运行正常，并按预期添加了卡片。但从函数内部draw（靠近游戏类的底部）调用相同的函数实际上并没有将卡片添加到玩家手中。

我可以从函数内部的打印语句中看到addCard它被调用，并且它传递的卡的 ID 是正确的（并且对于启动它的每个 tapGesture 都是不同的）。

知道为什么array.append()实际上没有添加到数组中吗？