如何解决SwiftUI卡视图-用于媒体播放器?
所以我在考虑如何在主SwiftUI中创建上下拖动视图。基本上是我正在考虑做的事情-但如果我在正确的轨道上,则需要一些建议。
第1步)
- MediaPlayer.Swift 像这样:在其中有卡片视图:
@State private var tapped: Bool = false
var body: some view {
Card(tapped: self.tapped)
.gestured(TapGesture(count: 1)
.onEnded({() in
self.tapped.toggle()
})
)
}
}
我所看到的问题是,这不一定是正确的方法(上下滑动视图)?
然后我将该视图包含在主视图中-其中包含其他视图,例如电台和播客。
我唯一看到的问题如下:
- 将命令发送到媒体播放器视图以更改电台或播放播客,我需要它向上滑动媒体播放器视图然后运行命令。
struct ContentView: View {
@Environment(\.horizontalSizeClass) var horizontalSizeClass: UserInterfaceSizeClass?
var body: some View {
if horizontalSizeClass == .compact {
return Text("Compact")
} else {
return Text("Regular")
}
}
}
更新:
所以看完https://developer.apple.com/videos/play/wwdc2019/808/之后(强烈推荐)。
我发现它叫张纸-谁知道大声笑。
所以我已经在代码中实现了它,但是当他们滑下来时如何保持工作表可见。 (例如仅说80px)
这是我添加的代码。 (请注意,我已经包含了完整视图,因此我们所有人都可以看到代码-该项目将开源并放在github.com上,以供任何人使用。-完成编码后。)
struct ContentView: View {
@State var showingDetail = false
@State var stations: [Station] = []
@State var posts: [Program] = []
var body: some View {
NavigationView {
if posts.isEmpty {
Text("Loading")
} else {
vstack(alignment: .leading){
//STATIONS
Text("Our Stations")
.linespacing(30)
.padding(5)
.font(.system(size: 30,weight: .heavy,design: .default))
ScrollView(.horizontal,showsIndicators: false) {
HStack(alignment: .bottom,spacing: 10) {
ForEach(stations) { station in
//return
Button(action: {
self.showingDetail.toggle()
}) {
RemoteImage(type: .url(URL(string:station.imageurl)!),errorView: { error in
Text(error.localizedDescription)
},imageView: { image in
image
.resizable()
.renderingMode(.original)
/* .clipShape(Circle())
.shadow(radius: 10)
.overlay(Circle().stroke(Color.red,linewidth: 5))*/
.aspectRatio(contentMode: .fit)
.frame(width:200,height:200)
},loadingView: {
Text("Loading ...")
})
.sheet(isPresented: self.$showingDetail) {
MediaPlayerView()
}
}
}
}.frame(height: 200)
}.frame(height: 200)
Divider()
//podcast
Text("Our Shows")
.linespacing(30)
.padding(5)
.font(.system(size: 30,showsIndicators: false) {
HStack(alignment: .bottom,spacing: 10) {
ForEach(posts) { post in
//return
NavigationLink(destination: podcasts(post: post)){
RemoteImage(type: .url(URL(string:post.icon)!),errorView: { error in
Text(error.localizedDescription)
},imageView: { image in
image
.resizable()
.renderingMode(.original)
/* .clipShape(Circle())
.shadow(radius: 10)
.overlay(Circle().stroke(Color.red,linewidth: 5))*/
.aspectRatio(contentMode: .fit)
.frame(width:200,height:200)
},loadingView: {
Text("Loading ...")
})
}
}
}.frame(height: 200)
}.frame(height: 200)
}
}
}.onAppear {
Api().getPosts { (posts) in
self.posts = posts
}
Api().getStations { (stations) in
self.stations = stations
}
}.navigationBarTitle(Text("Home"))
}
}
推送到工作表的主要代码。
Button(action: {
self.showingDetail.toggle()
}) {
RemoteImage(type: .url(URL(string:station.imageurl)!),loadingView: {
Text("Loading ...")
})
.sheet(isPresented: self.$showingDetail) {
MediaPlayerView()
}
struct MediaPlayerView: View {
var body: some View {
Text(/*@START_MENU_TOKEN@*/"Hello,World!"/*@END_MENU_TOKEN@*/)
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。