嘿，这个问题我之前做自定义滑块的时候也碰到过！硬编码宽度确实不灵活，SwiftUI里有几种方法能帮你动态获取视图的实际宽度，下面给你两种实用的方案：

方案一：用GeometryReader直接获取尺寸 #

GeometryReader是SwiftUI里获取视图尺寸最直接的方式，它能拿到当前视图所在的容器尺寸，刚好适合你的场景。修改后的代码如下：

import SwiftUI

struct Test: View {
    @State private var offset: CGFloat = 50
    @State private var trackWidth: CGFloat = 0 // 用来存储实际宽度
    
    var value: CGFloat {
        guard trackWidth > 0 else { return 0 } // 避免除以0的错误
        return offset / trackWidth
    }
    
    var body: some View {
        GeometryReader { proxy in
            ZStack(alignment: .leading) {
                // 滑块背景轨道
                Rectangle()
                    .foregroundColor(.gray.opacity(0.3))
                    .overlay(alignment: .leading) {
                        // 已填充的进度条
                        Rectangle()
                            .frame(width: offset)
                            .foregroundColor(.red)
                    }
                    .onAppear {
                        // 视图出现时获取轨道的实际宽度
                        trackWidth = proxy.size.width
                        // 确保初始offset不超过轨道宽度
                        offset = min(offset, trackWidth)
                    }
            }
            .frame(height: 32) // 固定高度，宽度由GeometryReader自动适配父容器
        }
        .gesture(
            DragGesture(minimumDistance: 0)
                .onChanged { gesture in
                    // 计算拖动后的offset，限制在0到trackWidth之间
                    let newOffset = gesture.location.x
                    offset = max(0, min(newOffset, trackWidth))
                }
        )
    }
}

代码说明： #

• 用GeometryReader包裹整个滑块视图，通过proxy.size.width拿到轨道的实际宽度，存在trackWidth变量里
• 在onAppear中初始化trackWidth，同时确保初始的offset不会超出轨道范围
• 添加了DragGesture，让滑块可以拖动，和原生滑块的交互逻辑一致
• 计算value的时候加了安全判断，避免trackWidth未初始化时出现除以0的错误

方案二：用PreferenceKey传递尺寸（适合复杂布局） #

如果你的滑块嵌套在更复杂的布局里，GeometryReader可能会影响原有布局，这时候可以用PreferenceKey来传递尺寸：

import SwiftUI

// 定义一个PreferenceKey用来传递宽度值
struct TrackWidthKey: PreferenceKey {
    static var defaultValue: CGFloat = 0
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = nextValue()
    }
}

struct Test: View {
    @State private var offset: CGFloat = 50
    @State private var trackWidth: CGFloat = 0
    
    var value: CGFloat {
        guard trackWidth > 0 else { return 0 }
        return offset / trackWidth
    }
    
    var body: some View {
        ZStack(alignment: .leading) {
            Rectangle()
                .foregroundColor(.gray.opacity(0.3))
                .overlay(alignment: .leading) {
                    Rectangle()
                        .frame(width: offset)
                        .foregroundColor(.red)
                }
                .background(
                    // 用透明背景视图获取尺寸，通过Preference传递给父视图
                    GeometryReader { proxy in
                        Color.clear
                            .preference(key: TrackWidthKey.self, value: proxy.size.width)
                    }
                )
                .onPreferenceChange(TrackWidthKey.self) { newWidth in
                    trackWidth = newWidth
                    offset = min(offset, trackWidth)
                }
        }
        .frame(height: 32)
        .gesture(
            DragGesture(minimumDistance: 0)
                .onChanged { gesture in
                    let newOffset = gesture.location.x
                    offset = max(0, min(newOffset, trackWidth))
                }
        )
    }
}

代码说明： #

• 先定义一个TrackWidthKey，作为传递宽度值的载体
• 在滑块轨道的背景里放一个GeometryReader，把尺寸通过preference传递出去
• 用onPreferenceChange监听尺寸变化，实时更新trackWidth
• 这种方法不会影响原视图的布局结构，适合嵌套在复杂布局中的场景

两种方案都能解决你动态获取宽度的问题，第一种更简单直接，第二种更灵活。你可以根据自己的布局需求选择～

内容的提问来源于stack exchange，提问作者E4TZ