Swift 목록에서 줄 구분 기호를 삭제하는 방법ForEach를 사용하지 않는 UI?

Swift 목록에서 줄 구분 기호를 삭제하는 방법ForEach를 사용하지 않는 UI?

커스텀 행의 리스트를 표시하기 위해서 이 코드를 사용하고 있습니다.

struct ContentView : View {
    var body: some View {
        VStack(alignment: .leading) {
            List(1...10) {_ in
                CustomRow()
            }
        }
    }
}

각하고 싶습니다.는 ★★★★★★★★★★★★★★★를 사용하지 않으려고 했다.List 그 and를 사용합니다.ForEach에 inside inside inside ScrollView패딩이나 여백 등 스타일링을 완전히 없앤다.나는 단지 선을 제거하고 싶을 뿐이고 다른 것은 아무것도 하고 싶지 않다.

제발 도와주세요, 고마워요.

iOS 15:

했다..listRowSeparator합격할 수 있다.hidden★★★★★★★★★★★★★★★★★★:

List {
    ForEach(items, id:\.self) { 
        Text("Row \($0)")
            .listRowSeparator(.hidden)
    }
}

---

iOS 14:

「」의.LazyVStack a ScrollView(iOS는 지원하지 않기 때문에)UIAppearance(Swift의 의 경우를 참조해 주세요.UI の ui ui ui ui ui 。

---

iOS 13:

⚠ this iOS 14 에서는 이 방법은 폐지되어 동작하지 않습니다.

게 요.UITableViewSwift(UIs UI)의 이면ListOS 13 입 os os 。 ★★★★★★★★★★★★★★★★★★★★★

추가 구분 기호(목록 아래):

는 필 a가 하다.tableFooterView

모든 분리기(실제 분리기 포함):

separatorStyle.none

사용 예

init() {
    if #available(iOS 14.0, *) { 
        // iOS 14 doesn't have extra separators below the list by default.
    } else {
        // To remove only extra separators below the list:
        UITableView.appearance().tableFooterView = UIView()
    }

    // To remove all separators including the actual ones:
    UITableView.appearance().separatorStyle = .none
}

var body: some View {
    List {
        Text("Item 1")
        Text("Item 2")
        Text("Item 3")
    }
}

정적 목록은 기본적으로 목록 아래에 추가 구분 기호를 표시하지 않습니다.

iOS 15 이상:

「 「 」를 만 하면 ..listRowSeparator(.hidden) List. https://developer.apple.com/documentation/swiftui/texteditor/listrowseparator(_:edges:)

List {
    ForEach(garage.cars) { car in
        Text(car.model)
            .listRowSeparator(.hidden)
    }
}

iOS 13 한정:

" " " UITableView.appearance().separatorColor = .clear에서, 「」의 앞부분을 참조해 주세요.List동작할 것 같습니다.되지만 모든 세퍼레이터는 되는 것에 해 주십시오.List인스턴스(instance)는 현재 특정 인스턴스의 구분자만 제거할 수 있는 공식적인 방법은 없기 때문에 이 스타일에 구속됩니다.는, 「이렇게 하다」에서 할 수 .onAppear.onDisappear을 사용하다

, 이 는, 이 「 」, 「 」, 「 」, 「 」를하고 있는 을 전제로 하고 .UITableViewList이는 iOS 14 SDK에서는 해당되지 않습니다.앞으로는 공식 API를 추가했으면 좋겠어요.크레딧은 https://twitter.com/singy/status/1169269782400647168 입니다.

Swift 확인UI-Introspect.기본 UIKit/AppKit 보기를 표시합니다.

iOS 13 빌드만:

이 경우 UITableView를 직접 조작할 수 있습니다(어피아란스 프록시를 통해 모든 테이블 뷰를 변경할 필요 없음).

    import Introspect
    :
    :
    List {
        ...
    }.introspectTableView { tableView in
         tableView.separatorStyle = .none
    }

IOS 14

현재 IOS 14 베타에서는 세퍼레이터를 숨길 수 있는 솔루션은 없습니다.

이 필요List 해서 ' , 으면 안 된다'를 사용해야 LazyVStack a ScrollView.

만약 싶다면List애플 포럼에서 삼워너에 의해 해결책을 찾았습니다.https://developer.apple.com/forums/thread/651028

이것은 일시적인 해결책입니다.경우에 따라서는, 인스톨을 조정할 필요가 있습니다.실장은 다음과 같습니다.

struct HideRowSeparatorModifier: ViewModifier {
    static let defaultListRowHeight: CGFloat = 44
    var insets: EdgeInsets
    var background: Color
    
