web-dev-qa-db-ja.com

Xcode 11-SwiftUIプレビューダークモード

Xcode 11では、アプリが実行されているときに、デバッグ領域の下部にある環境オーバーライドを切り替えることで、ダークモードを有効にできます。

Environment Overrides

SwiftUIには、インターフェースを構築しているときにアプリのライブプレビューを生成するCanvasエディターがあります。

これらのプレビューでダークモードに切り替える方法はありますか？

swiftuixcode11
9
Simon

プレビューされているファイルの下部にこのようなものが表示されます。これは、Xcodeがプレビューを生成するために使用するものです。

#if DEBUG
struct ContentView_Previews : PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
#endif

プレビューをダークモードに変更するには、colorSchemeを指定するだけです。

static var previews: some View {
    ContentView().colorScheme(.dark)
}

または、ライトモードとダークモードを同時にプレビューすることもできます。

static var previews: some View {
    Group {
        ContentView().colorScheme(.light)
        ContentView().colorScheme(.dark)
    }
}

SwiftUIのその他の例とプレビューがいかに強力かについては、 Introducing SwiftUI セッションをご覧になることをお勧めします。

11
Matthew Price

注：執筆時点では、.environment（.colorScheme、.dark）が機能するためには、最上位のビューとしてNavigationViewが必要です。しかし、（大きな）ナビゲーションバーはカラーブロックをカバーしているため、2つのnavigationBarモディファイアによってバーが小さくなり、非表示になります。これはXcodeのバグの可能性があります。

ソース-有料コンテンツ

これをXcode 11.2.1でテストしましたが、NavigationViewの問題はまだ残っています。ビュー全体をNavigationViewでラップしない限り、環境は変化していないようです。 .navigationBarTitle("")＆.navigationBarHidden(true)を使用してNavigationViewを非表示にできます。

例：

struct ContentView: View {
    var body: some View {
        NavigationView {
            Text("Light vs Dark Mode")

            // Uncomment these lines if you don't want the navigation bar
            // .navigationBarTitle("")
            // .navigationBarHidden(true)

            // You can also apply a colorScheme here
            // which will impact how the view looks when the app
            // is launched on device. Regardless of the users theme settings
        }// .environment(\.colorScheme, .dark)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        // ContentView().environment(\.colorScheme, .dark)
        // ContentView().environment(\.colorScheme, .light)

        // If you want you can display both schemes in a group
        Group {
            ContentView()
            .environment(\.colorScheme, .light)

           ContentView()
           .environment(\.colorScheme, .dark)
       }
    }
}

ダークモードでのサンプルプレビュー：

enter image description here

4
DoesData