web-dev-qa-db-ja.com

SwiftUIでNavigationLinkをボタンとして表示する方法

私はSwiftUIでのナビゲーションについてここでたくさん読んで、いくつかのことを試しましたが、期待どおりに機能するものはありません。

基本的に、ワークアウトのリストを含むビューがあり、行をクリックして1つのワークアウトを表示できます。これは、NavigationLinkと共にNavigationViewを使用して期待どおりに機能します。

ここで、詳細ビューのボタンでワークアウトを開始します。これにより、タイマー付きのビューが開きます。ビューには詳細ビューと同じアニメーションが表示され、戻るボタンのあるナビゲーションバーにワークアウトの名前も表示されます。

詳細ページのNavigationLinkビューを使用してこれを実装することもできますが、リンクは常に右側に矢印のある全幅の行として表示されます。これをボタンにしたいのですが、NavigationLinkはスタイリングに対して耐性があるようです。

struct WorkoutDetail: View {
    var workout: Workout

    var body: some View {
        VStack {
            NavigationLink(destination: TimerView()) {
                Text("Starten")
            }.navigationBarTitle(Text(workout.title))
        }
    }
}

struct WorkoutList: View {
    var workoutCollection: WorkoutCollection

    var body: some View {
        NavigationView {
            List(workoutCollection.workouts) { workout in
                NavigationLink(destination: WorkoutDetail(workout: workout)) {
                    WorkoutRow(workout: workout)
                }
            }.navigationBarTitle(Text("Workouts"))
        }
    }
}

更新：これが私が何を意味するかを説明するスクリーンショットです：

enter image description here

navigationswiftui
17
G. Marc

Beta 6以降では、ビューをNavigationLink内にラップして、押されたときにナビゲーションをトリガーする必要はありません。

プロパティをNavigationLinkにバインドするだけで、そのプロパティを変更するたびに、実行されるアクションに関係なくナビゲーションがトリガーされます。例えば-

struct SwiftUI: View {
    @State private var action: Int? = 0

    var body: some View {

        NavigationView {
                    VStack {
                        NavigationLink(destination: Text("Destination"), tag: 1, selection: $action) {
                            EmptyView()
                        }


                        Text("Your Custom View")
                            .onTapGesture {
                 //perform some tasks if needed before opening Destination view
                                self.action = 1
                        }
                    }
                }
        }
}

とてもシンプルです。 Bindableプロパティ（つまりアクション）の値を変更するたびに、NavigationLinkはそのtagの事前定義値をバインドされたプロパティactionと比較します。両方が等しい場合、ナビゲーションが行われます。

したがって、任意の方法でビューを作成し、アクションに関係なく、任意のビューからナビゲーションをトリガーできます。NavigationLinkでバインドされたプロパティを使用してください。

よろしくお願いいたします。

16
mohit kejriwal

私はこれを数日間自分でいじっていました。これはあなたが探しているものだと思います。

struct WorkoutDetail: View {
var workout: Workout

var body: some View {
    NavigationView {
       VStack {
           NavigationLink(destination: TimerView()) {
               ButtonView()
           }.navigationBarTitle(Text(workout.title))
        }
    }
}

NavigationLinkに表示するビューを作成します

struct ButtonView: View {
var body: some View {
    Text("Starten")
        .frame(width: 200, height: 100, alignment: .center)
        .background(Color.yellow)
        .foregroundColor(Color.red)
}

注：NavigationViewの上にあるものはすべて、ナビゲーションのすべてのページに表示されているように見え、リンクのNavigationViewのサイズが小さくなっています。

8
ShadowDES

それを行うための正確な方法は、たとえばbuttonStyleを使用することだと思います。たとえば、

NavigationLink(destination: WorkoutDetail(workout: workout)) {
  WorkoutRow(workout: workout)
}
.buttonStyle(ButtonStyle3D(background: Color.yellow))
1
user5117217