    init(insets: EdgeInsets, background: Color) {
        self.insets = insets
        var alpha: CGFloat = 0
        UIColor(background).getWhite(nil, alpha: &alpha)
        assert(alpha == 1, "Setting background to a non-opaque color will result in separators remaining visible.")
        self.background = background
    }
    
    func body(content: Content) -> some View {
        content
            .padding(insets)
            .frame(
                minWidth: 0, maxWidth: .infinity,
                minHeight: Self.defaultListRowHeight,
                alignment: .leading
            )
            .listRowInsets(EdgeInsets())
            .background(background)
    }
}

extension EdgeInsets {
    static let defaultListRowInsets = Self(top: 0, leading: 16, bottom: 0, trailing: 16)
}

extension View {
    func hideRowSeparator(insets: EdgeInsets = .defaultListRowInsets, background: Color = .white) -> some View {
        modifier(HideRowSeparatorModifier(insets: insets, background: background))
    }
}

마지막으로 구현 목록을 보여 줍니다. 해서 더해야 요..hideRowSeparator()목록 셀에 있습니다.

struct CustomRow: View {
    let text: String
    
    var body: some View {
        HStack {
            Text(self.text)
            Image(systemName: "star")
        }
    }
}

struct ContentView : View {
    @State private var fruits = ["Apple", "Orange", "Pear", "Lemon"]
    
    var body: some View {
        VStack(alignment: .leading) {
            List {
                ForEach(self.fruits, id: \.self) { str in
                    CustomRow(text: str)
                        .hideRowSeparator()
                }
            }
        }
        .padding(.top)
    }
}

iOS 13 빌드만:

.List ★★★★★★★★★★★★★★★★★」Form제 경험상 글로벌하게(앱 전체를 삭제) 할 수 있습니다.

적어도 내 앱에서 이 문제를 해결하기 위해 찾은 해킹 방법은 앱의 "메인" 콘텐츠 보기에 다음 코드를 추가하는 것입니다.

.onAppear(perform: {
    UITableView.appearance().separatorStyle = .none
})

다음 에서 이 을 '다보다'의 합니다.List ★★★★★★★★★★★★★★★★★」Form

.onAppear(perform: {
    UITableView.appearance().separatorStyle = .singleLine
})

이렇게 하면 기본 내용 보기 위에 있는 보기 시트에 단일 줄 구분 기호가 추가됩니다.다시 말씀드리지만, 이 모든 것은 저의 최근 Swift에 대한 일화입니다.UI 익스피리언스

내 경험상, 나는 단지 그 추가만 하면 되었다..onAppear(... = .singleLine)메서드를 "보여진" 뷰 중 하나에 적용하면 이후 모든 뷰에 구분선이 나타납니다.

편집: 이 답변에 대한 관심이 계속 높아지고 있는 가운데 또 다른 메모가 제공됩니다.제가 올린 솔루션이 모든 케이스를 해결한 것은 아닙니다.또한 일부 케이스에서는 문제가 해결되지 않은 경우도 있습니다.결국 Introspect for Swift를 사용하게 되었습니다.이 문제를 앱 전체에서 해결하는 UI.

나는 사람들이 이 게시물을 접하면서 혼란과 좌절이 해소되기를 바란다.

다음과 같은 작업을 수행합니다.

UITableView.appearance().separatorColor = .clear

효과가 있지만 추천할 만한 것은 아닌 경우가 많습니다.이러한 변경은 글로벌하게 이루어집니다.즉, UITableView의 모든 인스턴스에 영향을 미칩니다.여러 UITableView에서 다른 스타일을 원하는 경우 이 문제가 발생합니다.또는 프레임워크를 개발하는 경우 프레임워크를 사용하는 클라이언트도 이러한 변경 사항을 상속합니다.

더 안전한 솔루션은 지정된 컨테이너 안에 있는 UITableView만 대상으로 하는 것입니다. 좋게도 운운은appearanceapi를 알 수 있습니다.

UITableView.appearance(whenContainedInInstancesOf: [UIHostingController<YourSwiftUiViewHere>.self]).separatorColor = .clear

iOS 14에는 다음과 같은 기능이 있습니다.

.listStyle(SidebarListStyle()) # IOS 14

Scroll View를 사용하시겠습니까?

목록을 나타내는 일부 상태

@State var menuItems: [String] = ["One", "Two", "Three"]

a aSwiftUI ForEach를 틀다ScrollView

ScrollView {
    ForEach(self.menuItems, id: \.self) { item in
        Text(item)
    }
}

모든 답변에 ScrollView를 사용하도록 지시되어 있습니다(이것도 권장).

