Hi, 大家好，我是姜友華。上一節(jié)我們實現(xiàn)了標(biāo)簽視圖，這一節(jié)我們來實現(xiàn)分割視圖。

在UIKit里是有類似的SplitView的，但在SwiftUI里我沒有找到，所以需要自己來實現(xiàn)。你也可以通過封裝`NSSplitViewController 和NSSplitView來實現(xiàn)，這個也留到以后去講。

這里對分割視圖的設(shè)計比較簡單：首先是接收一組視圖，按單一方向排列，中間有分割符隔開即可；其次是實現(xiàn)通過拖動割符隔改變視圖的大小。

一、排列的設(shè)計。

排列的處理比較簡單，接收數(shù)組按水平或垂直排列，各區(qū)域的大小按百分比來處理即可。

先看代碼和顯示效果。

    @State var layouts: [AnyView] = []   // 需要排列的對象。
    @State var ratios: [CGFloat] = []
    @State var isHorizontal  = true  // 是否為水平排列。
    
    var body: some View {
        ZStack{
        GeometryReader{ geometry in
            if isHorizontal {
                HStack(spacing: 0) {
                    ForEach(Array(layouts.enumerated()), id: \.offset) { index, layout in
                        layout
                            .frame( width: frameWidth(index, geometry.size.width))
                        if index < layouts.count - 1 {
                            dividerView(index, geometry.size)
                        }
                    }
                }
            } else {
                VStack(spacing: 0) {
                    ForEach(Array(layouts.enumerated()), id: \.offset) { index, layout in
                        layout
                            .frame( height: frameHeight(index, geometry.size.width))
                        if index < layouts.count - 1 {
                            dividerView(index, geometry.size)
                        }
                    }
                }
            }
        }
        }
    }
    
    func frameWidth(_ index: Int, _ width: CGFloat) -> CGFloat {
        return (width - 10 ) * ratios[index]
    }
    
    func frameHeight(_ index: Int, _ height: CGFloat) -> CGFloat {
        return (height - 1) * ratios[index]
    }
    
    // 分割線。
    func dividerView(_ index: Int, _ size: CGSize) -> some View {
        ......
    }
    
    // 拖動分割線。
    func splitDrag(size: CGSize, current: Int) -> some Gesture {
       ......
            }
    }
}

struct SplitView_Previews: PreviewProvider {
    static var previews: some View {
        SplitView(layouts: [
            AnyView(Text("Window 1").background(.red)),
            AnyView(Text("Window 2").background(.red))
        ], ratios: [0.5, 0.5])
    }
}

效果

需要說明的是，視圖寬高的計算return (width - 10 ) * ratios[index]，都是減去一個常量再按占比算，這個常量是分割線的寬。

二、實現(xiàn)分割線的拖動。

分割線的拖動只需要按水平或垂直方向去處理。拖動時動態(tài)修改分割線的位置和視圖的大小。
直接看代碼。

struct SplitView: View {
......
    // 分割線。
    func dividerView(_ index: Int, _ size: CGSize) -> some View {
        Divider()
            .frame(width:1)
            .onHover { inside in
                // 鼠標(biāo)風(fēng)絡(luò)。
                if inside {
                    if isHorizontal {
                        NSCursor.resizeLeftRight.push()
                    } else {
                        NSCursor.resizeUpDown.push()
                    }
                } else {
                    NSCursor.pop()
                }
            }
            .gesture(
                splitDrag(size: size ,current: index)
            )
    }
    
    // 拖動分割線。
    func splitDrag(size: CGSize, current: Int) -> some Gesture {
        DragGesture()
            .onChanged { value in
                // 分割線所有的百分比。
                let value = isHorizontal ? value.location.x : value.location.y
                let toStart = value < 0
                let offset = abs(value) / (isHorizontal ? size.width : size.height)
                let minSize = splitMinSize / (isHorizontal ? size.width : size.height)
                var result = offset
                var array: [CGFloat] = []
                ratios.forEach{ ratio in
                    array.append(ratio)
                }
                
                // 向左或上。
                if toStart {
                    for i in stride(from: current, through: 0, by: -1) {
                        if result < 0.001 {
                            break
                        }
                        // 足夠。
                        if array[i] > result + minSize  {
                            array[i] -= result
                            result = 0
                            break
                        }
                        // 不夠，留最小。
                        let value = array[i] - minSize
                        array[i] = minSize
                        result -= value
                    }
                    if offset > result + 0.001 {
                        array[current + 1] += (offset - result)
                    }
                    ratios = array
                    return
                }
                
                // 向右或下。
                for i in stride(from: current + 1, to: array.count, by: 1) {
                    if result < 0.001 {
                        break
                    }
                    // 足夠。
                    if array[i] > result + minSize  {
                        
                        array[i] -= result
                        result = 0
                        break
                    }
                    // 不夠，留最小。
                    let value = array[i] - minSize
                    array[i] = minSize
                    result -= value
                }
                if offset > result + 0.001 {
                    array[current] += (offset - result)
                }
                ratios = array
            }
    }
}

拖動的處理分兩步：

• 首先是添加分割線的拖曳事件，這是一種固定處理，即添加 DragGesture對象。
• 其次是處理onChanged事件，這里的處理是，向移動的方向遂個處理有可能被縮小的視圖，保證每個視圖能以最小值顯示。處理完成后再處理影響放大的那一個即臨近分割線并與移動方向相反的那個。

好，這個也就這些，我是姜友華，下次見