[英]How to create a radio buttons inside the floating panel with close button on top of the floating panel in swift?
I need a design, which has a radio buttons inside the floating panel with close button.我需要一个设计,它在带有关闭按钮的浮动面板内有一个单选按钮。 I need something like this as shown in image Can someone please help me我需要这样的东西,如图所示有人可以帮我吗
Even without many of the necessary information, for those who are interested, as far as I know, there is no out-of-the-box Apple solution - Without further information (UIKit or SwiftUI, etc...) I can imagine to have something like the following in SwiftUI:即使没有许多必要的信息,对于那些感兴趣的人,据我所知,没有开箱即用的 Apple 解决方案 - 没有更多信息(UIKit 或 SwiftUI 等......)我可以想象在 SwiftUI 中有如下内容:
//
//
// RadioButton.swift
// RadioButton
//
// Created by Sebastian on 16.08.22.
//
import SwiftUI
var bounds = UIScreen.main.bounds
struct ContentView: View {
@State var selectedItem: String = ""
@State var showMenu = false
var body: some View {
ZStack() {
BackgroundView(selectedItem: $selectedItem, showMenu: $showMenu)
.blur(radius: showMenu ? 3 : 0)
Color.black
.opacity(showMenu ? 0.5 : 0)
RadioButtonView(selectedItem: $selectedItem, showMenu: $showMenu)
.offset(y: showMenu ? 480 : bounds.height)
}
.edgesIgnoringSafeArea(.all)
}
}
struct BackgroundView: View {
@Binding var selectedItem: String
@Binding var showMenu: Bool
var body: some View {
HStack(){
Spacer()
VStack() {
Spacer()
Text("Selected Option: \(selectedItem == "" ? "nothing selected" : selectedItem)")
.foregroundColor(.white)
.padding()
Button(action: {
withAnimation(.linear(duration: 0.2)) {
self.showMenu.toggle()
}
}) {
Text("Show Menu")
.font(.system(size: 20, weight: .medium))
.foregroundColor(.white)
}
Spacer()
}
Spacer()
}.background(Color.blue)
}
}
struct RadioButtonView: View {
@Binding var selectedItem: String
@Binding var showMenu: Bool
var buttonItems: [String] = ["Score", "Run-Up", "Jump", "Back-Foot Contact", "Front-Foot Contact", "Release"]
var body: some View {
VStack() {
HStack() {
Spacer()
Button(action: {
withAnimation(.linear(duration: 0.2)) {
self.showMenu.toggle()
}
}) {
Text("Close Menu")
.font(.system(size: 20, weight: .medium))
.foregroundColor(.white)
}
.padding()
Spacer()
}
VStack(alignment: .leading) {
Text("Sort By")
.font(.system(size: 20, weight: .medium))
ForEach(buttonItems, id: \.self){ item in
RadioButton(selectedItem: $selectedItem, item: item)
}
Spacer()
}
.padding()
.background(Color.white)
.cornerRadius(20)
}
}
}
struct RadioButton: View {
@Binding var selectedItem: String
var item: String
func setSelectItem(item: String) {
selectedItem = item
}
var body: some View {
HStack() {
Button(action: {
self.setSelectItem(item: item)
}) {
Image(systemName: selectedItem == item ? "circle.inset.filled" : "circle")
.font(.system(size: 20, weight: .medium))
.frame(width: 20, height: 20)
Text(item)
.font(.system(size: 18, weight: .regular))
}
Spacer()
}
.foregroundColor(.black)
}
}
Please keep in mind, the background view as well as the array of strings that is used for the radio buttons are just examples.请记住,背景视图以及用于单选按钮的字符串数组只是示例。 The background view, could be anything else and instead of strings you can create other types of objects.背景视图可以是其他任何东西,而不是字符串,您可以创建其他类型的对象。
And that is for you would get (it is a gif, so the animation doesn't look as smooth as it is in reality:这就是你会得到的(它是一个 gif,所以 animation 看起来不像现实中那么平滑:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.