Блог

У меня есть обычай GroupBoxStyle , в котором я хотел бы добавить к его левому краю цветную линию, которая занимает всю высоту GroupedBox. Затем этот GroupedBox используется в строках в VStack

Здесь синим content цветом обозначен GroupBox, желтым — та строка, которую я хочу добавить. Синим содержимым может быть любой вид.

В моей текущей реализации (см. Ниже), но проблема в том, что вертикальная линия не занимает всю высоту GroupBox

 import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            ScrollView {
                VStack(spacing: 8) {
                    GroupBox {
                        HStack {
                            VStack {
                                Text("Hello")
                                Text("Hello")
                                Text("Hello")
                                Text("Hello")

                            }
                            Spacer()
                        }
                    }

                    GroupBox {
                        Color.blue
                            .frame(height: 50)
                    }
                }
                // try to uncomment this
//                .padding(8)
            }
            .groupBoxStyle(StandardGroupBoxStyle())
            .navigationBarTitle("My Group", displayMode: .large)
        }
    }
}

public struct StandardGroupBoxStyle: GroupBoxStyle {
    public func makeBody(configuration: Self.Configuration) -> some View {
        HStack(spacing: 0) {
            Color.yellow
                .frame(width: 5)
                .frame(maxHeight: .infinity)

            VStack {
                configuration
                    .content
            }
            .border(Color.green)
            Spacer()
        }
        .border(Color.red)
    }
}



struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
 

Эта реализация и пример создают это (обратите внимание, что желтый цвет не занимает всю высоту строки.

Вот решение (я сохранил оригинальные дополнительные модификаторы, но предполагаю, что они предназначены для отладки). Протестировано с Xcode 12.1 / iOS 14.1

 public struct StandardGroupBoxStyle: GroupBoxStyle {
    public func makeBody(configuration: Self.Configuration) -> some View {
        HStack(spacing: 0) {
            configuration.content
                .padding(.leading, 5)
                .border(Color.green)      // << debug?
            Spacer()                     // << debug?
        }
        .overlay(Color.yellow.frame(width: 5), alignment: .leading)
        .border(Color.red)              // << debug?
    }
}