在iOS26启动弹出层时,UI组件初始显示的颜色就不对

移动开发 2026-07-12

在iOS26使用SwiftUI启动.sheet时,我遇到了一个怪异的bug。视图首次出现时,按钮和选择器等组件的初始颜色是错误的,但很快就会变成正确的颜色:

https://youtube.com/shorts/trKvZCYuYQ8

我知道如果把按钮上的.disabled注释掉,它就不会再这样了,但选择器就不确定了。以下是完整的代码:

import SwiftUI

struct ContentView: View
{
    @State private var selection = "Option 1"

    @State private var sheetIsPresented: Bool = false

    let options = ["Option 1",
                   "Option 2",
                   "Option 3",
                   "Option 4"]

    var body: some View
    {
        Button("Enter")
        {
            self.sheetIsPresented = true
        }
        .buttonStyle(.borderedProminent)
        .sheet(isPresented: self.$sheetIsPresented)
        {
            VStack
            {
                Picker("Choose Option", selection: self.$selection)
                {
                    ForEach(self.options, id: \.self)
                    {
                        option in Text(option).tag(option)
                    }
                }
                .pickerStyle(.menu)
            }

            Button("Test")
            {
            }
            .disabled(true)
            .buttonStyle(.borderedProminent)
        }
    }
}

解决方案

ButtonPicker 的外观似乎取决于sheet的背景,而在iOS 26中,sheet的背景取决于sheet的大小。Apple关于 Adopting Liquid Glass 的说明中有更多解释:

模态视图,如sheets和 action sheets,采用Liquid Glass。Sheets有更大的圆角半径,半张sheets会从显示边缘向内缩进,让底下的内容可以从下面若隐若现地透出。当半张sheet扩展到全高时,它会过渡为更不透明的外观,以帮助保持对任务的专注。

如果在你的示例中把 .presentationDetents([.medium, .large]) 应用到sheet内容并在iPhone 17模拟器上运行,你将看到在切换两种sheet大小时组件的外观如何变化。需要把被禁用的 Button 移动到 VStack 内部,以实现这个效果:

.sheet(isPresented: $sheetIsPresented) {
    VStack {
        // ... Picker + Button
    }
    .presentationDetents([.medium, .large])
}

Animation

在iPad的情况下,似乎任何小于整页的sheet在过渡时都会呈现半透明的玻璃外观,而到达时却是更不透明的外观。因此,这也是你在示例中按钮外观变化的原因。


作为变通方法,尝试将 .presentationBackground 设置为纯色。

  • 如果你想要与一个大sheet相同的背景,可以使用 UIColor.systemBackground。这会自动适应明暗模式。
  • 不幸的是,使用 ShapeStyle.background 不起作用,因为这与sheet已经拥有的背景相同。
.sheet(isPresented: $sheetIsPresented) {
    VStack {
        // ...
    }
    .presentationBackground(Color(.systemBackground))
}

Animation

站内所有文章版权归属LeftHeroAI导航站,无授权禁止任何主体转载、抄袭、复制内容,亦不得私自架设镜像站点。一经侵权,本站将通过法律途径追责。

相关文章