web-dev-qa-db-ja.com

SwiftUIを使用したサブビューの等しい幅

ボタンの上に2つの情報を並べてSwiftUIでシンプルなwatchOS UIを構築しようとしています。

各辺（VStack内のHStackとして表されます）が利用可能な幅の半分を占めるようにしたいので（黄色の親ビュー内で50/50に分割されています）、次の例では、|文字がボタンの中央に配置されています。

ShortとLonger !!!の各テキストをそれぞれの側の50％の中央に配置したい。

要素を配置し、いくつかの異なるスタックの境界を示すために、このコードから始めました。

_var body: some View {
    VStack {
        HStack {

            VStack {
                Text("Short").font(.body)
            }
                .background(Color.green)

            VStack {
                Text("Longer!!!").font(.body)
            }
                .background(Color.blue)

        }
            .frame(minWidth: 0, maxWidth: .infinity)
            .background(Color.yellow)
        Button (action: doSomething) {
            Text("|")
        }
    }
}
_

これは私にこの結果を与えました： starting point

次に、それぞれの横幅をVStackを使用可能な幅の50％にすることになると、行き詰まってしまいます。各VStackに.relativeWidth(0.5)を追加するとうまくいくと思いました。理解すると、各VStackを親ビューの幅の半分にする必要があります（HStack、黄色の背景）：

_var body: some View {
    VStack {
        HStack {

            VStack {
                Text("Short").font(.body)
            }
                .relativeWidth(0.5)
                .background(Color.green)

            VStack {
                Text("Longer!!!").font(.body)
            }
                .relativeWidth(0.5)
                .background(Color.blue)

        }
            .frame(minWidth: 0, maxWidth: .infinity)
            .background(Color.yellow)
        Button (action: doSomething) {
            Text("|")
        }
    }
}
_

しかし、これは私が得る結果です： unexpected widths

SwiftUIで必要な動作を得るにはどうすればよいですか？

更新：SwiftUIのドキュメントをさらに確認すると、フレームが設定され、相対幅が定義される ここの例 が表示されますそのフレームと比較すると、多分私はこのようにrelativeWidthを使うことになっていないのでしょうか？

私は次のコードで私が望むものに一歩近づきました：

_var body: some View {
    VStack {
        HStack {

            VStack {
                Text("Short").font(.body)
            }
                .frame(minWidth: 0, maxWidth: .infinity)
                .background(Color.green)

            VStack {
                Text("Longer!!!").font(.body)
            }
                .frame(minWidth: 0, maxWidth: .infinity)
                .background(Color.blue)

        }
            .frame(minWidth: 0, maxWidth: .infinity)
            .background(Color.yellow)
        Button (action: doSomething) {
            Text("|")
        }
    }
}
_

これはこの結果を生成します：

closer to expected result

今、私は2つのVStacksの間の真ん中にその余分なスペースを作成しているものを理解しようとしています。これまでのところ、パディングを取り除いて安全な領域を無視する実験はそれに影響を与えていないようです。

watchosswiftui
15
gohnjanotis

relativeWidthがいつどのように使用されることになっているのかまだ混乱していますが、使用せずに欲しかった欲求を達成することができました。 （EDIT 2019年7月18日：iOS 13 Beta 4リリースノートによると、relativeWidthは非推奨になりました）

私の質問への最後の更新では、2つの側面の間にいくつかの余分なスペースがあり、それがHStackに入るデフォルトのスペースであることを認識し、そのスペースを0に設定することでそれを削除することができました。最終的なコードと結果：

var body: some View {
    VStack {
        HStack(spacing: 0) {

            VStack {
                Text("Short").font(.body)
            }
                .frame(minWidth: 0, maxWidth: .infinity)
                .background(Color.green)

            VStack {
                Text("Longer!!!").font(.body)
            }
                .frame(minWidth: 0, maxWidth: .infinity)
                .background(Color.blue)

        }
            .frame(minWidth: 0, maxWidth: .infinity)
            .background(Color.yellow)
        Button (action: doSomething) {
            Text("|")
        }
    }
}

そしてここに結果があります： final result without spacing

16
gohnjanotis