☰

HStack は等間隔で全幅を埋めます 質問する

tag-icon • tag-icon swift swiftui
HStack は等間隔で全幅を埋めます 質問する

HStack があります:

struct BottomList: View {
    var body: some View {
        HStack() {
            ForEach(navData) { item in
                NavItem(image: item.icon, title: item.title)
            }
        }
    }
}

* コンテンツが均等間隔で中央に配置され、幅全体が自動的に埋められるにはどうすればよいでしょうか?

ちなみにBootstrapのCSSクラスと同じです.justify-content-around

ベストアンサー1

レイアウトframe修飾子と.infinityパラメータをmaxWidth使用すると、追加のビューを必要とせずにこれを実現できますShape。

struct ContentView: View {
    var data = ["View", "V", "View Long"]

    var body: some View {
    VStack {

        // This will be as small as possible to fit the data
        HStack {
            ForEach(data, id: \.self) { item in
                Text(item)
                    .border(Color.red)
            }
        }

        // The frame modifier allows the view to expand horizontally
        HStack {
            ForEach(data, id: \.self) { item in
                Text(item)
                    .frame(maxWidth: .infinity)
                    .border(Color.red)
            }
        }
    }
    }
}

.frame 修飾子を使用した比較

おすすめ記事