그러나 List를 사용하고 구분선을 삭제하려는 경우.

Swift 설치PM: https://github.com/siteline/SwiftUI-Introspect

샘플:

List {
    Text("Item 1")
    Text("Item 2")
}
.introspectTableView { tableView in
    tableView.separatorStyle = .none
}

iOS13®iOS14의 경우 첫 번째 셀 상단에 있는 세퍼레이터를 제거합니다.

view Modifier 추가

extension View {
    func hideRowSeparator(insets: EdgeInsets = .init(top: 0, leading: 0, bottom: 0, trailing: 0),
                          background: Color = .white) -> some View {
        modifier(HideRowSeparatorModifier(insets: insets, background: background))
    }
}

struct HideRowSeparatorModifier: ViewModifier {

  static let defaultListRowHeight: CGFloat = 44

  var insets: EdgeInsets
  var background: Color

  init(insets: EdgeInsets, background: Color) {
    self.insets = insets

    var alpha: CGFloat = 0
    if #available(iOS 14.0, *) {
        UIColor(background).getWhite(nil, alpha: &alpha)
        assert(alpha == 1, "Setting background to a non-opaque color will result in separators remaining visible.")
    }
    self.background = background
  }

  func body(content: Content) -> some View {
    content
        .padding(insets)
        .frame(minWidth: 0, maxWidth: .infinity, minHeight: Self.defaultListRowHeight)
        .listRowInsets(EdgeInsets())
        .overlay(
            VStack {
                HStack {}
                .frame(maxWidth: .infinity)
                .frame(height: 1)
                .background(background)
                Spacer()
                HStack {}
                .frame(maxWidth: .infinity)
                .frame(height: 1)
                .background(background)
            }
            .padding(.top, -1)
        )
  }
}

사용.

struct ContentView: View {
    var body: some View {
        List {
            ForEach(0 ..< 30) { item in
                HStack(alignment: .center, spacing: 30) {
                    Text("Hello, world!：\(item)").padding()
                }
                .hideRowSeparator(background: .white)
            }
        }
        .listStyle(PlainListStyle())
    }
}

iOS 13의 회피책이 기능하지 않게 되었기 때문에, iOS14로 이 문제를 해결하기 위한 프로젝트를 개시했습니다.구분 기호 스타일, 구분 기호 색상 및 구분 기호 삽입을 설정할 수 있습니다.

목록에서 구분 기호 숨기기

List { <content> }
    .listSeparatorStyle(.none)

구성 가능한 색상과 삽입으로 단일 구분선 표시

List { <content> }
    .listSeparatorStyle(.singleLine, color: .red, inset: EdgeInsets(top: 0, leading: 50, bottom: 0, trailing: 20)

https://github.com/SchmidtyApps/SwiftUIListSeparator

패딩 및 분리기 제거

iOS 14.2, Xcode 12.2

ScrollView {
    LazyVStack {
        ForEach(viewModel.portfolios) { portfolio in
            PortfolioRow(item: portfolio)
        }
    }
}

그러면 목록을 완전히 제어할 수 있습니다.현재 구현되어 있는 List는 완전한 제어를 제공하지 않으며 몇 가지 문제가 있습니다.

저는 이것밖에 안 되는 것 같아요.

List() {

}
.listStyle(SidebarListStyle())

아래쪽 분리기만 숨기려면 이렇게 하세요.

Text("Hello, world!")
   .listRowSeparator(.hidden, edges: [.bottom])

iOS 14의 경우:

~로.listRowSeparator(.hidden)는 iOS 15에서만 사용할 수 있으며 edgeinset을 0으로 명시적으로 설정하여 하위 버전에서는 구분자를 숨길 수 있습니다.

콘텐츠 표시:

List {
    ForEach(viewModel.items, id: \.id) { item in
        YourListItem(item)
        .listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0))
    }
}

행 항목의 배경을 흰색(또는 루트 페이지 색상)으로 하여 위의 변경에 수반합니다.

행 항목:

var body: some View {
    VStack {
        ..... your content
    }
    .background(Colors.white)
}

VSTack은 단지 예시일 뿐입니다.어떤 컴포넌트라도 상관없습니다.

내선번호 ListRow입니다.목록 행 구분 기호 숨기기 및 사용자 지정 확장입니다.

import SwiftUI

// MARK: List row extensions

extension View {
    
    func hideListRowSeparator() -> some View {
        return customListRowSeparator(insets: .init(), insetsColor: .clear)
    }
    
