0
164
ViewsBarra de pestañas personalizada con número variable de pestañas en SwiftUI
Estoy tratando de replicar la barra de pestañas en la versión iPad de Safari, que se ve así:
(¿Hay una biblioteca de terceros que haga esto? No puedo encontrar ninguna)
Estoy usando el código de abajo. Lo que resulta en esto:
Supongo que necesito convertir las vistas en matrices de alguna manera y tener un botón (en la pestaña o página) para agregar y eliminar pestañas. ¿Alguna idea de cómo hacer esto?
import SwiftUI struct TabLabel : View { var text : String var imageName : String var color : Color var body : some View { VStack() { Image(systemName: imageName) Text(text).font(.caption) }.foregroundColor(color) } } struct TabButton : View { @Binding var currentSelection : Int var selectionIndex : Int var label : TabLabel var body : some View { Button(action: { self.currentSelection = self.selectionIndex }) { label }.opacity(selectionIndex == currentSelection ? 0.5 : 1.0) } } struct CustomTabBarView<SomeView1 : View, SomeView2 : View, SomeView3 : View> : View { var view1 : SomeView1 var view2 : SomeView2 var view3 : SomeView3 @State var currentSelection : Int = 1 var body : some View { let label1 = TabLabel(text: "First", imageName: "1.square.fill", color: Color.red) let label2 = TabLabel(text: "Second", imageName: "2.square.fill", color: Color.purple) let label3 = TabLabel(text: "Third", imageName: "3.square.fill", color: Color.blue) let button1 = TabButton(currentSelection: $currentSelection, selectionIndex: 1, label: label1) let button2 = TabButton(currentSelection: $currentSelection, selectionIndex: 2, label: label2) let button3 = TabButton(currentSelection: $currentSelection, selectionIndex: 3, label: label3) return VStack() { HStack() { button1 Spacer() button2 Spacer() button3 }.padding(.horizontal, 48) .frame(height: 48.0) .background(Color(UIColor.systemGroupedBackground)) Spacer() if currentSelection == 1 { view1 } else if currentSelection == 2 { view2 } else if currentSelection == 3 { view3 } Spacer() } } } struct ContentView: View { @State private var showGreeting = true var body: some View { let view1 = VStack() { Text("The First Tab").font(.headline) Image(systemName: "triangle").resizable().aspectRatio(contentMode: .fit).frame(width: 100) } let view2 = Text("Another Tab").font(.headline) let view3 = Text("The Final Tab").font(.headline) return CustomTabBarView(view1: view1, view2: view2, view3: view3) } } struct ContentView_Previews: PreviewProvider { static var previews: some View { ContentView() } }1 answers
Answer question0
Como muchos problemas con SwiftUI, esto parece demasiado complejo porque está mezclando el concepto de estado con la forma en que se dibuja ese estado en la pantalla.
Quitando las imágenes por un momento, lo que tienes en términos de datos es:
- una colección ordenada de páginas, cada una con un título y una imagen
- un concepto de qué página de esa colección está activa
(Tenga en cuenta que las llamo 'páginas' aquí para tratar de separarlas de la representación visual como pestañas).
También tiene algunas acciones que alterarán esos datos:
- su usuario puede elegir qué página debe ser la activa
- pueden agregar una nueva página a la colección
- pueden eliminar una página existente de la colección
Ahora, si piensa en esos pequeños pasos como su modelo de datos, puede construir un objeto u objetos que lo encapsulen limpiamente.
Luego, puede continuar para determinar cómo SwiftUI representa esos datos y cómo podría incluir los activadores de acción. Por ejemplo:
- Una lista de pestañas horizontales recorre la colección ordenada de páginas y representa cada una
- Cada pestaña tiene una acción de botón que, cuando se toca, establece que ese botón sea el activo
- Cada pestaña tiene un botón de cierre que, cuando se toca, la elimina de la colección de páginas.
- Un botón separado, cuando se toca, puede agregar una nueva página a la colección
Y así. Con suerte, puede ver que cada vista en SwiftUI ahora tendría un propósito específico y debería ser más fácil para usted pensar en ello.
E incluso puede optar por una interfaz de usuario diferente: puede enumerar sus páginas verticalmente en una List , por ejemplo, o en una cuadrícula como la vista de página de Safari del iPhone. Pero incluso si lo hiciera, sus datos subyacentes no cambiarían.