swiftui - 如何在 swiftUI 中制作“平滑表”

Question

我有 android 屏幕，我想将它复制到 swiftui ios 屏幕。

安卓：

IOS：

但我试图在swiftui中做到这一点。您如何看待文本没有基线和重力参数，我如何在 android 中制作它。请帮我制作等效的简单屏幕。

我的 swiftui 代码：

struct WeatherView: View {
    var weather: WeatherMainModel

    var body: some View {
        VStack {
            VStack {
                Text("Description: \(weather.weather[0].component3())")
                Text("Visibility: \(weather.visibility) meters")
                Text("Main: \(weather.weather[0].main)")
            }
            VStack {
                Text("Temperature Data")
                HStack {
                    VStack {
                        HStack {
                            Text("Temperature: \(temperatureString(value: weather.mainData.temperature))")
                                .font(.system(size: 15))
                            Spacer()
                        }
                        HStack {
                            Text("Temperature fels like: \(temperatureString(value: weather.mainData.temperatureFeelsLike))")
                                .font(.system(size: 15))
                            Spacer()
                        }

                    }
                    VStack {
                        HStack {
                            Text("Temperature max: \(temperatureString(value: weather.mainData.temperatureMax))")
                                .font(.system(size: 15))
                            Spacer()
                        }
                        HStack {
                            Text("Temperature min: \(temperatureString(value: weather.mainData.temperatureMin))")
                                .font(.system(size: 15))
                            Spacer()
                        }
                    }
                }.padding(.horizontal, 5)
            }.cornerRadius(10)
            .overlay(
                RoundedRectangle(cornerRadius: 10).stroke(Color.gray, lineWidth: 1)
            )
            Spacer()
        }.padding(.horizontal)
    }

    private func temperatureString(value: Float) -> String {
        return String(format: "%.2f", value)
    }
}

标签： swiftui

Answer 1

您的第二个屏幕文本与第一个不同，但我假设您想要类似下面的内容（可以调整 corse 填充/间距/字体）

使用 Xcode 12.1 / iOS 14.1 准备

struct DemoView: View {
    var body: some View {
        VStack {
            Text("Description")
            Text("Visibility")
            Text("main")
            VStack {
                Text("Temperature Data")
                HStack(alignment: .top) {
                    Text("Temperature: 38 dsa das das das da sd")
                        .frame(maxWidth: .infinity, alignment: .leading)
                    Text("Temperature Max: 38")
                        .frame(maxWidth: .infinity, alignment: .leading)
                }
                HStack(alignment: .top) {
                    Text("Temperature fels like: 38")
                        .frame(maxWidth: .infinity, alignment: .leading)
                    Text("Temperature Min: 38")
                        .frame(maxWidth: .infinity, alignment: .leading)
                }
            }.padding(.top)
            Spacer()
        }.padding(.horizontal, 8)
    }
}