maustinstar / swiftui-drawer Goto Github PK
View Code? Open in Web Editor NEWA SwiftUI bottom-up controller, like in the Maps app. Drag to expand or minimize.
License: MIT License
A SwiftUI bottom-up controller, like in the Maps app. Drag to expand or minimize.
License: MIT License
This is probably something I'm doing wrong rather than an issue but whatever height I set the drawer to, the content behind it is offset by that amount.
ZStack(alignment: .top){ SomeView() Drawer(heights: [100, 200]) { Color.blue } }.edgesIgnoringSafeArea(.vertical)
SomeView()
will then be offset by 200
I am receiving the following error
Cannot convert value of type '[Int]' to expected argument type 'Binding<[CGFloat]>'
Hello,
is there a way to change the position of the drawer when the keyboard appears ?
I have a search bar on the drawer and when I click in it, the keyboard covers the drawer.
This is my Code:
I would like to use the ".onTapGesture" to bring the drawer to the top position...
Sorry, I'm still a noob with Swift and I am just learning it now. ๐ค
I'd like to be able to programmatically set the height of the drawer.
I'd also like to be able to set whether or not the drawer can be moved.. without disabling everything within the drawer.
A searchBar textField is tapped, then the drawer is set to the mid or high resting point (Animated).
The drawer is not able to be moved while the user is searching for something.
This can be done with a binding variable "currentHeight" or possibly a closure?
Maybe have a isDrawerMoveable variable? To disable gestures.
Hello,
I added the onDrag modifier to my drawer so that I could animate the image I have that is used to pull up and down the drawer, but it look like onAppear is not called.
What would be the best way to ue you package and animate the drawer image?
Use Case
Allows dismissal via a physical click of a cancel/save button
Code Implementation
Following SwiftUI declarative syntax, the method header (based on syntax of View.disabled):
public func locked(_ locked: Bool) -> Drawer<Content>
And the ideal use of the implementation could look like:
struct ContentView: View {
@State var drawerLocked: Bool
var body: some View {
Drawer(heights: [100, 340]) {
Color.blue
}.locked(drawerLocked)
}
}
UI Implementation
When locked, the view should not change its resting height when dragged.
The trivial solution is to disable the drag altogether. A more elegant design I propose is for the drawer to react as a stiff spring that only springs up and down a few pixels when attempted to drag. This already happens when you attempt to pull the drawer past the maximum height (see Drawer.springHeight
).
Reasoning: Disabling the gesture altogether might seem unresponsive and could possibly frustrate a user. Using a hard-spring reaction will better convey interactivity that is purposely disabled.
Suggested by u/pupdogg007
Issue
The title might be a bit ambiguous, but using version 0.1.0 I just can not get the drawer to work or appear at all. Downgrading to 0.0.3 makes all my drawers work again. Not sure whether I missed something obvious, but this can be easily reproduced:
Steps to reproduce
import Drawer
to ContentView.swiftHow to make drawer can display on tabbar.
If use ZStack in tabbar. It seems to make tabbar's codes be heavy. And we have to use @environmentObject to handle the status(isPresent).
How about your idea?
I want my drawer heights (resting points) to be, [100, vStackHeight], so instead of giving it a constant number, i want the second resting height to be the height of the VStack
, but I couldn't achieve it even when wrapping the VStack
with GeometryReader
, since the GeometryReader
takes the the size of its parent (the ZStack
), any idea how to achieve this behaviour?
@State var drawerHeights: [CGFloat] = [100, 200]
var body: some View {
Drawer(heights: $drawerHeights) {
ZStack(alignment: .top) {
RoundedRectangle(cornerRadius: 24)
.foregroundColor(.white100)
.shadow(radius: 10)
VStack(spacing: 0) {
Spacer().frame(height: 40)
.background(Color.yellow)
Text("How it works")
.textStyle(.headlinePrimaryCenter)
Spacer().frame(height: 40)
Text("How it works")
.textStyle(.headlinePrimaryCenter)
Text("How it works")
.textStyle(.headlinePrimaryCenter)
Text("How it works")
.textStyle(.headlinePrimaryCenter)
Text("How it works")
.textStyle(.headlinePrimaryCenter)
Text("How it works3")
.textStyle(.headlinePrimaryCenter)
Text("How it works4")
.textStyle(.headlinePrimaryCenter)
}
}
}
.edgesIgnoringSafeArea(.vertical)
}
Basically I want the drawer second height (rest) to be dynamic and computed based on its children's height.
Problem
When a ScrollView
is embedded in the drawer, drags within the scroll view are used as scrolls and do not move the drawer. The current workaround is to have a larger "grabable" area at the top of the drawer.
Ideal Solution
When using the maps app, there is a velocity threshold. Drags below the threshold are interpreted as scrolls, while faster drags are used to move the drawer.
Suggested by u/ms4324
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.