    func customListRowSeparator(
        insets: EdgeInsets,
        insetsColor: Color) -> some View {
        modifier(HideRowSeparatorModifier(insets: insets,
                                          background: insetsColor
        )) .onAppear {
            UITableView.appearance().separatorStyle = .none
            UITableView.appearance().separatorColor = .clear
        }
    }
}

// MARK: ViewModifier

private struct HideRowSeparatorModifier: ViewModifier {
        
    var insets: EdgeInsets
    var background: Color
    
    func body(content: Content) -> some View {
        content
            .padding(insets)
            .frame(
                minWidth: 0,
                maxWidth: .infinity,
                maxHeight: .infinity,
                alignment: .leading
            )
            .listRowInsets(EdgeInsets())
            .background(background)
    }
}

사용방법:

// Without list row separator
List {
    ForEach(self.viewModel.data, id: \.id) { item in
        Text("Text")
    }
    .hideRowSeparatorItemList()
}

// With list row separator with color and size
List {
    ForEach(self.viewModel.data, id: \.id) { item in
        Text("Text")
    }
    .customListRowSeparator(insets: EdgeInsets(top: 0,
                                               leading: 0,
                                               bottom: 5,
                                               trailing: 0),
                            insetsColor: Color.red)
}

Swift의 "UITableView"의 모든 기능이 필요한지 잘 모르겠습니다.UI, 하지만 iOS 13 이상에서 보기 목록을 표시하려면 다음 작업을 수행할 수 없습니다.

ScrollView {
    VStack(alignment: .leading) {
        ForEach(1...10) { _ in
            CustomRow()
        }
    }
}

에 '어느 정도'를 붙입니다..padding()하는는 마? ??

네거티브 인셋과 솔리드 컬러를 사용하여 세퍼레이터를 마스킹할 수 있습니다.

UI를 할 수 .List 보다onAppear를 합니다.UITableView「 」 「 」 、「 」

.onAppear {
 UITableView.appearance().separatorStyle = .none
}

이 코드를 사용하면 목록 보기의 모든 줄 구분 기호를 제거해야 합니다.

List of Swift의 구분선 처리에 대해 당신과 같은 문제가 있습니다.UI.

간단하게 하기 위해서, 다음의 경우에 대해 생각해 봅시다.

앱 대상이 다음과 같은 경우:

iOS 13 및 14: Scroll View 사용:

ScrollView {
 ForEach(datas, id: \.self) { item in
    YourCustomRowView(data: item)
 }
}

리스트가 처리할 수 있는 ScrollView의 모든 것을 처리할 수 있습니다(조금만 더 하면 됩니다).

iOS 15: 목록을 사용하세요. iOS 15에서는 별도의 라인을 처리하기 위해 많은 기능이 추가되었기 때문입니다.

List {
  ForEach(self.datas) { item in
    YourCustomRowView(data: item)
        .listRowSeparator(.hidden)
  }
}

을 listStyle로 할 수 .InsetListStyle() 이렇게요.

.listStyle(InsetListStyle())

코드 끝에 추가

iOS 13과 14 모두에서 동작하는 심플한 솔루션

extension List {
func removeSeparator() -> some View {
    if #available(iOS 14.0, *) {
        return self.listStyle(SidebarListStyle()).erasedToAnyView()
    } else {
        return self.onAppear {
            UITableView.appearance().separatorStyle = .none
        }.erasedToAnyView()
    }
}

저도 같은 문제가 있어요.하지만 나는 그것을 위한 수제 해결책을 알고 있다.따라서 List 행 파라미터를 다음과 같이 설정합니다.

.listRowInsets(EdgeInsets(top: -5, leading: 0, bottom: 0, trailing: 0))

또한 다음과 같은 로우 뷰 본체의 패딩도 가능합니다.

.padding(EdgeInsets(top: Statics.adjustValue(v: 10), leading: Statics.adjustValue(v: 10), bottom: Statics.adjustValue(v: 10), trailing: Statics.adjustValue(v: 10)))

구분자가 숨겨집니다.

모든 iOS 버전

이것은 모든 고려사항을 포함하는 솔루션입니다.

    
    let style: UITableViewCell.SeparatorStyle
    
    public func body(content: Content) -> some View {
        content
            .introspectTableView { tableView in
                     tableView.separatorStyle = .none
            }
    }
}
 
public extension View {
    
    func listSeparator(style: UITableViewCell.SeparatorStyle) -> some View {
        ModifiedContent(content: self, modifier: ListSeparatorStyle(style: style))
    }
}

실장:

List {
   // code...
}
.listSeparator(style: .none)

언급URL : https://stackoverflow.com/questions/56553672/how-to-remove-the-line-separators-from-a-list-in-swiftui-without-using-foreach