Как создать кнопку панели инструментов жидкого стекла, которая адаптируется к фоновому содержанию ⇐ IOS

[Anonymous]

У меня есть следующий код, пытающийся создать панель инструментов с двумя строками, как я видел из ios safari 26, но проблема в том, что структура инструментов на самом деле не адаптируется к цвету фона, она остается темной, когда на темном фоне. Я также пытался использовать .buttonstyle (.glass) , который также создает капсульный пузырь вокруг каждой кнопки. Будьте адаптивны к фоновому содержанию Scrollview.

Код: Выделить всё

// MARK: - Main issue: Toolbar Button, but not adaptive to background content color
HStack(spacing: 20) {
Image(systemName: "house.fill")
.font(.system(size:36))
.frame(width: 40, height: 40)
Image(systemName: "text.magnifyingglass")
.font(.system(size:36))
.frame(width: 40, height: 40)
Image(systemName: "plus.circle.fill")
.font(.system(size:36))
.frame(width: 40, height: 40)
}
< /code>
import SwiftUI

@main
struct GlassToolbarDemoApp: App {
var body: some Scene {
WindowGroup {
DemoView()
}
}
}

struct DemoView: View {
@State private var query: String = ""
@Namespace private var namespace

var body: some View {
ZStack {
SampleBackgroundScroll()
.ignoresSafeArea() // let content run under the glass for a better effect
}
// Pin our two-row glass toolbar to the TOP.  Change to .bottom to make it a bottom toolbar.
.safeAreaInset(edge: .bottom) {
VStack(spacing: 8) {
GlassEffectContainer{
HStack(spacing: 10) {
// Search field
HStack(spacing: 8) {
Image(systemName: "magnifyingglass")
.foregroundStyle(.secondary)
TextField("Search…", text: $query)
.textInputAutocapitalization(.never)
}
.padding(.horizontal, 12)
.padding(.vertical, 10)
.background(
RoundedRectangle(cornerRadius: 14, style: .continuous)
.fill(.thinMaterial)
)
}
.frame(maxWidth: .infinity, alignment: .leading)
.padding(.horizontal, 2)
.glassEffect()
.glassEffectUnion(id: "toolbar", namespace: namespace)
Divider().opacity(0.25)

// MAIN PROBLEM: How do we make the foreground color of these images adaptive
// like a buttonStyle(.glass) but without the bubble around them.
HStack(spacing: 20) {
Image(systemName: "house.fill")
.font(.system(size:36))
.frame(width: 40, height: 40)
Image(systemName: "text.magnifyingglass")
.font(.system(size:36))
.frame(width: 40, height: 40)
Image(systemName: "plus.circle.fill")
.font(.system(size:36))
.frame(width: 40, height: 40)
}
}

}
.padding(.horizontal, 14)
.padding(.vertical, 10)
.frame(maxWidth: .infinity)
.glassEffect(.clear)
.padding(.horizontal)
.padding(.top, 6)
.shadow(color: .black.opacity(0.12), radius: 20, y: 10)
}
}
}

// MARK: - Demo background content to show light/dark behind glass
struct SampleBackgroundScroll: View {
var body: some View {
ScrollView {
LazyVStack(spacing: 0) {
demoBlock(.light, title: "Sunny Paper")
demoBlock(.dark, title: "Night Slate")
demoBlock(.light, title: "Porcelain")
demoBlock(.colorful, title: "Aurora Cyan")
demoBlock(.dark, title: "Graphite")
demoBlock(.colorfulAlt, title: "Sunset Blend")
demoBlock(.light, title: "Foggy White")
demoBlock(.dark, title: "Charcoal")
}
}
}

@ViewBuilder
func demoBlock(_ style: BlockStyle, title: String) ->  some View {
ZStack {
switch style {
case .light:
LinearGradient(colors: [Color.white, Color(white: 0.93)], startPoint: .topLeading, endPoint: .bottomTrailing)
case .dark:
LinearGradient(colors: [Color.black, Color(white: 0.15)], startPoint: .top, endPoint: .bottom)
case .colorful:
LinearGradient(colors: [Color.cyan.opacity(0.7), Color.blue.opacity(0.4)], startPoint: .topLeading, endPoint: .bottomTrailing)
case .colorfulAlt:
LinearGradient(colors: [Color.purple, Color.orange], startPoint: .topLeading, endPoint: .bottomTrailing)
}

VStack(spacing: 12) {
Text(title)
.font(.system(size: 28, weight: .bold))
.foregroundStyle(style == .dark ? .white : .primary)
Text("Scroll to see how the glass adapts to different backgrounds.")
.font(.system(size: 15))
.foregroundStyle(style == .dark ? .white.opacity(0.85) : .secondary)
}
.padding(.top, 120)
}
.frame(height: 360)
}

enum BlockStyle { case light, dark, colorful, colorfulAlt }
}

#Preview {
DemoView()
}

Подробнее здесь: https://stackoverflow.com/questions/797 ... nd-content