我有一个大标题navigationbar和有一个自定义按钮旁边的这个navigationbar和tableview旁边的这个custombutton. but当我试图下拉导航栏它在custombutton重叠.我需要custombutton应该移动沿着与navigationbar当我拉下来.有人可以帮助这个吗?
我需要custombutton应该移动沿着与navigationbar当我拉下来。有人可以协助这一点吗?
tyg4sfes1#
如果你想让toolBar的内容在滚动时一直向下,你必须自定义它。默认情况下,它总是粘在navigationBar的顶部,只是view的内容与滚动行为一起。这样,这些图标在视觉上隐藏在ZStack内的navigationBar下。
toolBar
@Namespace private var scrollOffSet @State private var isChangeToInlineMode = false var body: some View { NavigationStack { ZStack { ScrollView { VStack { Spacer() .frame(height: 60) // <- fixed height to align center on `inline` mode. HStack { Image(systemName: "person.crop.circle") .padding(.leading) Spacer() HStack { Image(systemName: "ellipsis.circle") Spacer() .frame(width: 20) Image(systemName: "magnifyingglass") } .padding(.trailing) } .background { GeometryReader { let offSet = -$0.frame(in: .named(scrollOffSet)).origin.y Color.clear.preference(key: ViewOffsetKey.self, value: offSet) } } } } .coordinateSpace(name: scrollOffSet) .onPreferenceChange(ViewOffsetKey.self) { //Scroll up to 30 points to trigger if isChangeToInlineMode != ($0 < 30) { isChangeToInlineMode.toggle() } } } .toolbar { if !isChangeToInlineMode { //Toolbar default configuration here } } .edgesIgnoringSafeArea(.top) .navigationTitle("Jobs") } }
个字符
**更新:**使用自定义的PreferenceKey和Geometry读取器读取当前scrollView偏移量以切换模式。
(参考:Asperi answer)
的数据
1条答案
按热度按时间tyg4sfes1#
如果你想让
toolBar
的内容在滚动时一直向下,你必须自定义它。默认情况下,它总是粘在navigationBar的顶部,只是view的内容与滚动行为一起。这样,这些图标在视觉上隐藏在ZStack内的navigationBar下。个字符
**更新:**使用自定义的PreferenceKey和Geometry读取器读取当前scrollView偏移量以切换模式。
(参考:Asperi answer)
的数据