如何在SwiftUI中创建玻璃面板而不使用Material Structure

vm0i2vca 于 2023-04-19 发布在 Swift

关注(0)|答案(1)|浏览(113)

我想做一个这样的玻璃面板。https://codepen.io/kanishkkunal/pen/QWGzBwz
这是我想要重新创建的CSS

.glass-panel {
  color: #fff;
  margin: 40px auto;
  background-color: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  width: 100%;
  border-radius: 15px;
  padding: 32px;
  backdrop-filter: blur(10px);
}

这是我之前发布的一条tweet，上面有我在https://twitter.com/DevlanderJS/status/1644059601409826816上工作的代码
这是我目前为我的卡的代码，我已经尝试使用模糊修改器和覆盖修改器的组合来模糊它下面的东西，但没有运气。

struct GlassContainer:  View {
    var height: Double
    
    var computedHeight: Double {
        return height
    }
    var body:  some View {
        
        ZStack{
            VStack{
                Color(
                    red: 255/255,
                    green: 255/255,
                    blue: 255/255,
                    opacity: 0.06)                
            }
            .frame(height: height)
            .clipShape(RoundedRectangle(cornerRadius: 15))
            .border(
                Color(
                    red: 255/255,
                    green: 255/255,
                    blue: 255/255,
                    opacity: 0.1
                )
            ).cornerRadius(15)
        }
    }
}

我可能处理这个错误。有人能给予我一些例子吗？我不想使用.ultraThinMaterial .regularThickMaterial或任何材质，因为我想有我的自定义颜色，但我也想有我的卡下的一切模糊。
这就是我现在所拥有的

swift

来源：https://stackoverflow.com/questions/76017597/how-do-i-create-glass-panels-in-swiftui-without-using-the-material-structure

1条答案

按热度按时间

bq3bfh9z1#

你错过了Material的要点。它意味着分层：

struct GlassContainer:  View {
    var height: Double
    
    var computedHeight: Double {
        return height
    }
    var body:  some View {
        
        ZStack{
            VStack{
                Color(
                    red: 255/255,
                    green: 255/255,
                    blue: 255/255,
                    opacity: 0.06) 
                    .background(.ultraThinMaterial)
                    // Place the Material in a background to layer it. You will
                    // get your color and the glassy look. You can even set
                    // opacity on the Material to make in more transparent.
               
            }
            .frame(height: height)
            .clipShape(RoundedRectangle(cornerRadius: 15))
            .border(
                Color(
                    red: 255/255,
                    green: 255/255,
                    blue: 255/255,
                    opacity: 0.1
                )
            ).cornerRadius(15)
        }
    }
}

赞(0）回复(0）举报 2023-04-19

我来回答

如何在SwiftUI中创建玻璃面板而不使用Material Structure

1条答案

相关问题

热门标签

最新问答