SUIBottomSheet 0.1.1

SUIBottomSheet 0.1.1

×

由Zain Nadeem维护。

SUIBottomSheet 0.1.1

  • 作者：
  • Zain Nadeem

SUIBottomSheet

Version License Platform

入门

要求

  • iOS 13.0+
  • Xcode 11
  • Swift 5

安装

CocoaPods

您可以使用 CocoaPods 通过将其添加到您的 Podfile 中来安装 SUIBottomSheet

platform :ios, '13.0'
use_frameworks!
pod 'SUIBottomSheet'

实现

BottomSheetView 使用 BottomSheetOptions 类进行初始化，通过这个类可以填充可自定义的信息。创建一个 @ObservedObject BottomSheetOptions 类来管理 BottomSheetView。您可以用参数初始化它，或者允许它使用默认参数进行填充。

struct ContentView: View {

    @ObservedObject var options: BottomSheetOptions = BottomSheetOptions()
    
    var body: some View {
 
    } 
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

添加 ZStack

将 ZStack 添加到您的视图体中，这样 bottomSheet 就可以显示在您创建的任何视图之上。

struct ContentView: View {

    @ObservedObject var options: BottomSheetOptions = BottomSheetOptions()
   
    var body: some View {
          ZStack {
   
        }
    }

实现切换

选项类具有切换底部面板的能力。让我们添加一个简单的按钮来显示和隐藏底部面板。

struct ContentView: View {

    @ObservedObject var options: BottomSheetOptions = BottomSheetOptions()
    var body: some View {
          ZStack {
            Button(action: {
                self.options.toggleSheet()
            }) {
                Text("Test BottomSheet")
            }
        }
    }

添加 BottomSheetView

最后，将我们的 bottomSheet 与 bottomSheetOption 添加到 ZStack 的顶部。

struct ContentView: View {

    @ObservedObject var options: BottomSheetOptions = BottomSheetOptions()
    
    var body: some View {
          ZStack {
            Button(action: {
                self.options.toggleSheet()
            }) {
                Text("Test BottomSheet")
            }
            BottomSheetView(options: self._options)
        }
    }

使用参数初始化 BottomSheetOptions

您可以在任何时候自定义属性，并利用 SwiftUI 的 @ObservableObjects、@State、@Binding 功能，它们将立即在底部面板上更新。现在让我们使用一些自定义参数来初始化 bottomSheetOptions。

struct ContentView: View {

    @ObservedObject var options: BottomSheetOptions = BottomSheetOptions(indicatorColor: .blue, title: "Oscar Wilde", titleColor: .black, subtitle: "Intentions", subtitleColor: Color(UIColor.darkGray), bodyText: "Cyril (coming in through the open window from the terrace).  My dear Vivian...")
   
    var body: some View {
          ZStack {
            Button(action: {
                self.options.toggleSheet()
            }) {
                Text("Test BottomSheet")
            }
            BottomSheetView(options: self._options)
        }
    }

可自定义属性

  • indicatorColor: Color
  • title: String
  • titleColor: Color
  • subtitle: String
  • subtitleColor: Color
  • bodyText: String
  • bodyTextColor: Color
  • backgroundColor: Color
  • scrollViewColors: [Color]
  • dismissAccentColor: Color

监听状态变化

选项类包含一个可访问的参数，名为sheetState。检查此参数并根据需要更新您的视图。让我们添加一个函数，每次底栏状态发生变化时，都会更新主视图的背景。

struct ContentView: View {

    @ObservedObject var options: BottomSheetOptions = BottomSheetOptions(indicatorColor: .blue, title: "Oscar Wilde", titleColor: .black, subtitle: "Intentions", subtitleColor: Color(UIColor.darkGray), bodyText: "Cyril (coming in through the open window from the terrace).  My dear Vivian...")
    
    var body: some View {
          ZStack {
            Button(action: {
                self.options.toggleSheet()
            }) {
                Text("Test BottomSheet")
            }
            BottomSheetView(options: self._options)
        }
    }

      private func updateBackgroundColor()->Color{
        switch options.sheetState {
            case .dismissed:
            return .white
            case .collapsed:
            return .blue
            case .expanded:
            return .orange
        }
    }

读取更改后更新视图

确保您使用updateBackgroundColor()设置ZStack背景颜色，如下所示

    var body: some View {
          ZStack {
            Button(action: {
                self.options.toggleSheet()
            }) {
                Text("Test BottomSheet")
            }
            BottomSheetView(options: self._options)
        
        }.background(updateBackgroundColor())
    }

作者

扎因·纳迪姆，[email protected]

许可

SUIBottomSheet根据MIT许可证提供。有关更多信息，请参阅LICENSE文件。