SwiftUI列表视图列表中的非可选行

时间:2020-03-07 13:47:42

标签: listview navigation swiftui

在我最新的SwuiftUI应用程序中,根据选择的选项,将创建三个不同的列表视图之一。三个可能的列表中的每一个都包含显示的所有行。但是,对于所有三个列表,前四行都不是“可选择的”以导航到详细信息视图。其余所有行都是可选的,并可以正确导航到详细信息视图。

以下是相关代码:

struct Accounts: View {

    init(){
        UITableView.appearance().backgroundColor = .clear
        UITableViewCell.appearance().backgroundColor = .clear
        UITableView.appearance().tableFooterView = UIView()
    }

    // MARK: - Propertiers
    @Environment(\.presentationMode) var presentation

    @State private var accounts = ["New Account", "Account 1", "
Account 2", "Account 3", "Account 4", "Account 5", "Account 6"] // placeholder data

    var body: some View {

        NavigationView {

            ZStack {

                BackgroundView(majorColorR: 255, majorColorG: 255, majorColorB: 255, minorColorR: 204, minorColorG: 0, minorColorB: 0)

                VStack {

                    AppTitle()

                    List(accounts, id: \.self) { account in
                        NavigationLink(destination: ShowAccount(account: account)) {
                           Text("\(account)")
                           .font(.headline)
                           .foregroundColor(.black)
                       }
                    }

                    Spacer()


                    Button(action: {
                        self.presentation.wrappedValue.dismiss()
                    }) {
                        Text("Return to Main Menu")
                        .font(.headline)
                        .foregroundColor(.white)
                        .padding()
                        .frame(width: 300, height: 50)
                        .overlay(
                            RoundedRectangle(cornerRadius: 15)
                                .stroke(Color.black, lineWidth: 3)
                        )
                    }.padding(.bottom, 50)

                    Spacer()

                }.edgesIgnoringSafeArea(.all)
            }
        }.navigationBarBackButtonHidden(true)
    }

}

1 个答案:

答案 0 :(得分:0)

尝试运行此示例

react-dates

预期结果是什么?如果您回答它是中间带有单个文本A的屏幕,那您是对的!

旋转设备,您会看到...。

enter image description here

您的布局很“复杂”,也许对代码进行一些小的重新排列可能会有所帮助……但是我建议您从头开始重写它!