当列表加载网络数据的时候 最后一个元素无法打开详情页 当下拉到最底部的时候 再返回顶部 第一个元素也无法打开了
import SwiftUI
// 商品列表
struct GoodsListHttpServerResData:Codable { // 让这个数据结构 继承可解码的类 Codable
let code :Int // 状态码
let msg :String // 说明信息
let data:[Goods] // 列表数据
}
struct HomeView: View {
// 构造方法 生成界面的时候
init() {
UITableView.appearance().separatorStyle = .none // 去掉默认列表的 分割线
}
@State private var goodsListData = [Goods]()
var body: some View {
NavigationView {
List{
ForEach( self.goodsListData ,id: \.id ){ goods in
GoodsView(goods: goods) // 循环调用单个微博的函数
.listRowInsets(EdgeInsets()) // 列表里边的 每一个元素 上下左右的间距 为 0
}
}.onAppear(perform: httpGetGoodsList)
.navigationBarTitle(Text("首页"), displayMode: .inline)
}
}
func httpGetGoodsList() {
let url = URL(string: "http://www.cddtkabc.top/7.php")!
var request = URLRequest(url: url)
request.httpMethod = "GET"
// request.timeoutInterval = 15
// 创建请求任务
let task = URLSession.shared.dataTask(with: request) { (data, response, error) in
// 如果有错误
if let error = error {
// self.updateData(text: error.localizedDescription,isGoToLoginView: false)
print(error.localizedDescription)
return
}
// 判断状态码
guard let httpResponse = response as? HTTPURLResponse ,httpResponse.statusCode == 200 else{
print("服务端请求状态码非 200")
// self.updateData(text: "服务端请求状态码非 200",isGoToLoginView: false)
return
}
// 判断有么有数据
guard let data = data else{
print("服务端没有返回数据")
// self.updateData(text: "服务端没有返回数据",isGoToLoginView: false)
return
}
// 解析数据
guard let resData = try? JSONDecoder().decode(GoodsListHttpServerResData.self, from: data) else {
print("解析返回值失败")
// self.updateData(text: "解析返回值失败",isGoToLoginView: false)
return
}
if resData.code == 200 {
// self.updateData(text:resData.msg, isGoToLoginView:true)
print(resData)
DispatchQueue.main.async {
self.goodsListData = resData.data
}
}else{
// self.updateData(text:resData.msg, isGoToLoginView:true)
}
}
// 请求任务执行
task.resume()
}
func updateData( text: String , isGoToLoginView:Bool){
// 用主进程 修改数据
DispatchQueue.main.async {
// self.alertMsg = text
// self.isAlert = true
// self.isGoToLoginView = isGoToLoginView
}
}
}
struct HomeView_Previews: PreviewProvider {
static var previews: some View {
HomeView()
// .environmentObject(RootViewModel())
}
}
// GoodsView code:
import SwiftUI
struct GoodsView: View {
let goods:Goods
var body: some View {
VStack{
// 水平排列
HStack( spacing:10){
goods.goodsImage.resizable() // 图片缩放
.frame(width: 120, height: 120, alignment: .center) // 宽高
.cornerRadius(10) // 圆角
// 垂直排列
VStack(alignment: .leading, spacing: 10){
// 垂直排列
VStack(alignment: .leading, spacing: 5){
Text(goods.goods_name) // 创建文字视图
.font(.system(size:15)) // 设置系统字体
.foregroundColor(.black) // 设置颜色
.lineLimit(2) // 允许占用两行
// .padding(.top,5)
.frame(height: 40)
Text(goods.goods_info) // 创建文字视图
.font(.system(size:10)) // 设置系统字体
.foregroundColor(.black) // 设置颜色
}
VStack(alignment: .leading, spacing: 5){
// 水平排列
HStack(){
Text("¥")
.font(.system(size:10))
Text(String(goods.goods_price))
.font(.system(size:16))
}.foregroundColor(.red) // 设置颜色
Text("实体地址:" + goods.store_adress)
.font(.system(size:10)) // 设置系统字体
.foregroundColor(Color(red: 0, green: 0, blue: 0, opacity: 1)) // 设置颜色
Text("店铺名称:" + goods.store_name)
.font(.system(size:10)) // 设置系统字体
.foregroundColor(Color(red: 0, green: 0, blue: 0, opacity: 1)) // 设置颜色
}
Divider() //分割线
}
}.padding(.all,5)
}.navigationLink(destination:Text("1111"))
// }
}
}
struct GoodsView_Previews: PreviewProvider {
static var previews: some View {
GoodsView(goods: Goods(
id: 2000,
goods_name: "热卖苹果手机 2020 年新款 128G 全网通 5G 手机",
goods_info: "商品描述商品描述商品描述商品描述商品描述商品描述",
goods_price: 5999.99,
goods_stock: 100,
goods_images: [
"ceqdFM0zXxTc.jpg",
"ceUaxg4en3tY.jpg",
"ceyQj7HJ0oVhc.jpg",
],
store_name: "京东自营礼物店",
store_adress: "山东省济南市天桥区凤凰广场"
))
// GoodsView(goods: goodsList.list[0])
}
}
swiftui swiftui-导航链接
1
chaodada OP ```
extension View { /// 基于 NavigationLink 跳转,但避免了因为出现在 List 中而出现详情指示器 `>` /// ,在 Cell 中调用即可实现跳转 /// - Parameter destination: 要跳转的界面 func navigationLink<Destination: View>(destination: Destination) -> some View { background( NavigationLink(destination: destination) { EmptyView() // 不需要实际的 Label 视图,EmtpyView 即可 } .frame(width: 0, height: 0) // 避免占用空间 .opacity(0) // 不可见 ) } } 跳转是这样的 ``` |
2
leschans 2020-08-10 19:29:41 +08:00 via iPhone
你这每行都有注释😂
|