SwiftUI Academy · درس

اختيار القيم باستخدام Slider

اختر رقماً ضمن نطاق باستخدام شريط تمرير

اختيار القيم باستخدام Slider درس مجاني في SwiftUI Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في SwiftUI Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة SwiftUI Academy 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

Meet the Slider

A Slider lets users drag to pick a number from a range. Think volume, brightness, or any smooth, continuous value. 🎚️

Sliders Hold a Number

A Slider works with a Double. As the user drags the thumb, that value updates continuously across its range.

@State private var volume = 0.5

Bind to State

Connect the Slider to your value with the dollar sign binding, exactly like Toggle. Dragging then updates the number live.

Slider(value: $volume)

Set the Range

By default a Slider runs from 0 to 1. Pass an explicit range to choose your own minimum and maximum.

Slider(value: $volume, in: 0...100)

Snap with a Step

Add a step so the value jumps in fixed increments instead of any decimal, which is great for whole numbers.

Slider(value: $level, in: 0...10, step: 1)

Show the Current Value

Read the bound number to display it, so users see exactly where the slider sits as they drag.

Text("Volume: \(Int(volume))")

Add Edge Labels

Use the closure parameters to put labels at each end of the track, like icons for quiet and loud.

Slider(value: $volume, in: 0...100) {
    Text("Volume")
}

Tint the Track

Color the filled portion of the slider with the tint modifier so it matches your app's style.

Slider(value: $volume).tint(.orange)

Detect Drag Start and End

The onEditingChanged closure fires when dragging begins and ends, handy for committing a value once.

Slider(value: $v) { editing in
    isDragging = editing
}

Drive Other Views

The slider value can control anything. Here it sets a circle's scale, so the shape grows as you drag.

Circle().scaleEffect(volume)

The Full View

This view ties it together: a Slider over a custom range plus a Text that reflects the live value.

struct VolumeView: View {
    @State private var volume = 50.0
    var body: some View {
        Slider(value: $volume, in: 0...100)
        Text("\(Int(volume))")
    }
}

Quick Check

How do you make a Slider produce whole numbers from 0 to 10?

Recap

A Slider binds to a Double, takes an in range and optional step, and updates live so other views can react. 🎚️

الأسئلة الشائعة

هل درس «اختيار القيم باستخدام Slider» مجاني؟

نعم — نص درس «اختيار القيم باستخدام Slider» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة SwiftUI Academy، انتقل إلى CoddyKit PRO. تتضمن دورة SwiftUI Academy 4 دروس في المجموع.

ماذا ستتعلم في «اختيار القيم باستخدام Slider»؟

اختر رقماً ضمن نطاق باستخدام شريط تمرير تتمرن على SwiftUI Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ SwiftUI Academy؟

لا تُشترط خبرة سابقة. SwiftUI Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «اختيار القيم باستخدام Slider»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس SwiftUI Academy هذا؟

نعم. كل درس في SwiftUI Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى SwiftUI Academy