Я пытаюсь создать круг наверху с содержимым формы внизу, прямо над моей TabBar. Я могу немного заставить это сделать это, используя .frame(), но я не большой поклонник этого. Кажется, должен быть более простой способ выровнять его по низу.

Насколько я понимаю, Spacer() должен подтолкнуть форму вниз и оставить кружок вверху, но, похоже, это не так.

var body: some View {
    VStack {
        Circle().foregroundColor(.yellow).overlay(VStack {
            Text("Example")
        }).foregroundColor(.primary)
        
        Spacer()
        
        Form {
            TextField("test", text: $a)
            TextField("test2", text: $b)
        }
    }
}

1
Joe Scotto 18 Авг 2021 в 19:46

2 ответа

Лучший ответ

Все прокрутки (на которых построен Form) и формы (которые есть Circle) жадны в приоритете макета. У них нет внутренних ограничений, поэтому, если есть свободное место, сыворотка возьмет его.

Spacer тоже жадный, но у него более низкий приоритет, чем у других жадных просмотров

Вот почему в вашем случае Form и Circle разделяют доступное пространство с 50% на 50%.

Вам нужно ограничить их высоту, чтобы это работало.

VStack {
    Circle().foregroundColor(.yellow).overlay(VStack {
        Text("Example")
    }).foregroundColor(.primary)
    .frame(height: UIScreen.main.bounds.width)
    
    Spacer()
    
    Form {
        TextField("test", text: $a)
        TextField("test2", text: $b)
    }.frame(height: 150)
}

0
Philip 18 Авг 2021 в 17:20

Forms, как и Lists, развернуть, чтобы занять все доступное пространство в родительском представлении. Если вы переключите симулятор в световой режим, вы увидите светло-серую область позади вашего TextFields. Это ваша форма.

Затем происходит сжатие Spacer() до нуля. Самый простой способ исправить это - поставить .frame(height: ???) на Spacer(), и прокладка займет это количество места и толкнет ваш Form вниз. Одно предостережение заключается в том, что он также подталкивает ваш круг вверх и сжимает его. Я не знаю, будет ли это проблемой для вас, поскольку это простой минимальный воспроизводимый пример, но при необходимости вы можете установить .frame() на верхнем виде.

        VStack {
            Circle().foregroundColor(.yellow).overlay(VStack {
                Text("Example")
            }).foregroundColor(.primary)
            .frame(width: 300)
            
            Spacer()
                .frame(height: 100)
            
            Form {
                TextField("test", text: $a)
                TextField("test2", text: $b)
            }
        }
0
Yrb 18 Авг 2021 в 17:20