Swift 我将如何在颤振中对该选项卡栏进行编码?
我有一些使用SwiftUI的经验,不久前我写了这段代码。我目前正在学习如何使用颤振来构建UI。我该如何编写这个?这是一个浮动选项卡栏,可以通过滑动来打开和关闭 这基本上是一个圆形矩形HStack,内部有5个按钮,如果轻按或长按,可以将其动画化为单个按钮。几天前,我刚刚开始使用Flutter,我仍然在努力将我的switftui逻辑转换为Flutter。有什么想法吗Swift 我将如何在颤振中对该选项卡栏进行编码?,swift,flutter,swiftui,flutter-layout,flutter-animation,Swift,Flutter,Swiftui,Flutter Layout,Flutter Animation,我有一些使用SwiftUI的经验,不久前我写了这段代码。我目前正在学习如何使用颤振来构建UI。我该如何编写这个?这是一个浮动选项卡栏,可以通过滑动来打开和关闭 这基本上是一个圆形矩形HStack,内部有5个按钮,如果轻按或长按,可以将其动画化为单个按钮。几天前,我刚刚开始使用Flutter,我仍然在努力将我的switftui逻辑转换为Flutter。有什么想法吗 struct TabBar: View { @Binding var selected : Int @State var
struct TabBar: View {
@Binding var selected : Int
@State var expand = true
var drag: some Gesture {
DragGesture()
.onChanged {_ in self.expand = false}
}
var body: some View {
HStack {
Spacer(minLength:0)
HStack{
if !self.expand{
Button(action: {
self.expand.toggle()
}) {
Image("appleLogo")
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 15, height: 15, alignment: .center)
.foregroundColor(.black)
.scaleEffect(2)
.padding()
}
}
else{
Button(action: {
self.selected = 0
}) {
ZStack {
Circle()
.frame(width: 40, height: 40)
.opacity(0)
Image(systemName: "house")
.foregroundColor(self.selected == 0 ? .black : Color("darkGray"))
.padding(.horizontal)
.scaleEffect(1.5)
}
}
Spacer(minLength:15)
Button(action: {
self.selected = 1
}) {
ZStack {
Circle()
.frame(width: 40, height: 40)
.opacity(0)
Image(systemName: "bubble.left")
.foregroundColor(self.selected == 1 ? .black : Color("darkGray"))
.padding(.horizontal)
.scaleEffect(1.5)
}
}
Spacer(minLength:15)
Button(action: {
self.selected = 2
}) {
ZStack {
Circle()
.frame(width: 40, height: 40)
.opacity(0)
Image(systemName: "plus.app")
.foregroundColor(self.selected == 2 ? .black : Color("darkGray"))
.padding(.horizontal)
.scaleEffect(1.5)
}
}
Spacer(minLength:15)
Button(action: {
self.selected = 3
}) {
ZStack {
Circle()
.frame(width: 40, height: 40)
.opacity(0)
Image(systemName: "cart")
.foregroundColor(self.selected == 3 ? .black : Color("darkGray"))
.padding(.horizontal)
.scaleEffect(1.5)
}
}
Spacer(minLength:15)
Button(action: {
self.selected = 4
}) {
ZStack {
Circle()
.frame(width: 40, height: 40)
.opacity(0)
Image(systemName: "person")
.foregroundColor(self.selected == 4 ? .black : Color("darkGray"))
.padding(.horizontal)
.scaleEffect(1.5)
}
}
}
}
.padding(.vertical,self.expand ? 8 : 6)
.padding(.horizontal,self.expand ? 20 : 6)
.background(VisualEffectView())
.background(Color("TabBarGray").opacity(0.3))
.opacity(self.expand ? 1.0 : 0.3)
.clipShape(Capsule())
.padding(30)
.onLongPressGesture {
self.expand.toggle()}
.gesture(drag)
.animation(.interactiveSpring(response:0.6, dampingFraction:0.6, blendDuration:0.6))
.frame(maxWidth: UIScreen.main.bounds.width,
maxHeight: UIScreen.main.bounds.height, alignment: .center)
}
}
}
打开
关闭我也不熟悉颤振,但一般来说我会 创建一个有状态的小部件来存储按钮栏的状态。然后将按钮栏创建为无状态小部件(使用容器(子:行(子…) 在有状态小部件中,您可以使用任何允许刷卡的东西(到目前为止还没有使用这个)包装无状态小部件的调用
容器(
子项:(展开的?显示栏():容器()),
)
显示无状态小部件类ShowBar或空容器我最终使用了一个有状态小部件和一个动画容器,在扩展条和关闭条之间进行更改。我还将测试您的解决方案,看看它会发生什么。谢谢!