소개

SwiftUI로 iPad(가로로 고정)의 Master Detail(SplitView)를 작성하는데 꽤 손잡았다.
기술하는 것은 많지 않고 결과로서는 간단한 내용이지만, 빠지면 좀처럼 목적을 완수할 수 없기 때문에, 기사로서 남겨 둔다.

마스터(왼쪽 테이블 뷰) 표시

struct MasterDetail1View: View {
    @State private var fruits = ["Apple", "Banana", "Cherry", "Dragon Fruit"]
    @State private var selectedFruit = ""

    var body: some View {
        NavigationView {
            List {
                ForEach(fruits, id: \.self) { fruit in
                    Text(fruit)
                        .onTapGesture {
                            self.selectedFruit = fruit
                    }
                }
                .onAppear {
                    self.selectedFruit = "Apple"
                }
            }
            // 常に2カラムで良いのでナビゲーションバーは非表示
            .navigationBarHidden(true)
        }
   }
}

기본값은 왼쪽 상단에 마스터 (왼쪽 테이블보기) 표시/숨기기 아이콘이 표시됩니다. 항상 마스터(왼쪽 테이블 뷰) 표시로 고정하고 싶기 때문에 .navigationBarHidden 를 true 로 한다.

선택 셀에 색상 지정

struct MasterDetail2View: View {
    @State private var fruits = ["Apple", "Banana", "Cherry", "Dragon Fruit"]
    @State private var selectedFruit = ""

    var body: some View {
        NavigationView {
            List {
                ForEach(fruits, id: \.self) { fruit in
                    // テキスト以外の部分（セル全体）も含めてひとつの表示領域にする。
                    HStack{
                        Text(fruit)
                        Spacer()
                    }
                    // 形状を矩形全体とする。
                    .contentShape(Rectangle())
                    .onTapGesture {
                        self.selectedFruit = fruit
                    }
                    // 選択セル色を付ける
                    .listRowBackground(self.selectedFruit == fruit ? Color.gray.opacity(0.25) : Color.clear)
                }
                .onAppear {
                    self.selectedFruit = "Apple"
                }
            }
            .navigationBarHidden(true)
        }
    }
}

탭 이벤트를 얻기 위해 .onTapGesture 설명. .listRowBackground 에서 색상 설정.Text 그냥 텍스트 부분에서만 탭 이벤트를 얻을 수 있다. Spacer() 와 함께 HStack 로 감싸 .contentShape(Rectangle()) 를 기술하는 것으로 셀 전체에서 탭 이벤트를 취득할 수 있다.

Detail 표시

struct MasterDetail3View: View {
    @State private var fruits = ["Apple", "Banana", "Cherry", "Dragon Fruit"]
    @State private var selectedFruit = ""

    var body: some View {
        NavigationView {
            List {
                ForEach(fruits, id: \.self) { fruit in
                    HStack{
                        Text(fruit)
                        Spacer()
                    }
                    .contentShape(Rectangle())
                    .onTapGesture {
                        self.selectedFruit = fruit
                    }
                    .listRowBackground(self.selectedFruit == fruit ? Color.gray.opacity(0.25) : Color.clear)
                }
                .onAppear {
                    self.selectedFruit = "Apple"
                }
            }
            .navigationBarHidden(true)
            // セルの表示形式を横幅いっぱいにする
            .listStyle(PlainListStyle())

            // Listと同じ階層にDetailを配置する
            Detail(title: selectedFruit)
        }
    }
}

struct Detail: View {
    let title: String
    var body: some View {
        Text("\(self.title)").font(.system(size: 50)).frame(maxWidth: .infinity)
    }
}

Detail용의 View 를 List 아래에 기술하는 것만으로 오른쪽에 Detail .listStyle(PlainListStyle()) 를 기술하는 것으로, 가로폭 가득한 마스터(왼쪽 테이블 뷰)로서 표시할 수 있다.


소스 코드