我将如何在 Flutter 中编写此标签栏？

Question

我有一些使用 Swift 的经验UI，这段代码是我前段时间写的。我目前正在学习如何使用 Flutter 构建 UI。我将如何编写代码？它是一个浮动的标签栏，可以通过滑动来打开和关闭。

这基本上是一个圆角矩形 HStack，里面有 5 个按钮，如果滑动或长按它可以动画成一个按钮。几天前我刚刚开始使用 Flutter，但我仍在努力将我的 SwiftUI 逻辑转换为 Flutter。有什么想法吗？


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)
                }
            }
        }

打开

关闭

Answer 1

我也是 Flutter 的新手，但总的来说我会创建一个有状态的小部件来存储按钮栏的状态。然后将按钮栏创建为无状态小部件（使用 Container(child:Row(children...)

在有状态小部件中，您将无状态小部件的调用与启用滑动的任何内容包装在一起（到目前为止还没有使用过）。在那里你会有类似 setState(() {expanded = !expanded}) 的东西，你可能会用类似

的东西调用无状态小部件

Container(
  child: (expanded ? ShowBar() : Container()),
  )

在其中显示无状态小部件 class ShowBar 或空容器

我将如何在 Flutter 中编写此标签栏？

How would I code this Tab Bar in Flutter?

swift

flutter

flutter-layout

flutter-animation

swiftui