SwiftUI 视图添加尾随和前导图标

Question

将前导和尾随图标添加到我使用视图控制器显示的 swift UI 视图（如带有关闭图标和清除按钮的图片上显示的那样）的代码是什么？

这是内置行为还是自定义堆栈视图？可以将其设置为粘在顶部，以便在滚动时它会覆盖内容吗？

这是我的视图代码：

struct CustomSheetView: View {
    @Environment(\.presentationMode) var presentationMode

    @State private var isNewInMenuSelected = false
    @State private var isOurFavoritesSelected = false
    @State private var isCustomerPickSelected = false

    var filtersLabel: String
    var useOurSearchFiltersLabel: String
    var applyFiltersLabel: String

    var body: some View {
        VStack(alignment: .leading, spacing: 20) {
            Text(filtersLabel)
                .font(.largeTitle)
                .fontWeight(.bold)
                .padding(.top, 20)
                .padding(.leading, 20)

            Text(useOurSearchFiltersLabel)
                .font(.subheadline)
                .fontWeight(.medium)
                .foregroundColor(.secondary)
                .padding(.leading, 20)

            VStack(alignment: .leading, spacing: 10) {
                Toggle("New in menu", isOn: $isNewInMenuSelected)
                Toggle("Our favorites", isOn: $isOurFavoritesSelected)
                Toggle("Customer pick", isOn: $isCustomerPickSelected)
            }
            .padding(.horizontal, 20)

            Spacer()

            Button(action: {
                let checkboxStates = [
                    "new_in_menu": isNewInMenuSelected,
                    "our_favorites": isOurFavoritesSelected,
                    "customer_pick": isCustomerPickSelected
                ]

                let keyWindow = UIApplication.shared.connectedScenes
                    .filter { $0.activationState == .foregroundActive }
                    .compactMap { $0 as? UIWindowScene }
                    .flatMap { $0.windows }
                    .first { $0.isKeyWindow }

                if let flutterViewController = keyWindow?.rootViewController as? FlutterViewController {
                    let channel = FlutterMethodChannel(name: "custom_sheet_channel", binaryMessenger: flutterViewController.binaryMessenger)
                    channel.invokeMethod("checkboxStates", arguments: checkboxStates) { result in
                        // Handle any response if necessary
                    }
                }

                presentationMode.wrappedValue.dismiss()
            }) {
                Text(applyFiltersLabel)
                    .padding()
                    .frame(maxWidth: .infinity)
                    .background(Color(hex: "#d0a771"))
                    .foregroundColor(.white)
                    .cornerRadius(8)
                    .padding(.horizontal, 20)
            }
            .padding(.bottom, 20)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading) // Align content to top-left
    }
}

Answer 1

您可以使用以下两种技巧：

1。作为工具栏

您可以将工具栏应用于工作表内容。这意味着将工作表内容嵌套在某种支持工具栏的容器中，例如

NavigationStack

:

struct SimpleSheetView: View {
    @Environment(\.dismiss) var dismiss

    var body: some View {
        NavigationStack {
            ScrollView {
                Color.red.frame(height: 200)
                Color.orange.frame(height: 200)
                Color.yellow.frame(height: 200)
                Color.green.frame(height: 200)
                Color.blue.frame(height: 200)
                Color.indigo.frame(height: 200)
                Color.purple.frame(height: 200)
            }
            .navigationTitle("Filters")
            .navigationBarTitleDisplayMode(.inline)
            .toolbar {
                ToolbarItem(placement: .navigationBarLeading) {
                    Button {
                        dismiss()
                    } label: {
                        Image(systemName: "xmark")
                            .imageScale(.large)
                            .foregroundStyle(.foreground)
                    }
                }
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button("Clear") {}
                        .buttonStyle(.plain)
                        .fontWeight(.bold)
                        .foregroundStyle(.green)
                }
            }
        }
    }
}

当主要内容滚动时，它会移到工具栏后面，工具栏会自动呈现半透明背景：

2。自定义标题

或者，您可以构建自己的自定义标题，其工作方式与工具栏类似。

• 这两个按钮可以组合成

  HStack

  ，中间有

  Spacer

  。然后可以将其显示为标题上的叠加层。

• 要实现与工具栏相同的半透明背景，请将标题显示为覆盖在滚动内容上。向滚动区域中的第一项添加填充，为标题腾出空间。

struct SimpleSheetView: View {
    @Environment(\.dismiss) var dismiss

    var body: some View {
        ScrollView {
            Color.red.frame(height: 200)
                .padding(.top, 60)
            Color.orange.frame(height: 200)
            Color.yellow.frame(height: 200)
            Color.green.frame(height: 200)
            Color.blue.frame(height: 200)
            Color.indigo.frame(height: 200)
            Color.purple.frame(height: 200)
        }
        .overlay(alignment: .top) {
            Text("Filters")
                .font(.headline)
                .fontWeight(.bold)
                .frame(height: 60)
                .frame(maxWidth: .infinity)
                .overlay {
                    HStack {
                        Button {
                            dismiss()
                        } label: {
                            Image(systemName: "xmark")
                                .imageScale(.large)
                                .foregroundStyle(.foreground)
                        }
                        Spacer()
                        Button("Clear") {}
                            .buttonStyle(.plain)
                            .fontWeight(.bold)
                            .foregroundStyle(.green)
                    }
                }
                .padding(.horizontal, 20)
                .background(.bar)
        }
    }
}