。

筛选视图将由两个独立的筛选选项组成#xff0c;两者都有一些可选项可供选择。

但是#xff0c;在使用

UIKit

实现时可以尝试通过一些酷炫的筛选器扩展该项目以缩小结果列表。

筛选视图将由两个独立的筛选选项组成两者都有一些可选项可供选择。

但是在使用

UIKit

选择器的最重要部分是可以通过该视图组件选择一些所需的选项。

因此首先创建一个

Selectable

协议。

所有符合该协议的对象必须实现两个属性displayedName在选择器中显示的名称和

isSelected一个布尔值指示特定选项是否已选择。

此外为了能够通过映射字符串值数组创建

Selectable

不仅是创建灵活的选择器的实现还要尽量使其可自定义。

因此将使用符合

Selectable

FlexiblePicker这样以后更容易重用该组件因为它将是独立于类型的。

在实现选择器本身之前可以列出所有可自定义属性。

接下来创建用于计算特定字符串值的宽度和高度的字符串扩展。

由于允许更改字体大小和权重因此先前提到的两个扩展都以由灵活选择器使用的

UIFont

的实现了。

首先需要一个函数来计算并返回输入数据的所有宽度通过将所有输入值映射到元组中其中包含输入值和自身的宽度来完成。

在映射中使用

reduce

函数来总结与给定输入值相关联的所有宽度文本宽度、边框宽度、文本填充和间距。

private

selectableType.displayedName.getWidth(with:

font)let

}现在计算宽度的函数已经准备好可以遍历所有输入数据并将它们分成单独的数组每个数组包含能够适应同一

HStack

设置为仅由当前元素组成的数组不能适应上一行的元素并通过减去当前项的宽度来更新

HStack

在遍历所有元素之后必须处理特定的边缘情况。

singleLineResult

allLinesResult

{singleLineResult.append(selectableType)singleLineWidth

width}

{allLinesResult.append(singleLineResult)singleLineResult

[selectableType]singleLineWidth

lineWidth

}allLinesResult.append(singleLineResult)return

allLinesResult

data.first?.first?.displayedName.getHeight(with:

font)

最后当所有逻辑准备好后需要实现一个视图主体。

如之前所提到的视图将使用嵌套的

ForEach

协议或者应该具有唯一的标识符。

这就是为什么将分隔行的结果映射到元组中其中包含每行和

UUID

{ForEach(divideDataIntoLines(lineWidth:

geo.size.width).map

{Text(data.displayedName).lineLimit(1).foregroundColor(textColor).font(.system(size:

fontSize,

fontWeight.swiftUIFontWeight)).padding(textPadding)}.background(data.isSelected?

notSelectedColor.opacity(0.5)).cornerRadius(10).disabled(!isSelectable).overlay(RoundedRectangle(cornerRadius:

lineWidth:

borderWidth))}}}}}.frame(width:

geo.size.width,

}几乎所有都已经完成只需添加一个函数来处理与按钮的用户交互该函数只需切换特定数据的

isSelected

}inputData[index].isSelected.toggle()

}其余的代码很简单主要是配置所有属性如字体、颜色或边框。

此外在

VStack

构建一个灵活的选择器FlexiblePicker用于选择多个选项。

首先创建了一个

Selectable

属性。

然后详细介绍了实现该选择器的逻辑包括如何处理选项的布局、宽度和高度以及如何处理用户与按钮的交互。

最后提供了一个简单的视图实现可以在

SwiftUI