SwiftUI如何从一个详情页跳转到另一个详情页return到列表页?
How to jump from one detail page to another and return to the list page in SwiftUI?
当我使用“下一篇文章”按钮跳转到索引为3的文章详情页面时,我想直接返回文章列表页面而不是索引为文章详情页面2.I试过了搜索到return到指定页面并销毁页面的方法,但是我在swiftui中没有找到them.How实现这个效果?Thanks.I猜想其他的也会出现同样的场景移动开发,对吧?
ArticleListView 是:
struct ArticleListView: View {
@EnvironmentObject var modelData:ModelData
var body: some View {
NavigationView{
List{
ForEach(modelData.articleList){ article in
NavigationLink(destination:ArticleDetail(index:article.index)){
ArticleItem(index:article.index);
}
}
}
.listStyle(PlainListStyle())
}
}
}
文章详情是这样的:
struct ArticleDetail: View {
@EnvironmentObject var modelData:ModelData
var index:Int
var body: some View {
VStack{
Text(modelData.articleList[index].htmlText)
NavigationLink(destination:ArticleDetail(index:self.index+1)){
Text("next article")
}
}
}
}
Article/ArticleItemView/ModelData是这样的:
struct Article:Identifiable{
var id = UUID()
var index:Int
var htmlText:String
}
struct ArticleItem: View {
@EnvironmentObject var modelData:ModelData
var index:Int
var body: some View {
Text(modelData.articleList[index].htmlText)
}
}
final class ModelData:ObservableObject {
@Published var articleList = [Article(index:0,htmlText: "first test text "),Article(index:1,htmlText: "second test text"),Article(index:2,htmlText: "third test text")]
}
此解决方案存在一些潜在的可扩展性问题,但它完成了基本工作:
struct Article {
var id = UUID()
}
struct ContentView: View {
var articles = [Article(), Article(), Article(), Article()]
@State private var activeId : UUID?
func activeBinding(id: UUID) -> Binding<Bool> {
.init { () -> Bool in
activeId == id
} set: { (newValue) in
activeId = newValue ? id : nil
}
}
var body: some View {
NavigationView {
VStack(alignment: .leading, spacing: 20) {
ForEach(articles, id: \.id) { article in
NavigationLink(destination: ArticleView(article: article,
articles: articles,
popToTop: { activeId = nil }),
isActive: activeBinding(id: article.id)) {
Text("Link to article: \(article.id)")
}
}
}
}
}
}
struct ArticleView : View {
var article : Article
var articles : [Article]
var popToTop: () -> Void
var body : some View {
VStack(alignment: .leading, spacing: 20) {
Text("Current: \(article.id)")
Button("Pop") {
popToTop()
}
ForEach(articles, id: \.id) { listArticle in
NavigationLink(destination: ArticleView(article: article, articles: articles, popToTop: popToTop)) {
Text("Link to article: \(listArticle.id)")
}
}
}
}
}
在主页上,顶级文章 ID 存储在 @State
变量中。这与顶级 link 上的 isActive
属性 的自定义绑定相关联。基本上,当文章处于活动状态时,link 出现,当 activeId
为 nil 时,link 变为非活动状态,并弹出到顶部。
因为这是顶层视图,所以如果顶层 NavigationLink
处于非活动状态,堆栈中较低的任何视图都将被弹出。
popToTop
是一个传递给后续文章视图并在按下“弹出”按钮时调用的函数。
当我使用“下一篇文章”按钮跳转到索引为3的文章详情页面时,我想直接返回文章列表页面而不是索引为文章详情页面2.I试过了搜索到return到指定页面并销毁页面的方法,但是我在swiftui中没有找到them.How实现这个效果?Thanks.I猜想其他的也会出现同样的场景移动开发,对吧? ArticleListView 是:
struct ArticleListView: View {
@EnvironmentObject var modelData:ModelData
var body: some View {
NavigationView{
List{
ForEach(modelData.articleList){ article in
NavigationLink(destination:ArticleDetail(index:article.index)){
ArticleItem(index:article.index);
}
}
}
.listStyle(PlainListStyle())
}
}
}
文章详情是这样的:
struct ArticleDetail: View {
@EnvironmentObject var modelData:ModelData
var index:Int
var body: some View {
VStack{
Text(modelData.articleList[index].htmlText)
NavigationLink(destination:ArticleDetail(index:self.index+1)){
Text("next article")
}
}
}
}
Article/ArticleItemView/ModelData是这样的:
struct Article:Identifiable{
var id = UUID()
var index:Int
var htmlText:String
}
struct ArticleItem: View {
@EnvironmentObject var modelData:ModelData
var index:Int
var body: some View {
Text(modelData.articleList[index].htmlText)
}
}
final class ModelData:ObservableObject {
@Published var articleList = [Article(index:0,htmlText: "first test text "),Article(index:1,htmlText: "second test text"),Article(index:2,htmlText: "third test text")]
}
此解决方案存在一些潜在的可扩展性问题,但它完成了基本工作:
struct Article {
var id = UUID()
}
struct ContentView: View {
var articles = [Article(), Article(), Article(), Article()]
@State private var activeId : UUID?
func activeBinding(id: UUID) -> Binding<Bool> {
.init { () -> Bool in
activeId == id
} set: { (newValue) in
activeId = newValue ? id : nil
}
}
var body: some View {
NavigationView {
VStack(alignment: .leading, spacing: 20) {
ForEach(articles, id: \.id) { article in
NavigationLink(destination: ArticleView(article: article,
articles: articles,
popToTop: { activeId = nil }),
isActive: activeBinding(id: article.id)) {
Text("Link to article: \(article.id)")
}
}
}
}
}
}
struct ArticleView : View {
var article : Article
var articles : [Article]
var popToTop: () -> Void
var body : some View {
VStack(alignment: .leading, spacing: 20) {
Text("Current: \(article.id)")
Button("Pop") {
popToTop()
}
ForEach(articles, id: \.id) { listArticle in
NavigationLink(destination: ArticleView(article: article, articles: articles, popToTop: popToTop)) {
Text("Link to article: \(listArticle.id)")
}
}
}
}
}
在主页上,顶级文章 ID 存储在 @State
变量中。这与顶级 link 上的 isActive
属性 的自定义绑定相关联。基本上,当文章处于活动状态时,link 出现,当 activeId
为 nil 时,link 变为非活动状态,并弹出到顶部。
因为这是顶层视图,所以如果顶层 NavigationLink
处于非活动状态,堆栈中较低的任何视图都将被弹出。
popToTop
是一个传递给后续文章视图并在按下“弹出”按钮时调用的函数。