如何在SwiftUI中将列表中的单元格框架居中?

时间:2020-03-25 12:53:25

标签: swift swiftui

我想将单元格的框架放在列表的中心。在下面的图片中,我希望它看起来像: enter image description here

我暂时使用框架的宽度来实现此结果,但这不是解决此问题的正确方法。有人建议我如何使橙色框居中吗?

这是我的代码:

    var body: some View {
    NavigationView {
            List {
                ForEach(splitArray(), id: \.self) { nieuwsItem in
                NavigationLink(destination: Text(nieuwsItem.link).font(.title)) {
                    HStack {
                        VStack(alignment: .leading) {
                            Text(nieuwsItem.title)
                                .font(.headline)
                                .lineLimit(2)
                                .foregroundColor(Color(UIColor.label))
                            Text(nieuwsItem.description)
                                .font(.subheadline)
                                .foregroundColor(Color("textColor"))
                                .lineLimit(3)
                        }.padding(5)
                    }.cornerRadius(10)
                }
                }.frame(width: 370, height: 150, alignment: .center)
                 .background(Color(UIColor(#colorLiteral(red: 0.8745098039, green: 0.3411764706, blue: 0, alpha: 1))))
                 .cornerRadius(20)
            //.padding(.bottom, 20)

        }//.colorMultiply(Color("backgroundColor")).padding(.top)
         .navigationBarTitle(Text("Nieuws"))
    }.onAppear {
        print("NieuwsView appeared!")
        //splitArray()
    }
}

这是没有将框架居中硬编码的代码:

var body: some View {
    NavigationView {
            List {
                ForEach(splitArray(), id: \.self) { nieuwsItem in
                NavigationLink(destination: Text(nieuwsItem.link).font(.title)) {
                    HStack {
                        VStack(alignment: .leading) {
                            Text(nieuwsItem.title)
                                .font(.headline)
                                .lineLimit(2)
                                .foregroundColor(Color(UIColor.label))
                            Text(nieuwsItem.description)
                                .font(.subheadline)
                                .foregroundColor(Color("textColor"))
                                .lineLimit(3)
                        }.padding(5)
                    }.cornerRadius(10)
                }.frame()
                }.frame(width: 300, height: 150, alignment: .center)
                 .background(Color(UIColor(#colorLiteral(red: 0.8745098039, green: 0.3411764706, blue: 0, alpha: 1))))
                 .cornerRadius(20)
            //.padding(.bottom, 20)

        }//.colorMultiply(Color("backgroundColor")).padding(.top)
         .navigationBarTitle(Text("Nieuws"))
    }.onAppear {
        print("NieuwsView appeared!")
        //splitArray()
    }
}

0 个答案:

没有答案