SWIFT - Transparent Button - swift

Question

I want to place button at the bottom of the screen and also want to make it little transparent.
Here I am sharing my code with image. Can please any one suggest me like how to make button transparent and how to change the position.
card.swift
//
// testCard.swift
// demoApp
//
// Created by ZAREEN NAUSHAD on 17/01/21.
//
import SwiftUI
struct testCard: View {
var testItem : testCourse
var body: some View {
ZStack{
Image(testItem.testImage)
VStack{
Text(testItem.testName)
.font(.largeTitle)
.fontWeight(.bold)
.foregroundColor(Color.white)
.multilineTextAlignment(.center)
Text("Marks: " + testItem.testMarks)
.font(.subheadline)
.fontWeight(.semibold)
.foregroundColor(Color.white)
Text("Minute: " + testItem.testTime)
.font(.subheadline)
.fontWeight(.semibold)
.foregroundColor(Color.white)
Text("Question: " + testItem.testQuestion)
.font(.subheadline)
.fontWeight(.semibold)
.foregroundColor(Color.white)
}.offset(y : -160)
Button(action: ({
print("Button Clicked")
}), label: {
HStack{
Text("Take Test Now")
.fontWeight(.heavy)
.foregroundColor(Color("LCOdarkpink"))
Image(systemName: "arrow.right.square")
.accentColor(Color("LCOdarkpink"))
}
.padding(.horizontal, 40)
.padding(.vertical, 10)
.background(Color.white)
.clipShape(Capsule())
}).offset(y : 0) // here i am trying to change the position of button but its not moving
}
.frame(width: 280, height: 430)
.background(testItem.testColor)
.cornerRadius(18)
}
}
struct testCard_Previews: PreviewProvider {
static var previews: some View {
testCard(testItem: testList[1])
.previewLayout(.sizeThatFits)
}
}

Answer 1

Instead of using offsets to change the position of your elements you can use a Spacer() inside a VStack(). To change the transparency of the button you can use the .opacity() modifier.
You could try something like this:
struct ContentView: View {
var body: some View {
ZStack{
//Image(testItem.testImage)
RoundedRectangle(cornerRadius: 15)
.fill(Color(.blue))
VStack {
Text("testItem.testName")
.font(.largeTitle)
.fontWeight(.bold)
.foregroundColor(Color.white)
.multilineTextAlignment(.center)
Text("Marks: " + "testItem.testMarks")
.font(.subheadline)
.fontWeight(.semibold)
.foregroundColor(Color.white)
Text("Minute: " + "testItem.testTime")
.font(.subheadline)
.fontWeight(.semibold)
.foregroundColor(Color.white)
Text("Question: " + "testItem.testQuestion")
.font(.subheadline)
.fontWeight(.semibold)
.foregroundColor(Color.white)
Spacer() // <-- 1. Spacer instead of offset
Button(action: ({
print("Button Clicked")
}), label: {
HStack{
Text("Take Test Now")
.fontWeight(.heavy)
.foregroundColor(Color(.black))
Image(systemName: "arrow.right.square")
.accentColor(Color(.black))
}
.padding(.horizontal, 40)
.padding(.vertical, 10)
.background(Color.white
.opacity(0.8)) // <-- 2. Change transperancy of button here
.clipShape(Capsule())
})
}.padding()
}
.frame(width: 280, height: 430)
.background(testItem.testColor)
.cornerRadius(18)
}
}