如何在SwiftUI视图中实现MPVolumeView的垂直居中效果

MPVolumeView作为UIKit控件，默认不会适配SwiftUI的frame约束做自动居中，核心原因是它的固有内容尺寸固定，被强行拉伸到更大frame时默认停靠在视图顶部，需要通过容器视图+约束的方式修正布局行为。

修复后的代码 #

你只需要修改VolumeSlider的实现即可，外层ContentView代码无需调整：

import SwiftUI
import MediaPlayer

struct ContentView: View {
    var body: some View {
        VStack {
            Divider()
            VolumeSlider()
                .frame(height: 128)
            Divider()
        }
    }
}

struct VolumeSlider: UIViewRepresentable {
    func makeUIView(context: Context) -> UIView {
        // 创建容器承载MPVolumeView，用于承接SwiftUI设置的尺寸
        let container = UIView(frame: .zero)
        let volumeView = MPVolumeView(frame: .zero)
        volumeView.translatesAutoresizingMaskIntoConstraints = false
        // 可选配置：隐藏右侧AirPlay路由按钮
        // volumeView.showsRouteButton = false
        
        container.addSubview(volumeView)
        
        // 约束配置：让MPVolumeView始终在容器中居中
        NSLayoutConstraint.activate([
            volumeView.centerXAnchor.constraint(equalTo: container.centerXAnchor),
            volumeView.centerYAnchor.constraint(equalTo: container.centerYAnchor),
            // 限制滑块宽度不超出容器范围
            volumeView.leadingAnchor.constraint(greaterThanOrEqualTo: container.leadingAnchor, constant: 16),
            volumeView.trailingAnchor.constraint(lessThanOrEqualTo: container.trailingAnchor, constant: -16)
        ])
        
        return container
    }
    
    func updateUIView(_ uiView: UIView, context: Context) {}
}

逻辑说明 #

• 新增的容器视图会完全适配SwiftUI设置的height: 128尺寸
• 通过Auto Layout约束让MPVolumeView固定在容器的垂直、水平中心位置，和普通SwiftUI Text组件的居中行为完全一致
• 代码仍然仅支持真机运行，模拟器无法正常渲染MPVolumeView组件

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