๐Ÿ”ฐSlider label position

โ•ฑ๐Ÿšง under construction

SwiftUI โŸฉ controls โŸฉ Slider โŸฉ label position

่จญๅฎš Slider ๆ•ธๅ€ผๆจ™็ฑคๅˆฐๆป‘ๆกฟ่ชฟ้ˆ•็š„ไธŠๆ–นใ€‚

๐Ÿ’ˆ็ฏ„ไพ‹๏ผš่จˆ็ฎ—ๆจ™็ฑคไฝ็ฝฎ็š„ไธๅŒๆ–นๆณ•

ๆ–นๆณ• ๏ผ‘๏ผšไฝฟ็”จๅ›บๅฎšๅฏฌๅบฆ็š„ Sliderใ€‚

  • ๅ„ช้ปž๏ผšๅฎนๆ˜“่จˆ็ฎ—ๆ•ธๅ€ผๆจ™็ฑค็š„ๅ็งป้‡ใ€‚

  • ็ผบ้ปž๏ผšๅฏฌๅบฆๅ›บๅฎš๏ผŒ้ฉๆ‡‰ๆ€งๅทฎใ€‚

Slider 1 ็จ‹ๅผ็ขผ้‡้ปž่งฃ่ชช๏ผš

  1. .background ่ฒ ่ฒฌๅฐ‡ๅญ่ฆ–ๅœ– (Text) ็ฝฎไธญๅฐ้ฝŠ (Text ็š„ไธญๅฟƒ้ปžๆ”พๅœจ่ƒŒๆ™ฏๆญฃไธญๅคฎ)ใ€‚

  2. ่จˆ็ฎ— Text ็š„ๅ็งป้‡ๆ™‚๏ผŒ้ ˆไปฅไธญๅคฎ็‚บๅŸบๆบ–ใ€‚

  3. ็”จ .offset() ๅ็งป Textใ€‚

// view properties
@State var t: CGFloat = 0.5
let sliderWidth: CGFloat = 300                  // โญ๏ธ ๆป‘ๆกฟๅฏฌๅบฆ

// view body 
// slider(fixed width) > background > text
Slider(value: $t)
    // โญ๏ธ 1. `.background` ่ฒ ่ฒฌๅฐ‡ๅญ่ฆ–ๅœ–ใ€Œ็ฝฎไธญๅฐ้ฝŠใ€
    .background {
        let knobWidth: CGFloat = 28             // ๆป‘ๆกฟ่ชฟ้ˆ•ๅฏฌๅบฆ
        let knobRange = sliderWidth - knobWidth // ่ชฟ้ˆ•ๆดปๅ‹•็ฏ„ๅœๅฏฌๅบฆ
        
        // โญ๏ธ 2. ๅ› ็‚บ Text ๆœƒ่ขซ .background ็ฝฎไธญๅฐ้ฝŠ
        //       ๆ‰€ไปฅ่จˆ็ฎ—ๅ็งป้‡ๆ™‚๏ผŒ้ ˆไปฅไธญๅคฎ็‚บๅŸบๆบ–ใ€‚
        let xOffset = (t-0.5) * knobRange       // ๆ•ธๅ€ผๆจ™็ฑคๅ็งป้‡
        
        // โญ๏ธ 3. ็”จ .offset() ๅ็งป Textใ€‚
        Text("\(t, specifier: "%.2f")")
            .offset(x: xOffset, y: -30)
    }// background
    .frame(width: sliderWidth)                  // โญ๏ธ ๅฏฌๅบฆๅ›บๅฎš

Last updated

Was this helpful?