如何在 SwiftUI 中添加与内容重叠的按钮上方的渐变？ iOS 13

Posted 2023-02-23

【中文标题】如何在 SwiftUI 中添加与内容重叠的按钮上方的渐变？ iOS 13

【英文标题】：How to add a gradient above button in SwiftUI that is overlapping the content? iOS 13

【发布时间】：2021-12-28 09:45:42

【问题描述】：

我必须在按钮上方添加一个渐变，以在按钮上方的文本上显示透明度。按钮的高度应为 60。渐变的高度应为 30，但渐变应与视图中的其他内容重叠。不幸的是，我必须支持 ios 13。

我目前在按钮上显示渐变，但按钮的总高度是 60 + 30：

VStack(spacing: 0) 
           Rectangle()
               .foregroundColor(.clear)
               .background(
                   LinearGradient(
                       gradient: Gradient(colors: [.white.opacity(0.1), .white.opacity(1)]),
                       startPoint: .top,
                       endPoint: .bottom))
               .frame(height: 30)

           Button(action: 
               state.isExpanded.toggle()
           , label: 
               Text(state.isExpanded ? "Collapse" : "Expand")
                   .frame(maxWidth: .infinity,
                          minHeight: 60,
                          maxHeight: 60,
                          alignment: .center)
                   .foregroundColor(Color(.red))
                   .background(Color(.white))
           )
               .buttonStyle(.plain)
       

【问题讨论】：

这需要Minimal, Reproducible Example，但我认为您可以在上面的视图上使用叠加层。

【参考方案1】：

如果它对某人有帮助，我设法通过叠加来做到这一点。

   Button(action: 
             state.isExpanded.toggle()
          , label: 
             Text(state.isExpanded ? "Collapse" : "Expand")
                   .frame(maxWidth: .infinity,
                          minHeight: 60,
                          maxHeight: 60,
                          alignment: .center)
                   .foregroundColor(Color(.red))
                   .background(Color(.white))
           ).overlay(Rectangle()
                .foregroundColor(.clear)
                .background(LinearGradient(
                gradient: Gradient(colors: [.white.opacity(0), .white.opacity(1)]),
                                   startPoint: .top,
                                   endPoint: .bottom))
                          .frame(height: 30)
                          .alignmentGuide(.top)  $0[.top] + 30 ,
                alignment: .top)