xcode swiftui中下面的代码将生成BEFORE屏幕,但我想将House图像移到“ Houses”文本上方(请参阅AFTER屏幕),我花了整整一整天的时间,无法弄清楚如何制作可能的话,如果有人愿意介入寻求帮助,将不胜感激!下面提供了完整代码...
Before and After VStack button
import SwiftUI
struct LightGreenButton: View {
var body: some View {
VStack {
Image(systemName: "house")
.resizable()
.frame(width: 50, height: 50, alignment: .center)
//.opacity(0.6)
.clipped()
.foregroundColor(Color(#colorLiteral(red: 0.005, green: 0.4422248602, blue: 0.3870742321, alpha: 1)))
.offset(x: 0, y: 0)
Text("Houses")
.font(.system(size: 20, weight: .semibold, design: .rounded))
.frame(width: 150, height: 100)
.foregroundColor(Color(#colorLiteral(red: 0.005, green: 0.4422248602, blue: 0.3870742321, alpha: 1)))
.background(
ZStack {
Color(#colorLiteral(red: 0.6574724317, green: 0.8923466802, blue: 0.8671938181, alpha: 1))
RoundedRectangle(cornerRadius: 16, style: .continuous)
.foregroundColor(.white)
.blur(radius: 4)
.offset(x: -8, y: -8)
RoundedRectangle(cornerRadius: 16, style: .continuous)
.fill(
LinearGradient(gradient: Gradient(colors: [Color(#colorLiteral(red: 0.6574724317, green: 0.8923466802, blue: 0.8671938181, alpha: 1)), Color.white]), startPoint: .topLeading, endPoint: .bottomTrailing)
)
.padding(2)
.blur(radius: 1)
}
)
.clipShape(RoundedRectangle(cornerRadius: 16, style: .continuous))
.shadow(color: Color(#colorLiteral(red: 0.8696053624, green: 0.8697276711, blue: 0.8695667386, alpha: 1)), radius: 20, x: 20, y: 20)
.shadow(color: Color(#colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)), radius: 20, x: -20, y: -20)
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color(#colorLiteral(red: 0.9447055279, green: 0.954059048, blue: 0.954059048, alpha: 1)))
.edgesIgnoringSafeArea(.all)
}
}
struct LightGreenButton_Previews: PreviewProvider {
static var previews: some View {
LightGreenButton()
}
}
这是一个解决方案。已通过Xcode 11.4 / iOS 13.4测试。