如何在SwiftUI中的HStack內將這些影像居中對齊

所以我有一個 HStack 嵌套在 ScrollView 內的 VStack 內，我試圖將中間的照片放在一條直線上。正如您在照片中看到的那樣，圖片根據左側文本標簽的大小進行偏移。（單詞越長，影像向右偏移的越多）。我想讓影像在 HStack 的中間居中，使它們彼此完全對齊。

HStack 的格式應該是（標簽 - 影像 - 標簽），我希望兩個標簽位于影像的最左/最右側，觸摸螢屏的兩側。

我目前正在使用兩個 Spacer() 來完成這項作業，但它會創建一個偏移量。

這是它現在的樣子（未對齊）

這是包含滾動視圖和 vstack 的視圖代碼：

    ScrollView(.vertical){
                VStack(alignment: .center, spacing: 5){
                    ForEach(weatherViewModel.dailyDataArray){
                        DailyCell(dailyData: $0)
                            .background(Color.clear)
                            .padding(10)
                    }
                }
            }

這是我的 CellView 結構 DailyCell 的代碼： View {

let dailyData: DailyData

var body: some View {
    HStack(alignment: .center){
        Text(dailyData.time)
            .fontWeight(.semibold)
            .foregroundColor(Color(UIColor.white))
            .font(.system(size: 16))
        Spacer()
        Image(dailyData.icon)
            .resizable()
            .scaledToFit()
            .frame(width: 25, height: 25, alignment: .center)
            .multilineTextAlignment(.leading)
        Spacer()
        HStack(spacing: 10){
            Text(dailyData.lowtemp   "°")
                .fontWeight(.regular)
                .foregroundColor(Color(UIColor.white))
                .font(.system(size: 16))
            Text(dailyData.hightemp   "°")
                .fontWeight(.regular)
                .foregroundColor(Color(UIColor.white))
                .font(.system(size: 16))
        }
    }
}

}

uj5u.com熱心網友回復：

將所有內容包裝在幾何閱讀器中并為您的文本視圖分配相對寬度應該可以解決問題：

var body: some View {
    //decide which image to show
    GeometryReader{ readerProxy in <- add this
        HStack(alignment: .center){
            Text(dailyData.time)
                .fontWeight(.semibold)
                .foregroundColor(Color(UIColor.white))
                .font(.system(size: 16))
                .frame(width: readerProxy.size.width / 3, alignment: .left) <- add this
            Spacer()
            Image(dailyData.icon)
                .resizable()
                .scaledToFit()
                .frame(width: 25, height: 25, alignment: .center)
                .multilineTextAlignment(.leading)
            Spacer()
            HStack(spacing: 10){
                Text(dailyData.lowtemp   "°")
                    .fontWeight(.regular)
                    .foregroundColor(Color(UIColor.white))
                    .font(.system(size: 16))
                Text(dailyData.hightemp   "°")
                    .fontWeight(.regular)
                    .foregroundColor(Color(UIColor.white))
                    .font(.system(size: 16))
            }
            .frame(width: readerProxy.size.width / 3, alignment: .right) <- add this
        }
    }
}

uj5u.com熱心網友回復：

一種可能性是使用 LazyVGrid ：

struct HStackCenterCell: View {
    var weatherViewModel = WeatherViewModel();
    let columns: [GridItem] = Array(repeating: .init(.flexible()), count: 3) // 3 columns LazyVGrid
    var body: some View {
        ScrollView(.vertical){
            // Lazy grid to have columns
            LazyVGrid(columns: columns) {
                ForEach(weatherViewModel.dailyDataArray){
                    DailyCell(dailyData: $0)
                        .background(Color.clear)
                        .padding(10)
                }
                
            }
        }
        
    }
}

struct DailyCell: View {
    let dailyData: DailyData

    var body: some View {
        // need to suppress global HStack and Spacers
        HStack { // HStack to align day on left
            Text(dailyData.time)
                .fontWeight(.semibold)
                .font(.system(size: 16)).multilineTextAlignment(.leading)
            Spacer()
        }
        // For my tests i used SF symbols
        Image(systemName: dailyData.icon)
            .resizable()
            .scaledToFit()
            .frame(width: 25, height: 25, alignment: .center)
            .multilineTextAlignment(.leading)
        HStack(spacing: 10)
        {
            Text(dailyData.lowtemp   "°")
                .fontWeight(.regular)
                .font(.system(size: 16))
            Text(dailyData.hightemp   "°")
                .fontWeight(.regular)
                .font(.system(size: 16))
        }
    }

注意：我洗掉了白色前景，因為我的背景是白色的

標籤：迅速 代码 迅捷 堆栈 堆栈

上一篇：Swift：如何處理來自PHPicker的視頻和照片結果？

下一篇：如何將某些內容附加到串列中？