Introduction#
Github this is day 4 and shows
- Shape and path
- Bubble chat
- ZStack
Shape and Path#
create a shape and implement the path method, this will create a bubble chat shape
struct ChatButtle: Shape {func path(in rect: CGRect) -> Path {let path = UIBezierPath(roundedRect: rect,byRoundingCorners: [.topLeft, .topRight, .bottomLeft], cornerRadii: CGSize(width: 15, height: 15))return Path(path.cgPath)}}
apply clipshape onto a text
Text("reading question here").padding().background(Color.gray.opacity(0.3)).clipShape(ChatButtle()).padding(.horizontal, 5)
also how to style a button
Button { self.showAnswer.toggle() } label: {Text(self.showAnswer ? "Hide Anwser" : "Show Answer").fontWeight(.bold).padding(.vertical).foregroundColor(Color.white)}.frame(maxWidth: .infinity).background(Color.green).clipShape(RoundedRectangle(cornerRadius: 10)).padding(.horizontal, 5)
ZStack#
put them together
struct Day4DrawShape: View {@State private var showAnswer: Bool = falsevar body: some View {ZStack {VStack {Spacer()Button {self.showAnswer.toggle()} label: {Text(self.showAnswer ? "Hide Anwser" : "Show Answer").fontWeight(.bold).padding(.vertical).foregroundColor(Color.white)}.frame(maxWidth: .infinity).background(Color.green).clipShape(RoundedRectangle(cornerRadius: 10)).padding(.horizontal, 5)}.zIndex(2)ScrollView {VStack {Text("reading question here").padding().background(Color.gray.opacity(0.3)).clipShape(ChatButtle()).padding(.horizontal, 5)}if (self.showAnswer){Text("reading answer here").frame(maxWidth: .infinity).padding().background(Color.green.opacity(0.3)).clipShape(ChatButtle()).padding(.horizontal, 5)}}.zIndex(1)}}}