Строка списка SwiftUI не соответствует размеру содержимого

Question

У меня есть представление списка с 1) представлением заголовка, 2) динамическим c представлениями ForEach и 3) представлением нижнего колонтитула. Моя проблема в том, что первая строка, в которой находится представление заголовка, не будет соответствовать размеру его содержимого. Код для основного вида ниже:

var body: some View {
    List {
        GeometryReader { geometry in
            self.headerView(size: geometry.size)
        }
        ForEach(self.user.posts, id: \.self) { post in
            Text(post.title)
        }
        Text("No more posts...")
            .font(.footnote)
    }
    .edgesIgnoringSafeArea(.all)
}

Это представление, которого я пытаюсь достичь:

Это то, что у меня есть ...:

Если это какая-либо консолидация, отображается заголовок хорошо, если это за пределами списка, однако, это не тот вид, который я ищу.

Заранее спасибо.

PS: Извиняюсь за огромные изображения, я не знаю, как заставить их отображаться в виде миниатюр ...

Answer 1

Я предпочитаю использовать Sections для аналогичных целей (разделы позволяют иметь различную конфигурацию каждого), например

var body: some View {
    List {
        Section {
           // << header view is here with own size
        }
        .listRowInsets(EdgeInsets()) // << to zero padding

        Section { // << dynamic view is here with own settings
            ForEach(self.user.posts, id: \.self) { post in
                Text(post.title)
            }
        }
        Section { // footer view is here with own size
            Text("No more posts...")
               .font(.footnote)
        }
    }
    .edgesIgnoringSafeArea(.all)
}

Answer 2

Использование GeometryReader - это нормально, но его следует использовать правильно!

import SwiftUI

struct ContentView: View {
    var body: some View {
        // to get the size of view, we are going to use the width later
        GeometryReader { p in
            List {

                GeometryReader { _p in
                    // put your image or whatever ...
                    // and set the frame width
                    Color.red.frame(width: p.size.width, alignment: .center)
                }
                // and finally fix the height !! to work as expected
                .frame(height: 100)

                Text("By by, World!")
            }
        }
    }
}