今天是 iOSDC 2013 的第一天，由於全程都會參加，如果沒有事先準備的話，晚一點回家沒東西 po 就有可能會開天窗（笑）

前一篇是提到「在 Swift 中如何設定圓角外框」，
雖然本系列文章基本上沒有前後關聯，如果你是還沒讀過的讀者，也推薦你去看！

接著進入正題。

問題

當用 SwiftUI 生成一個 Button 時，Button 中的文字是不會有任何 edge insets：

Button {} label: {
    Text("鐵人發文")
}
.background(Color.mint)

UIKit 的 UIButton

如果是從 UIKit 中建立一個 UIButton 可以發現有從 Configuration 就有提供初始的 insets ：

// 在某 UIViewController 中
let button = UIButton(type: .system)
self.view.addSubview(button)

var configuration = UIButton.Configuration.tinted()
configuration.title = "鐵人發文"
configuration.baseBackgroundColor = .systemMint
button.configuration = configuration

button.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
    button.centerXAnchor.constraint(equalTo: view.centerXAnchor),
    button.centerYAnchor.constraint(equalTo: view.centerYAnchor)
])

在 SwiftUI

依照 SwiftUI 構成的邏輯，要達到一樣的效果的話，就需要從 Text 設定 padding 。畢竟 Button 也沒有像是 Configuration 有 edgeInset 可以設定。

因此可以改寫成這樣：

Button {} label: {
    Text("鐵人發文")
        // 加上 padding()
        .padding()
}
.background(Color.mint)
// 在 iOS 17 以後需要這樣設定圓角
.clipShape(RoundedRectangle(cornerRadius: 10))

在 padding 的地方能夠設定不同方位的間隔，詳細請參照 文件 。

cornerRadius

這個 modifier 在 iOS 17 開始被標記為 deprecated ，因此在這裡用了

.clipShape(RoundedRectangle(cornerRadius: 10))

和用了原先 cornerRadius 這個 modifier 會有一樣的效果：

.cornerRadius(10)

效果圖

結語

這個設定算是用 SwiftUI 做第一個 Button 時就碰到的問題，找到解法之後發現和 UIKit 由外往內的邏輯相反， SwiftUI 在許多地方都是設定子元件優先影響外層這種由內往外的邏輯。

今天的內容偏基礎，除了作為自己的筆記以外，希望也能幫到需要的人。

今天的 SwiftUI 的大大小小就到這邊，
以上，明天見！

環境

• Xcode 15 beta 8

本篇使用到的 UI 元件和 modifiers 基本上沒有受到版本更新影響，除了 iOS 17 以後才出現的 API ，在 Xcode 14 等環境下使用也是沒有問題的。