日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無(wú)先后，達(dá)者為師

網(wǎng)站首頁(yè) 編程語(yǔ)言 正文

swiftui開(kāi)發(fā)之padding默認(rèn)值設(shè)置詳解_Swift

作者：new_cheng ? 更新時(shí)間： 2022-11-14 編程語(yǔ)言

正文

swiftui 中的 padding 用于設(shè)置視圖的填充。

使用 padding() 可以指定 Text、Button 等視圖填充的數(shù)值，或者是對(duì)一個(gè)或多個(gè)邊設(shè)置填充。

下面讓我們來(lái)看看 padding 有哪些使用方式。

padding 的默認(rèn)值

使用 padding() 設(shè)置填充時(shí)，沒(méi)有設(shè)置具體數(shù)值將會(huì)使用特定平臺(tái)給定的默認(rèn)值。而這個(gè)默認(rèn)值并沒(méi)有標(biāo)準(zhǔn)值，對(duì)于不同的設(shè)備，用戶(hù)的設(shè)置等情況，padding 的默認(rèn)值都會(huì)有所不同：

如果值為 nil，則將應(yīng)用特定平臺(tái)指定的或者由系統(tǒng)計(jì)算的值用于填充。

來(lái)看看具體示例：

import SwiftUI
struct Test: View {
    var body: some View {
        VStack{
            Text("沒(méi)有默認(rèn)值的padding")
                .padding()
                .background(Color.red)
            Text("填充值為16的padding")
                .padding(16)
                .background(Color.blue)
        }
    }
}
struct Test_Previews: PreviewProvider {
    static var previews: some View {
        Test()
    }
}

iphone14 pro 顯示效果(下面示例默認(rèn)使用 iphone14 pro 顯示）：

上圖的顯示效果中，默認(rèn)值和 16 的效果近似，但不代表默認(rèn)值就是 16。

對(duì)某個(gè)方向設(shè)置 padding

padding 可以對(duì)上下左右 4 個(gè)方向單獨(dú)設(shè)置填充。

  • top：上
  • bottom：下
  • leading：左
  • trailing：右
import SwiftUI
struct Test: View {
    var body: some View {
        VStack{
            Text("上padding")
                .padding(.top, 20) // 文字頂部設(shè)置 20 像素的填充
                .border(Color.gray)
            Text("下padding")
                .padding(.bottom, 20)
                .border(Color.gray)
            Text("左padding")
                .padding(.leading, 20)
                .border(Color.gray)
            Text("右padding")
                .padding(.trailing, 20)
                .border(Color.gray)
            // 統(tǒng)一設(shè)置 16 像素的填充
            Text("填充值為16的padding")
                .padding(16)
                .border(Color.gray)
        }
    }
}
struct Test_Previews: PreviewProvider {
    static var previews: some View {
        Test()
    }
}

注意：如果在設(shè)置某個(gè)方向的 padding 時(shí)沒(méi)有給定具體數(shù)值，將會(huì)使用系統(tǒng)默認(rèn)值：padding(.top)。

同時(shí)對(duì)多個(gè)方向設(shè)置 padding

我們還可以同時(shí)對(duì)多個(gè)方向設(shè)置 pdding。

import SwiftUI
struct Test: View {
    var body: some View {
        VStack{
            Text("上下padding")
                .padding([.top, .bottom], 20)
                .border(Color.gray)
            Text("上下左padding")
                .padding([.top, .bottom, .leading], 20)
                .border(Color.gray)
            Text("左右padding")
                .padding([.leading, .trailing], 20)
                .border(Color.gray)
            Text("左右下padding")
                .padding([.bottom, .leading, .trailing], 20)
                .border(Color.gray)
            Text("水平padding")
                .padding(.horizontal, 20)
                .border(Color.gray)
            Text("垂直padding")
                .padding(.vertical, 20)
                .border(Color.gray)
            Text("填充值為16的padding")
                .padding(16)
                .border(Color.gray)
        }
    }
}
struct Test_Previews: PreviewProvider {
    static var previews: some View {
        Test()
    }
}

對(duì)上下左右4個(gè)方向的 padding 進(jìn)行精確設(shè)置

import SwiftUI
struct Test: View {
    var body: some View {
        VStack{
            Text("精確控制4個(gè)方向的padding")
                .padding(EdgeInsets(top: 10, leading: 20, bottom: 30, trailing: 40))
                .border(Color.gray)
            Text("填充值為16的padding")
                .padding(16)
                .border(Color.gray)
        }
    }
}
struct Test_Previews: PreviewProvider {
    static var previews: some View {
        Test()
    }
}

總結(jié)

我們學(xué)會(huì)了 padding 的各個(gè)方向的設(shè)置，給你的布局加點(diǎn) padding，對(duì)用戶(hù)體驗(yàn)會(huì)更加友好哦。

原文鏈接：https://juejin.cn/post/7146035670606151710

欄目分類(lèi)
最近更新