Исправлен вид над списком в навигационном представлении

#swift #swiftui

#swift #swiftui

Вопрос:

Как мне получить фиксированный (без прокрутки) вид над представлением списка в NavigationView в SwiftUI?

введите описание изображения здесь
введите описание изображения здесь

На первом рисунке показано, чего я пытаюсь достичь / достичь до сих пор. Однако на втором рисунке показано, что произойдет, если я потяну вниз, заголовок скользит над фиксированным содержимым.

Используя смещение в списке и ZStack, я приблизился, но заголовок NavigationView продолжает прокручиваться над фиксированным видом при нажатии на список.

Хотя я думал, что это более общий вопрос, чтобы не рисковать, что этот вопрос будет закрыт, вот код, который у меня есть:

     NavigationView {
    
    ZStack{
        List {
            /* .. */
        }
        .listStyle(PlainListStyle())
        .offset(x: 0, y: showFilter ? 100 : 0)
        
        if showFilter {
            VStack {
                HStack {
                    Button(action: {
                        
                    }, label: {
                        Text("Button")
                    })
                    .padding(5)
                    .background(Color(red: 238/255, green: 238/255, blue: 239/255))
                    .cornerRadius(5)
                    .padding()
                    
                    Spacer()
                }
                Spacer()
            }
        }
    }
    .navigationBarItems(trailing:
        Button(action: {
            // initial
            self.showFilter.toggle()
            
            // completely different, odd behaviour (navigation title never fades away)
            // withAnimation{ self.showFilter.toggle() }
        }) {
            Image(systemName: "line.horizontal.3.decrease.circle")
        }
    )
    .navigationBarTitle("List")
}
  

Комментарии:

1. Вы бы показали, что ваш код должен быть исправлен, иначе вы можете получить не то, что ожидаете?

2. Я добавил свой код выше и изображения twi, показывающие желаемый результат и проблему при опускании. Я думаю, что эта проблема не так сильно связана с кодом, который у меня есть, разве это не считается чем-то более общим? Я думал, что это может быть что-то вроде basic, но вместо этого, похоже, это сильно мешает списку и панели навигации.

3. Также, если вы попробуете это сами, обратите внимание, что при добавлении withAnimation вокруг свойства showFilter state поведение полностью меняется. В этом случае прокрутка будет происходить только в виде списка, заголовок навигации больше не будет уменьшаться.

Ответ №1:

Смещение здесь является слабым подходом, потому что пользователь не увидит последние строки в списке при отображении фильтра, а элементы больше, чем область экрана.

Вы можете рассмотреть вариант с разделом в качестве заполнителя (он липкий и не перекрывается заголовком) для фильтра (возможно, с каким-то пользовательским стилем для кнопок), поэтому простая демонстрация, основанная на вашем снимке кода, выглядит так, как показано ниже.

Протестировано с Xcode 12 / iOS 14

демо1 demo2

 NavigationView {
    List {
        Section(header: Group {
            if showFilter {
                VStack {
                    HStack {
                        Button(action: {
                            
                        }, label: {
                            Text("Button")
                        })
                        .padding(5)
                        .background(Color(red: 238/255, green: 238/255, blue: 239/255))
                        .cornerRadius(5)
                        .padding()
                        
                        Spacer()
                    }
                    Spacer()
                }
            }
        }) {
            ForEach(0..<20) { i in
                Text("Item (i)")
            }
        }}
        .listStyle(PlainListStyle())
  

Комментарии:

1. Это креативно! Поведение sticky идеально, но оно прерывается при добавлении withAnimation в свойство showFilter. Весь список анимируется, чтобы исчезнуть с правой стороны. Есть ли способ предотвратить это? Такое ощущение, что он работает с SwiftUI, и, таким образом, поддержка анимации подключается. Или это просто гайка, поддерживаемая в этом раннем возрасте, и обходные пути являются лучшим компромиссом?

Ответ №2:

Не уверен, что я понял вашу проблему, не могли бы вы поделиться gif / видео с проблемой в действии?

В любом случае вы можете попробовать поместить список и фиксированный вид в один и тот же ZStack, поместить список перед фиксированным видом и присвоить фиксированному виду атрибут позиции.

Если ZStack находится внутри NavigationView, это не должно влиять на фиксированный вид.

Sudo-код будет примерно таким —

 NavigationView {
   ZStack {
      List ...
 
      FixedView()
        .position(x: 100, y: 100)
   }
}
  

Если этого было недостаточно, вы можете ознакомиться с руководством Пола Хадсона по абсолютному позиционированию здесь .

И для получения дополнительной помощи, пожалуйста, опубликуйте свой код и предоставьте нам демонстрацию видео / gif, чтобы мы могли понять вашу проблему и протестировать ее заранее 🙂

Комментарии:

1. Это в основном то, к чему я приблизился, но разве это не покроет содержимое списка?

2. Нет, я имею в виду, что список начинается ниже, и я думаю, что мои проблемы вызваны установкой смещения для представления списка. Также у меня проблема с заголовком навигации, переходящим в фиксированный вид, что также делает все это способом взлома imo.