☰

SwiftUIでテキストを画面の上部に揃えるにはどうすればいいですか？質問する

tag-icon • tag-icon swift swiftui
SwiftUIでテキストを画面の上部に揃えるにはどうすればいいですか？質問する

ここに画像の説明を入力してください「上部テキスト」を画面の上部に揃えようとしていますが、方法が見つかりません。「上部テキスト」は、iPhone 画面の「ノッチ」の近くに揃える必要があります。

「トップテキスト」が現在どこにあるかを示すスクリーンショットを添付しました。これを一番上に移動する必要があります。

struct ContentView: View {
    //var newColor : [String: Double] = setColor(red:247, green:186, blue:161)
    var body: some View {
        ZStack {
            VStack(spacing: 0) {
                HStack {
                    Text("Top Text[![enter image description here][1]][1]")
                        .fontWeight(.light)
                        .multilineTextAlignment(.center)
                        .frame(minWidth: 0, maxWidth: .infinity, minHeight: 100)
                        .font(.body)
                        .padding()

                }
                .offset(y: 0)
                .frame(minWidth: 0, maxHeight: 400, alignment: .topLeading)

                VStack {
                    Text("Sign in with Facebook")
                        .fontWeight(.light)
                        .font(.title)
                        .frame(minWidth: 0, maxWidth: .infinity, maxHeight: 50)
                        .padding(EdgeInsets.init(top: 0, leading: 0, bottom: 0, trailing: 0))

                    Text("Sign in with Google")
                        .fontWeight(.light)
                        .font(.title)
                        .padding()
                        .frame(minWidth: 0, maxWidth: .infinity, maxHeight: 50)
                }
            }
            .foregroundColor(Color.black.opacity(0.7))
            .padding()
            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .leading)
            .offset(x: 0, y: 0)

        }
        .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .leading)
        .background(Color.orange.opacity(0.2))
        .edgesIgnoringSafeArea(.all)

    }

}

ベストアンサー1

とSpacer()の間にを置くことができます。ただし、これにより他のテキストが下へ押し出されます。下の の後に別の を置くと、それらのテキストが上に押し出されます。HStackVStackSpacer()Text

以下は、基本的に同じビューですが、コードが少なくなっています。

var body: some View {
    ZStack {
        Color(.orange).opacity(0.2).edgesIgnoringSafeArea(.all)

        VStack(spacing: 10) {
            Text("Top Text[![enter image description here][1]][1]")
                .fontWeight(.light)
                .multilineTextAlignment(.center)
                .font(.body)
                .padding()
            Spacer()
            Text("Sign in with Facebook")
                .fontWeight(.light)
                .font(.title)
            Text("Sign in with Google")
                .fontWeight(.light)
                .font(.title)
            Spacer()
        }
        .foregroundColor(Color.black.opacity(0.7))
        .padding()
    }
}

おすすめ記事