Dividerの線の太さを変える方法【SwiftUI】

区切り線を引く Divider の基本的な使用方法はこちらの記事（swiftuiで区切り線を引く方法【divider】）で紹介しましたが、線の太さを変える方法については触れていませんでした。と言うのも、Divider には線の太さを変えるプロパティがそもそも存在しないのです。

でも、ちょっと太い線が欲しい時もありますよね。

と言うわけで、Divider の代わりになる拡張Viewを作ってみましたので紹介します。

Dividerの線の太さを変える方法

で、どう作ったかと言うと、単純に RectAngle（矩形View）を細長くすれば良いわけです。例えば、VStack に横長の太線を引く場合は以下の様にします。

VStack {
    Text("上上上上上")
    Rectangle()
        .foregroundColor(.white)
        .frame(height: 4)
    Text("下下下下下")
}.fixedSize()

HStack に縦線を引く場合は、.frame(width: 太さ) とすれば良いです。

HStack {
    Text("左左左左左")
    Rectangle()
        .foregroundColor(.white)
        .frame(width: 4)
    Text("右右右右右")
}.fixedSize()

拡張Divider

ひとまずは希望通りの太さの線を実現できたのですが、せっかくなので、使いやすい様に拡張版の ExDivider を作成してみました。線の方向、太さ、カラーをイニシャライザーで設定できる様にしています。

struct ExDivider: View {

    enum Orientation {
        case horizontal
        case vertical
    }
    
    let orientation: Orientation
    let thickness: CGFloat
    let color: Color

    var body: some View {
        Rectangle()
            .foregroundColor(color)
            .frame(
                width: orientation == .horizontal ? .none : thickness,
                height: orientation == .vertical ? .none : thickness)
    }
}

縦線を引く使用例

HStack {
    Text("左左左左左")
    Rectangle()
        .foregroundColor(.white)
        .frame(width: 4)
    Text("右右右右右")
}.fixedSize()

横線を引く使用例

VStack {
    Text("上上上上上")
    ExDivider(orientation: .horizontal, thickness: 4, color: .white)
    Text("下下下下下")
}.fixedSize()

以上で区切り線の太さを変える方法を紹介しましたが、実際には RectAngle であるので、rotationEffect プロパティを使って斜めの線を引いたりなど、やろうと思えば色々と拡張できそうですね。

Dividerの線の太さを変える方法【SwiftUI】