swiftui_swiftui工具栏

swiftui

Before SwiftUI 2, there was no way of creating a toolbar like in UIKit, so I decided to implement my own. It is available on GitHub as a Swift package called ToolbarSUI.

在SwiftUI 2之前，无法像在UIKit中那样创建工具栏，因此我决定实现自己的工具栏。 它可以在GitHub上作为称为ToolbarSUI的Swift软件包获得。

The main component of the package is a SwiftUI view called ToolbarView. Here is the code:

该软件包的主要组件是一个称为ToolbarView的SwiftUI视图。 这是代码：

//
//  ToolbarView.swift
//
//  Created by Keith Lander on 24/07/2020.
//  Copyright © 2020 Keith Lander. All rights reserved.
//

import SwiftUI


#if os(iOS) || targetEnvironment(macCatalyst)
public struct ToolbarView : View {
    @State private var selectedIndex = -1
    public let items: [ToolbarItem]
    public let action: (Int)->Void
    public var label: String?
    
    /// View Initialiser
    /// - Parameters:
    ///   - label: Test to appear on the left of the toolbar. Omit if not needed.
    ///   - items: An array of ToolbarItems. Each entry specifies a button.
    ///   - action: This is a closure that manages button presses. It has a single Int argument
    ///     with values in the range 0 to the number of buttons.
    public init(label: String? = nil, items: [ToolbarItem], action:@escaping (Int)->Void) {
        self.items = items
        self.action = action
        self.label = label
    }
    
    func itemView(at index: Int) -> some View {
        Button(action: {
            withAnimation { self.action(index) }
        }) {
            ToolbarItemView(selected: self.$selectedIndex,
                            index: index,
                            item: items[index])
        }.disabled(items[index].disabled)
    }
    
    public var body: some View {
        HStack(alignment: .bottom) {
            HStack(alignment: .center) {
                if label != nil {
                    Text(label!)
                        .foregroundColor(Color.gray)
                        .padding(EdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 0))
                }
                ForEach(0..<items.count) { index in
                    Spacer()
                    self.itemView(at: index)
                    Spacer()
                }
            }
        }
        .modifier(RectangleOverlay())
    }
}
#endif

As you can see, the view initialiser takes three arguments:

如您所见，视图初始化程序采用三个参数：

1. Text for a label to appear on the left of the toolbar. If you don’t want a label, leave this blank.
   标签的文本显示在工具栏的左侧。 如果您不想要标签，请将其留空。

2. An array of ToolbarItems.

   ToolbarItems的数组。

3. An action closure.
   动作关闭。

Here is an example of the view in use:

这是使用中的视图的示例：

ToolbarView(label:self.textFile.versionLabel(),
                        items:
                [ToolbarItem(icon: "chevron.left.circle",
                             title: "Show previous version",
                             disabled: self.textFile.atFirstVersion()),
                 ToolbarItem(icon: "chevron.right.circle",
                             title: "Show next version",
                             disabled: self.textFile.atLastVersion()),
                 ToolbarItem(icon: "plus.circle",
                             title: "Duplicate this version",
                             disabled: false),
                 ToolbarItem(icon: "trash.circle",
                             title: "Delete this version",
                             disabled: self.textFile.versions!.count <= 1)]
                )
            { (action) in
                if action == 0 {
                    self.textFile.changeVersion(by: -1)
                }
                else if action == 1 {
                    self.textFile.changeVersion(by: 1)
                }
                else {
                    self.textFile.perform(action)
                }
            }

Here is what it looks like:

看起来是这样的：

Photo by the author.

图片由作者提供。

Each button in the toolbar is defined by a ToolbarItem, as shown below:

工具栏中的每个按钮均由ToolbarItem定义，如下所示：

//
//  ToolbarItem.swift
//
//  Created by Keith Lander on 24/07/2020.
//  Copyright © 2020 Keith Lander. All rights reserved.
//

import SwiftUI


#if os(iOS) || targetEnvironment(macCatalyst)
public struct ToolbarItem {
    public let icon: Image
    public let title: String
    public let disabled:Bool
    
    public init(icon: Image,
                title: String,
                disabled: Bool){
        self.icon = icon
        self.title = title
        self.disabled = disabled
    }
    
    public init(icon: String,
                title: String,
                disabled: Bool) {
        self = ToolbarItem(icon: Image(systemName: icon),
                           title: title,
                           disabled: disabled)
    }
}
#endif

Each entry consists of three items:

每个条目包含三个项目：

1. The name of an image in SF Symbols.
   SF Symbols中图像的名称。
2. A title. This is not displayed but is there for accessibility purposes. It should be a good description of the button.
   一个标题。 这不会显示，但是可以访问。 它应该是按钮的良好描述。

3. A boolean value that determines the state of the button — true for active, false otherwise. As you can see, its value is changed whenever the view is updated.

   一个布尔值，它确定按钮的状态- true表示有效状态， false否则。 如您所见，只要更新视图，它的值就会更改。

Thanks for reading. I hope you find the package useful. If you have any problems, please post an issue on GitHub.

谢谢阅读。 我希望您觉得该软件包有用。 如果您有任何问题，请在GitHub上发布问题。

翻译自: https://medium.com/@keithlander/a-swiftui-toolbar-777523c03b7d

swiftui