xcode 如何使2个vstack正确对齐？

我一直在尝试做一个好的设计为一个应用程序，然而我已经运行到一个问题.设计由2 vstack在1 hstack和问题发生当一个文本视图在一个vstack wrap.这使得文本视图是在vstack之下是unaligned.有什么方法使他们总是aligned？这里是相关的代码.
这是一个单行的文件，我想问题出在哪里

import SwiftUI

struct VerticalRowView: View {
    var whichOfTheFour: Int
    var movie: Movie
    @Binding var detailScreenShown: Bool
    
    var body: some View {
        HStack(alignment: .firstTextBaseline) {
            VStack(alignment: .leading, spacing: 25) {
                if whichOfTheFour == 1 {
                    Text("Title:")
                        .onTapGesture {
                            detailScreenShown = true
                        }
                        .foregroundColor(.cyan)
                    Text("Genre:")
                    Text("Released:")
                    Text("Origin:")
                    Text("Rated:")
                    Text("Runtime:")
                    Text("Plot:")
                }
                else if whichOfTheFour == 2 {
                    Text("Director:")
                    Text("Actor:")
                    Text("Writer:")
                    Text("Languages:")
                    Text("Box office:")
                }
                else if whichOfTheFour == 3 {
                    Text("Awards:")
                    Text("Metascore:")
                    Text("IMDB Rating:")
                    Text("IMDB Votes:")
                }
                else if whichOfTheFour == 4 {
                    Text("DVD:")
                    Text("Production:")
                }
            }
            VStack(alignment: .leading, spacing: 25) {
                if whichOfTheFour == 1 {
                    Text(movie.title ?? "Unknown")
                        .onTapGesture {
                            detailScreenShown = true
                        }
                        .foregroundColor(.cyan)
                    Text(movie.genre ?? "Unknown")
                    Text(movie.released ?? "Unknown")
                    Text(movie.country ?? "Unknown")
                    Text(movie.rated ?? "Unknown")
                    Text(movie.runtime ?? "Unknown")
                    Text(movie.plot ?? "Unknown")
                }
                else if whichOfTheFour == 2 {
                    Text(movie.director ?? "Unknown")
                    Text(movie.actor ?? "Unknown")
                    Text(movie.writer ?? "Unknown")
                    Text(movie.language ?? "Unknown")
                    Text(movie.boxOffice ?? "Unknown")
                }
                else if whichOfTheFour == 3 {
                    Text(movie.awards ?? "Unknown")
                    Text(movie.metascore ?? "Unknown")
                    Text(movie.imdbRating ?? "Unknown")
                    Text(movie.imdbVotes ?? "Unknown")
                }
                else if whichOfTheFour == 4 {
                    Text(movie.DVD ?? "Unknown")
                    Text(movie.production ?? "Unknown")
                }
            }
        }
    }
}

这是实现

struct MovieDetailView: View {
    @Binding var result: Movie
    @Binding var detailScreenShown: Bool
    
    var body: some View {
        VStack() {
            CustomDivider()
            
            AsyncImage(url: URL(string: result.poster ?? ""))
            
            CustomDivider()
            
            VerticalRowView(whichOfTheFour: 1, movie: result, detailScreenShown: $detailScreenShown)

            CustomDivider()
            
            VerticalRowView(whichOfTheFour: 2, movie: result, detailScreenShown: $detailScreenShown)
            
            CustomDivider()
            
            VerticalRowView(whichOfTheFour: 3, movie: result, detailScreenShown: $detailScreenShown)
            
            CustomDivider()
            
            VerticalRowView(whichOfTheFour: 4, movie: result, detailScreenShown: $detailScreenShown)
        }
    }
}

我已经试着解决这个问题超过6个小时了，我还是个新手，我相信这个解决方案是非常愚蠢的。

正如我所说的，我推荐使用Table--它非常适合您的用例，但是如果您必须在没有Table的情况下复制相同的行为，那么我会这样做：

首先，不要有2个VStack，而要有一个
在其中，将每一行表示为HStack，使用GeometryReader确保所有左右列对齐。

大概是这样的
首先是行视图，带有标题和可选值，如果没有值，我们将其解析为Unknown：

struct MovieRowView: View {
    
    let title: String
    let value: String?
    
    var body: some View {
        GeometryReader { metrics in
            HStack {
                Text("\(title):")
                    .frame(
                        width: metrics.size.width * 0.4,
                        alignment: .topTrailing
                    )
                Text(value ?? "Unknown")
                    .frame(
                        width: metrics.size.width * 0.6,
                        alignment: .topLeading
                    )
            }
        }
        .frame(maxWidth: .infinity)
    }
}

如您所见，GeometryReader用于确保每一行在左列和右列之间具有完全相同的拆分。此外，我们可以将左列与trailing边缘对齐，将右列与leading边缘对齐，这样它们彼此更接近。当然，您可以根据需要更改任何比例/对齐方式。
接下来，让我们将所有行放入VStack：

struct MovieView: View {
    
    // ...
    
    var body: some View {
        VStack {
            MovieRowView(title: "Title", value: movie.title)
                .onTapGesture {
                    detailScreenShown = true
                }
                .foregroundColor(.cyan)
            MovieRowView(title: "Genre", value: movie.genre)
            MovieRowView(title: "Released", value: movie.released)
            // etc
        }
    }
}

xcode 如何使2个vstack正确对齐？

1条答案

相关问题

热门标签

最新问答