SwiftUI List 如何去除列表中左右的 padding 空白

標簽： Swift swift swiftui list padding ios

SwiftUI List 如何去除列表中左右的 padding 空白

參考問題： How to remove the left and right Padding of a List in SwiftUI?

SwiftUI 在使用 List 的時候，默認每個 rowItem 都會有 padding，像這樣，左右都會有一塊 padding

在這里插入圖片描述

可以這樣去除：

我這個頁面中是包了 NavigationView，不要在意

給列表中的每個元素添加 .listRowInsets(EdgeInsets()) 即可
但是，這里有個問題，當以下面這種形式寫列表的時候不生效，

List(diaries){ diary in
       NavigationLink(destination: DiaryDetail(diary: diary)){
        DiaryListItem(diary: diary)
    }.listRowInsets(EdgeInsets())
}

需要以下面這種，在 List 內部 ForEach 才可以

struct DiaryList: View {
    var body: some View {
        NavigationView{
            List{
                ForEach(diaries) { diary in
                    NavigationLink(destination: DiaryDetail(diary: diary)){
                        DiaryListItem(diary: diary)
                    }.listRowInsets(EdgeInsets())
                }
            }
            .navigationTitle("Diary List")
        }
    }
}

最終效果：

在這里插入圖片描述

本文鏈接：https://blog.csdn.net/KimBing/article/details/112347553

智能推薦

SwiftUI TextField顯示鍵盤時如何顯示完整List列表內容

實戰需求加入列表行中有一個textField。當鍵盤出現時，無法向下滾動以查看完整List列表。我們該如何解決這個問題。本文價值與收獲看完本文后，您將能夠作出下面的界面看完本文您將掌握的技能實現鍵盤出現時list可滾動掌握list基礎使用掌握textfield基礎使用掌握modifier基礎使用代碼 1、主界面...

SwiftUI界面TextField隱藏鍵盤的三種方法( 點擊空白處隱藏鍵盤)

本文價值與收獲看完本文后，您將能夠作出下面的界面看完本文您將掌握的技能方案一，點擊textfield隱藏方案二，點擊背景隱藏方案三，點擊背景隱藏基礎知識 background(_:alignment:) 將給定視圖分層放置在該視圖之后。參量 backgroud 背景在該視圖后面繪制的視圖。 aligment對準用于定位背景視圖的中心默認值的對齊方式。...

SwiftUI 技巧之如何取消List的分割線separator

本文價值與收獲看完本文后，您將能夠作出下面的界面 image.png List簡介(基礎知識，高手可以略過) List是什么有什么用移動設備上的大多數用戶界面可以通過表視圖表示，這是一種簡單而優雅的數據顯示形式。SwiftUI時代蘋果為我們提供了List組件，List最大優勢在與其原生自帶了滾動和元素復用功能。也就是說，我們直接使用List就可以達到app store的列表水平，是不是很開心。...

SwiftUI 基礎之如何取消List的分割線divider

效果 image.png 代碼參考文章 https://stackoverflow.com/questions/56529765/how-to-hide-swiftui-list-divider 更多SwiftUI教程和代碼關注專欄 QQ:3365059189 SwiftUI技術交流QQ群:518696470 請關注我的專欄icloudend, SwiftUI教程與源碼 https://www....

SwiftUI List 編輯模式修改列表內容(Textfield設置第一個響應）

實戰需求希望通過編輯模式修改list內容，并控制textfield成為FirstResponder 本文價值與收獲看完本文后，您將能夠作出下面的界面看完本文您將掌握的技能控制List進入和推出編輯模式進入編輯模式后顯示textfield 控制textfield光標代碼...