一緒に書く習慣を身につけましょう！「ナゲッツデイリーニュープラン・4月アップデートチャレンジ」に参加して13日目です。クリックしてイベントの詳細をご覧ください。
序文：理由もなくコンピューターが2回クラッシュします。これは、UIで作業しているときにコードや記事を書いたことが原因である可能性がありますが、コンピューターで一生懸命働いています。幸いなことに、記事はリアルタイムで保存されており、開くたびに元の文章が残っているので、私は死ぬほど怖がっています。コードワードに固執し、更新に固執します。今日は毎日の更新の13日目です、さあ！
今日の言葉：誰かのために書いてください。
この章では、NavigationViewを使用して基本的なナビゲーションバーを作成する方法と、ナビゲーションバーに基づいてページをジャンプする方法を学習します。
UIkitを使用している場合は、ストーリーボードまたはUINavigationControllerを使用してページナビゲーションを構築してみてください。
SwiftUIでは、NavigationViewを使用します。これは、基本的に前の章のListと同じです。
この章は3部に分かれています。
1.シンプルなナビゲーションバーを作成します。
2.ナビゲーションバーに基づくページジャンプ。
3.ナビゲーションバーのカスタムリターン。
パート1：シンプルなナビゲーションバーの作成
まず、ナビゲーションバーの効果を確認するために、元のリストにNavigationViewを追加してみましょう。
UIドラフトは次のとおりです。
まず、新しいプロジェクトを作成し、SwiftUINavigationViewという名前を付けましょう。
次に、前の章のコードを例として説明します。
コードは次のように表示されます。
import SwiftUI
struct ContentView: View {
// 定义数组，存放数据
var Messages = [
Message(name: "这是微信", image: "weixin"),
Message(name: "这是微博", image: "weibo"),
Message(name: "这是QQ", image: "qq"),
Message(name: "这是电话", image: "phone"),
Message(name: "这是邮箱", image: "mail")
]
var body: some View {
// 列表
List(Messages) { Message in
HStack {
Image(Message.image)
.resizable()
.frame(width: 40, height: 40)
.cornerRadius(5)
Text(Message.name)
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
struct Message: Identifiable {
var id = UUID()
var name: String
var image: String
}
复制代码NavigationViewの構成はListメソッドと同じですが、必要なコンテンツをNavigationViewでラップするだけです。
NavigationView{ }
复制代码ここで、リスト全体をラップする必要があることに注意してください。
パッケージが完成すると、ナビゲーションバーの位置がリスト全体の一番上に残っていることがわかります。
//导航栏
NavigationView{
// 列表
List(Messages) { Message in
HStack {
Image(Message.image)
.resizable()
.frame(width: 40, height: 40)
.cornerRadius(5)
Text(Message.name)
}
}
}
复制代码タイトルを追加してみましょう。ここで使用する修飾子は次のとおりです。
.navigationBarTitle("我是标题")
复制代码修飾子は、NavigationViewの外層ではなく、コンテンツの最外層に追加する必要があります。
このようにして、大きなタイトルのリストを取得します。
//导航栏
NavigationView {
// 列表
List(Messages) { Message in
HStack {
Image(Message.image)
.resizable()
.frame(width: 40, height: 40)
.cornerRadius(5)
Text(Message.name)
}
}.navigationBarTitle("我是标题")
}
复制代码簡単じゃないですか！
SwiftUIは多くのことを単純化するので、基本的に同じ方法で異なるコントロールを使用します。
パート2：ナビゲーションバーに基づくページジャンプ
以下に進んでください。
1つのページから2番目のページにジャンプして、元に戻ろうとします。
UIドラフトは次のとおりです。
我们先完成第二个页面的内容，然后再从第一个页面点击对应的列表进入第二个页面。
我们在ContentView页面最后创建一个新的页面，命名为DetailView。
代码如下：
//详情页面
struct DetailView: View {
var message: Message
var body: some View {
VStack {
Image(message.image)
.resizable()
.frame(width: 80, height: 80)
Text(message.name)
.font(.system(.title, design: .rounded))
.fontWeight(.black)
Spacer()
}
}
}
复制代码我们在DetailView里面引用Message数组的数据，将Image图片和Text文字换成数组的参数。
这样我们就可以第一个页面点击哪一个列表，然后就能将对应的图片和文字带入到第二个页面，也就是所谓的传参。
然后回到第一个页面里。
我们需要点击List列表，然后跳转到第二个页面。
这时候我们需要使用一个新的参数，叫做NavigationLink。
NavigationLink(destination: DetailView()) {
//点击跳转的内容
}
复制代码destination表明我们要跳转的页面，这里我们需要跳转的页面是DetailView。
我们需要点击List里面的一行，然后跳转到第二个页面，因此NavigationLink需要放在List里面，而不是包裹住整个List。
如果NavigationLink包裹住List，那么就变成了点击整个List跳转了，这里我们需要的是点击List单独一行对应跳转。
NavigationView {
// 列表
List(Messages) { Message in
NavigationLink(destination: DetailView(message: Message)) {
HStack {
Image(Message.image)
.resizable()
.frame(width: 40, height: 40)
.cornerRadius(5)
Text(Message.name)
}
}
}.navigationBarTitle("我是标题")
}
复制代码我们可以看到，跳转的目标是DetailView，并且我们把Message结构体的参数传递给了DetailView页面的message变量。
这样就实现了我们Message结构体里的参数传递给message，也就实现了，我们点击的Message是哪一个，DetailView页面的message对应传递哪一个参数。
我们点击模拟器上面的Preview运行下模拟器，尝试点击List其中一行，就可以体验下点击跳转页面，再点击返回到主页的效果。
科普一个知识点。
我们在常用的App当中看到的顶部导航栏文字是居中的，这是怎么实现的呢？
也很简单，ios默认的是大标题效果（.automatic），也就是：
.navigationBarTitle("我是标题", displayMode: .automatic)
复制代码我们只需要给.navigationBarTitle("我是标题”)里加入参数控制（.inline），就可以实现文字标题居中效果。
.navigationBarTitle("我是标题", displayMode: .inline)
复制代码好了，至此我们就完成了基于导航栏的页面跳转方式啦！
第三部分：导航栏自定义返回
次に、DetailViewページを見てみましょう。この「戻る」操作は、それほどきれいに見えないことがわかります。
多くの場合、「戻る」アクションはアイコンボタンまたは「テキスト」ボタンです。
ホームページに戻る操作を美化する方法はありますか？
分析してみましょう。
システムに付属しているリターン操作を非表示にしてから、自分でリターン操作を「書き込む」だけです。
ここでは、パラメータを使用してナビゲーションの戻るボタンを非表示にします。
.navigationBarBackButtonHidden(true)
复制代码次に、自分で戻るボタンを作成します。ここでは、別のパラメーターを使用する必要があります。
.navigationBarItems(leading: Button(action : {
// 点击按钮后的操作
}){
//按钮及其样式
Image(systemName: "chevron.left")
.foregroundColor(.gray)
})
复制代码アイコンボタンを戻るボタンとして使ってみましょう。
ここでは、システムに付属の画像が使用されており、塗りつぶしの色は灰色です。
実行して確認すると、ホームページリストデータをクリックして詳細ページに入ることができます。
ただし、バックアクションをヒットしても何も起こりません。
これは、を返すメソッドを実装していないためです。
SwiftUIは（.presentationMode）組み込み環境値を提供します。この環境値を使用して、前のビューに戻る操作を実行できます。
@Environment(\.presentationMode) var mode
复制代码次に、戻るボタンのクリック操作を呼び出すと、環境値のdismiss（）関数が呼び出され、返された操作を実現できます。
self.mode.wrappedValue.dismiss()
复制代码DetailViewページの完全なコードは次のとおりです。
// 详情页面
struct DetailView: View {
//环境值
@Environment(\.presentationMode) var mode
var message: Message
var body: some View {
VStack {
Image(message.image)
.resizable()
.frame(width: 80, height: 80)
Text(message.name)
.font(.system(.title, design: .rounded))
.fontWeight(.black)
Spacer()
}
.navigationBarBackButtonHidden(true)
.navigationBarItems(leading: Button(action : {
// 点击按钮后的操作
self.mode.wrappedValue.dismiss()
}){
//按钮及其样式
Image(systemName: "chevron.left")
.foregroundColor(.gray)
})
}
}
复制代码コードを実行すると、カスタムボタンの戻り操作が実装されていることがわかりました。
さて、今日の知識のポイントはここにあります。
このコラムがお役に立てば、いいね、コメント、フォローしてください〜