Skip to content

Commit ee64d65

Browse files
ivanvorobeiivanvorobei
authored
Update searchable-swiftui.md
1 parent 35c10bc commit ee64d65

File tree

1 file changed

+58
-62
lines changed

1 file changed

+58
-62
lines changed

‎ru/tutorials/searchable-swiftui.md

Lines changed: 58 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,85 @@
1-
С появлением iOS 15 и SwiftUI 3 появилась возможность вызвать поисковый бар с помощь модификатора [.searchable()](https://developer.apple.com/documentation/swiftui/form/searchable(text:placement:)).
1+
Начиная с iOS 15 и SwiftUI 3 поисковый бар вызывается модификатором [.searchable()](https://developer.apple.com/documentation/swiftui/form/searchable(text:placement:)).
22

33
## Инициализация
44

55
Добавим модификатор `.searchable()` к `NavigationView()`:
66

77
```swift
88
struct ContentView: View {
9-
@State private var searchQuery: String = ""
10-
11-
var body: some View {
12-
NavigationView {
13-
Text("Поиск \(searchQuery)")
14-
.navigationTitle("Searchable Sample")
15-
.navigationBarTitleDisplayMode(.inline)
16-
17-
}
18-
.searchable(text: $searchQuery)
19-
}
9+
10+
@State private var searchQuery: String = ""
11+
12+
var body: some View {
13+
NavigationView {
14+
Text("Поиск \(searchQuery)")
15+
.navigationTitle("Searchable Sample")
16+
.navigationBarTitleDisplayMode(.inline)
17+
18+
}
19+
.searchable(text: $searchQuery)
20+
}
2021
}
2122
```
2223

2324
[Searchable init](https://cdn.ivanvorobei.by/websites/sparrowcode.io/searchable-swiftui/searchable_init.mov)
2425

25-
26-
Для изменения приглашения в поисковой строке добавим параметр `prompt`:
26+
Для изменения плейсхолдера в поисковой строке укажем `prompt`:
2727

2828
```swift
2929
.searchable(text: $searchQuery, prompt: "Нажмите для поиска…")
3030
```
3131

32-
3332
## Расположение
3433

35-
Инициализатор `searchable()` принимает `placement` в качестве одного из параметров. На выбор доступно четыре варианта: `automatic`, `navigationBarDrawer`, `sidebar` и `toolbar`. Обратите внимание, что этот параметр позволяет указать **предпочтительное** размещение. В зависимости от иерархии вью и платформы, размещение может не сработать:
34+
Инициализатор `searchable()` принимает `placement`. Есть четыре варианта: `automatic`, `navigationBarDrawer`, `sidebar` и `toolbar`. Параметр указывает **предпочтительное** размещение - в зависимости от иерархии вью и платформы, размещение может не сработать:
3635

3736
```swift
3837
struct PrimaryView: View {
39-
var body: some View {
40-
Text("Primary View")
41-
}
38+
39+
var body: some View {
40+
Text("Primary View")
41+
}
4242
}
4343

4444
struct SecondaryView: View {
45-
var body: some View {
46-
Text("Secondary View")
47-
}
45+
46+
var body: some View {
47+
Text("Secondary View")
48+
}
4849
}
4950

5051
struct ContentView: View {
51-
@State private var searchQuery: String = ""
52-
53-
var body: some View {
54-
NavigationView {
55-
PrimaryView()
56-
.navigationTitle("Primary")
57-
58-
SecondaryView()
59-
.navigationTitle("Secondary")
60-
.searchable(text: $searchQuery, placement: .navigationBarDrawer)
61-
}
62-
}
52+
53+
@State private var searchQuery: String = ""
54+
55+
var body: some View {
56+
NavigationView {
57+
PrimaryView()
58+
.navigationTitle("Primary")
59+
60+
SecondaryView()
61+
.navigationTitle("Secondary")
62+
.searchable(text: $searchQuery, placement: .navigationBarDrawer)
63+
}
64+
}
6365
}
6466
```
65-
В примере выше, мы применили модификатор к `SecondaryView()` и изменили расположение на `.navigationBarDrawer`.
66-
За это отвечает структура `SearchFieldPlacement()`. По умолчанию `placement` установлено в `.automatic`.
6767

68-
[Searchable placement](https://cdn.ivanvorobei.by/websites/sparrowcode.io/searchable-swiftui/searchable_placement.mov)
68+
Применили модификатор к `SecondaryView()` и изменили расположение на `.navigationBarDrawer`. За это отвечает структура `SearchFieldPlacement()`. По умолчанию `placement` установлено в `.automatic`.
6969

70+
[Searchable Placement](https://cdn.ivanvorobei.by/websites/sparrowcode.io/searchable-swiftui/searchable_placement.mov)
7071

7172
## Поиск
7273

73-
Рассмотрим как можно выполнить сам поиск и выдачу результата.
74-
Создадим приложение, показывающее список авторов статей, в котором пользователь может искать определенного автора.
75-
76-
Подготовим структуру:
74+
Сделаем поиск и выдачу результата. Создадим приложение, показывающее список авторов статей, в котором пользователь может найти определенного автора. Подготовим структуру:
7775

7876
```swift
7977
struct Author {
8078
let name: String
8179
}
8280

8381
extension Author: Identifiable {
82+
8483
var id: UUID { UUID() }
8584

8685
static let placeholder = [
@@ -92,10 +91,11 @@ extension Author: Identifiable {
9291
}
9392
```
9493

95-
Имеем одно проперти: `name` и массив данных: `placeholder`. Далее переходим в `ContentView()`:
94+
Имеем одно проперти `name` и массив данных `placeholder`. Перейдем в `ContentView()`:
9695

9796
```swift
9897
struct ContentView: View {
98+
9999
let authors: [Author] = Author.placeholder
100100
@State private var searchQuery: String = ""
101101

@@ -112,6 +112,7 @@ struct ContentView: View {
112112
}
113113

114114
extension ContentView {
115+
115116
var authorsResult: [Author] {
116117
guard searchQuery.isEmpty else {
117118
return authors.filter { $0.name.contains(searchQuery) }
@@ -121,20 +122,19 @@ extension ContentView {
121122
}
122123
```
123124

124-
[Searchable Author run](https://cdn.ivanvorobei.by/websites/sparrowcode.io/searchable-swiftui/searchable_author_run.mov)
125-
125+
[Searchable Author Run](https://cdn.ivanvorobei.by/websites/sparrowcode.io/searchable-swiftui/searchable_author_run.mov)
126126

127-
Создаем `NavigationView` и внутри него создаем `List`, который принимает массив авторов c фильтром:
127+
Создадим `NavigationView` с `List`, который принимает массив авторов и фильтрует его:
128128

129129
```swift
130130
authors.filter { $0.name.contains(searchQuery) }
131131
```
132-
По умолчанию поисковый бар появляется внутри списка и поэтому он скрыт. Необходимо потянуть список вниз, чтобы поле поиска появилось.
133-
В расширение нашей вью я вынес `authorsResult` проперти.
132+
133+
По умолчанию бар поиска появляется внутри списка - поэтому он скрыт. Чтобы поиск появился - скрольте список вниз. В расширение вью я вынес `authorsResult` проперти.
134134

135135
## Предполагаемые варианты (Suggestions)
136136

137-
Для более продвинутого использования, модификатор позволяет нам показывать список вариантов для наших авторов.
137+
Для продвинутого использования, модификатор позволяет нам показать список вариантов авторов.
138138

139139
```swift
140140
.searchable(text: $searchQuery, prompt: "Search author") {
@@ -147,12 +147,11 @@ authors.filter { $0.name.contains(searchQuery) }
147147

148148
[Searchable suggestions](https://cdn.ivanvorobei.by/websites/sparrowcode.io/searchable-swiftui/searchable_suggestions.mov)
149149

150-
151-
Параметр `suggestions` принимает `@ViewBuilder`, поэтому мы можем сделать кастомную View, а так же комбинировать варианты.
152-
Код текущего проекта:
150+
Параметр `suggestions` принимает `@ViewBuilder`, поэтому можно сделать кастомную View и комбинировать варианты. Код текущего проекта:
153151

154152
```swift
155153
struct ContentView: View {
154+
156155
let authors: [Author] = Author.placeholder
157156
@State private var searchQuery: String = ""
158157

@@ -173,6 +172,7 @@ struct ContentView: View {
173172
}
174173

175174
extension ContentView {
175+
176176
var authorsResult: [Author] {
177177
guard searchQuery.isEmpty else {
178178
return authors.filter { $0.name.contains(searchQuery) }
@@ -189,17 +189,15 @@ extension ContentView {
189189
}
190190
```
191191

192-
Обратите внимание, приложение упадет, если мы начнем вводить символы или цифры. Я оставил этот код умышленно, чтобы продемонстрировать комбинированные варианты поиска:
192+
Приложение упадет, если мы введем символы или цифры. Я оставил этот код, чтобы продемонстрировать комбинированные варианты поиска:
193193

194194
```swift
195195
.searchCompletion(authorsResult.first!.name)
196196
```
197197

198-
## Больше контроля
199-
200-
Если вам необходимо больше контроля, будь то отслеживание поисковых запросов, поиск в локальной базе данных и т.д., то вы можете использовать модификатор `.onSubmit(of: SubmitTriggers)`.
198+
## Кастомизация
201199

202-
`SubmitTriggers()` — тип, который определяет различные триггеры приводящие к выполнению действия. Доступно 2 проперти: `text` и `search`.
200+
Если вам нужно больше контроля, будь то отслеживание поисковых запросов, поиск в локальной базе данных и т.д., то используйте модификатор `.onSubmit(of: SubmitTriggers)`. Он определяет различные триггеры для старта действия. Доступно 2 проперти: `text` и `search`.
203201

204202
```swift
205203
.onSubmit(of: .search) {
@@ -215,24 +213,22 @@ extension ContentView {
215213
2. По нажатию ввода (`return`).
216214
3. По нажатию ввода (`return`) на физической клавиатуре.
217215

218-
219216
## Environment
220217

221218
Доступно 2 значения: `\.isSearching` и `\.dismissSearch`.
222219

223-
`isSearching` показывает, взаимодействует ли пользователь в данный момент с полем поиска.
224-
`dismissSearch` требует от системы завершить текущее взаимодействие с полем поиска.
220+
`isSearching` - взаимодействует ли пользователь в данный момент с полем поиска. `dismissSearch` требует от системы завершить текущее взаимодействие с полем поиска.
225221
Оба значения среды работают только в вью, где вызывается модификатор `.searchable()`:
226222

227-
228223
```swift
229224
struct ContentView: View {
225+
230226
@StateObject var viewModel = SearchViewModel()
231227
@Environment(\.isSearching) private var isSearching
232228
@Environment(\.dismissSearch) private var dismissSearch
233-
229+
234230
let query: String
235-
231+
236232
var body: some View {
237233
List(viewModel.repos) { repo in
238234
RepoView(repo: repo)

0 commit comments

Comments
 (0)