簡単なまとめアンテナみたいなアプリを作ってみようとNavigationViewとListを配置したら、Listの上に妙な空白が…解決に手こずったので、メモしておきます。

LISTの上にある隙間は、NavigationViewの仕様

一生懸命paddingだのoffsetだのといじるものだと思っていたら、上部の隙間は「NavigationTitle」というものが入る領域で、指定してなかったとしても空としてそのスペース自体は確保されたままらしい。

以下がその状況。
※まとめアンテナのデータをListに差し込んでみた例

ピンクの部分。開いてるんだよなぁ。ここ、NavigationTitleの文字が入る領域らしい

navigationBarに差し込む設定にすると、さらに上に表示されるようになる

.navigationBarTitleDisplayMode(.inline)　と設定してやると、ナビゲーションバーにタイトル領域が確保され、この隙間は消えるらしい。

以下サンプル

        NavigationView{
           
            List(article_list.ArticleList){matomedata in
             ///destinationのあたりは便宜上てきとーにいれた
                NavigationLink(destination: WebView(urlStr: matomedata.url)) {
                    Section{
                    Text(matomedata.title)
                    }
                    
                }
                
            }
            .listStyle(PlainListStyle())
            .navigationBarTitleDisplayMode(.inline)
            .navigationTitle("なびげーしょん、たいとる")
            
        }

で、できたのがこれ

お、隙間が消えたやんけ

もちろん、navigationtitleをつけなかったら、ナビゲーションバーの部分は空白になる。

chromeの「検証」みたいなのほしいよね。。何の影響で隙間があいてるのか全然わからなかったよ…

あるのかな？

コメント