Moment: ForEach(), Index out of range

[Haibo-Zhou]

感谢分享，
ForEach<Range<Int>, Int, ModifiedContent<ModifiedContent<ModifiedContent<Image, _AspectRatioLayout>, _FrameLayout>, _ClipEffect<Rectangle>>> count (2) != its initial count (3). ForEach(:content:)should only be used for *constant* data. Instead conform data toIdentifiableor useForEach(🆔content:)and provide an explicitid!

我在真机上运行发现朋友圈View下拉会导致数组越界，在ForEach里面加上id参数可以解决这个问题。
e.g.
ForEach(0 ..< rows, id: \.self)

[wxxsw]

好的谢谢，我周末改一下

[Haibo-Zhou]

不好意思，才有时间看。 我重新下载了一份，还是一样的问题。进入朋友圈界面然后下拉屏幕，快到底部的时候就会crash。数组越界报错位置是在MomentCell line-143， 我是iPhone SE真机。 ``` ForEach(0 ..< (isLast ? lastRowCols : self.cols), id: \.self) { col in Image(self.images[row * self.cols + col].cover) ``` 我正在看你代码里面的GeometryReader 相对约束，第一次看，学习学习：） ・・・ 2020-03-22 16:45:21.331683+0800 SwiftUI-WeChat[26856:7137191] [TableView] Warning once only: UITableView was told to layout its visible cells and other contents without being in the view hierarchy (the table view or one of its superviews has not been added to a window). This may cause bugs by forcing views inside the table view to load and perform layout without accurate information (e.g. table view bounds, trait collection, layout margins, safe area insets, etc), and will also cause unnecessary performance overhead due to extra layout passes. Make a symbolic breakpoint at UITableViewAlertForLayoutOutsideViewHierarchy to catch this in the debugger and see what caused this to occur, so you can avoid this action altogether if possible, or defer it until the table view has been added to a window. Table view: <_TtC7SwiftUIP33_BFB370BA5F1BADDC9D83021565761A4925UpdateCoalescingTableView: 0x124829400; baseClass = UITableView; frame = (0 0; 320 504); clipsToBounds = YES; autoresize = W+H; gestureRecognizers = <NSArray: 0x280622ca0>; layer = <CALayer: 0x28088a2c0>; contentOffset: {0, 0}; contentSize: {320, 0}; adjustedContentInset: {0, 0, 49, 0}; dataSource: (null)> ForEach<Range<Int>, Int, HStack<ForEach<Range<Int>, Int, ModifiedContent<ModifiedContent<ModifiedContent<Image, _AspectRatioLayout>, _FrameLayout>, _ClipEffect<Rectangle>>>>> count (2) != its initial count (3). `ForEach(_:content:)` should only be used for *constant* data. Instead conform data to `Identifiable` or use `ForEach(_:id:content:)` and provide an explicit `id`! ForEach<Range<Int>, Int, ModifiedContent<ModifiedContent<ModifiedContent<Image, _AspectRatioLayout>, _FrameLayout>, _ClipEffect<Rectangle>>> count (2) != its initial count (3). `ForEach(_:content:)` should only be used for *constant* data. Instead conform data to `Identifiable` or use `ForEach(_:id:content:)` and provide an explicit `id`! ForEach<Range<Int>, Int, ModifiedContent<ModifiedContent<ModifiedContent<Image, _AspectRatioLayout>, _FrameLayout>, _ClipEffect<Rectangle>>> count (2) != its initial count (3). `ForEach(_:content:)` should only be used for *constant* data. Instead conform data to `Identifiable` or use `ForEach(_:id:content:)` and provide an explicit `id`! Fatal error: Index out of range 2020-03-22 16:45:31.099822+0800 SwiftUI-WeChat[26856:7137191] Fatal error: Index out of range (lldb) ・・・ BR/ Haibo

…

________________________________ From: Gesen <notifications@github.com> Sent: Sunday, March 22, 2020 10:47 AM To: wxxsw/SwiftUI-WeChat <SwiftUI-WeChat@noreply.github.com> Cc: Haibo-Zhou <chuckzhb@hotmail.com>; Author <author@noreply.github.com> Subject: Re: [wxxsw/SwiftUI-WeChat] Moment: ForEach(), Index out of range (#6) 这位朋友你好，我没有复现出这个问题。 因为现在 Moment 已经是遵从 Identifiable 的，按理说应该不需要再设置 id: 了，要不你再重新下载一份代码尝试一下呢？ ― You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub<#6 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ALR5KYKMEAKHPMHNAIJ447DRIV32PANCNFSM4LQBMNOA>.

[wxxsw]

知道位置了，已经改了~

因为图片宫格这里布局的关系，需要遍历行和列，就用的 Range 去迭代了，所以主要修改就是如你所说，加上了 id: \.self。

至于数组越界的代码 self.images[row * self.cols + col]，我检查了一下，觉得不是计算的问题，猜测可能还是上面的问题导致的，我这里复现不了，你可以试一下哈

[Haibo-Zhou]

好的，我之前试过，加上id就好了。 另外我看这个9宫格里面，```.frame(width: 80, height: 80)```图片尺寸固定死了，这里可以用一个相对的约束么，因为我发现这个app在我的iPhone上面朋友圈cell的有边界已经完全顶到手机的右边界了， 可能是我手机屏幕太小的原因。 因为我之前都是用auto-layout比较多，SwiftUI的相对约束才开始看，想请教一下。 ・・・ func rowBody(row: Int, isLast: Bool) -> some View { HStack(spacing: 6) { ForEach(0 ..< (isLast ? lastRowCols : self.cols), id: \.self) { col in Image(self.images[row * self.cols + col].cover) .resizable() .aspectRatio(contentMode: .fill) .frame(width: 80, height: 80) .clipped() } } } ・・・ BR/ Haibo

…

________________________________ From: Gesen <notifications@github.com> Sent: Sunday, March 22, 2020 8:04 PM To: wxxsw/SwiftUI-WeChat <SwiftUI-WeChat@noreply.github.com> Cc: Haibo-Zhou <chuckzhb@hotmail.com>; Author <author@noreply.github.com> Subject: Re: [wxxsw/SwiftUI-WeChat] Moment: ForEach(), Index out of range (#6) 知道位置了，已经改了~ 因为图片宫格这里布局的关系，需要遍历行和列，就用的 Range 去迭代了，所以主要修改就是如你所说，加上了 id: \.self。 至于数组越界的代码 self.images[row * self.cols + col]，我检查了一下，觉得不是计算的问题，猜测可能还是上面的问题导致的，我这里复现不了，你可以试一下哈 ― You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub<#6 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ALR5KYNNMIR3SIHW74DAPETRIX5EDANCNFSM4LQBMNOA>.

[wxxsw]

之前确实没考虑 SE，这个问题我的解决方法如下：

func rowBody(row: Int, isLast: Bool) -> some View {
    HStack(spacing: 6) {
        ForEach(0 ..< (isLast ? self.lastRowCols : self.cols), id: \.self) { col in
            Image(self.images[row * self.cols + col].cover)
                .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(minWidth: 60, maxWidth: 80, minHeight: 60, maxHeight: 80)
                .aspectRatio(1, contentMode: .fill)
                .clipped()
        }
    }
}

主要的知识点是：
1.固定宽高改为设置宽高范围，最小宽度 60 能保证 SE 上正常显示
2.由于图片宽高不固定，导致宽高可能不同，所以需要约束宽高比是 1:1
3.第一个 aspectRatio 是限制图片需要按照原比例缩放，避免拉伸失真，第二个 aspectRatio 是限制控件按照 1:1 展示

如果再有不同的问题，可以开新的 issue 哈

[Haibo-Zhou]

非常感谢，这两天在找工作，才有时间看。才接触SwiftUI 的 relative layout 这个项目对我非常有帮助，我可能会试试把geometry reader的size传给九宫格。 有问题再来请教咯。

…

________________________________ From: Gesen <notifications@github.com> Sent: Sunday, March 22, 2020 10:33 PM To: wxxsw/SwiftUI-WeChat <SwiftUI-WeChat@noreply.github.com> Cc: Haibo-Zhou <chuckzhb@hotmail.com>; Author <author@noreply.github.com> Subject: Re: [wxxsw/SwiftUI-WeChat] Moment: ForEach(), Index out of range (#6) 之前确实没考虑 SE，这个问题我的解决方法如下： func rowBody(row: Int, isLast: Bool) -> some View { HStack(spacing: 6) { ForEach(0 ..< (isLast ? self.lastRowCols : self.cols), id: \.self) { col in HStack { Image(self.images[row * self.cols + col].cover) .resizable() .aspectRatio(contentMode: .fill) .frame(minWidth: 60, maxWidth: 80, minHeight: 60, maxHeight: 80) } .aspectRatio(1, contentMode: .fill) .clipped() } } } 主要的知识点是： 1.固定宽高改为设置宽高范围，最小宽度 60 能保证 SE 上正常显示 2.由于图片宽高不固定，导致宽高可能不同，所以需要约束宽高比是 1:1 3.但图片约束宽高会导致图片本身显示的比例不对，所以嵌套在一个新的容器里，图片本身比例不变，通过容器显示 1:1，并裁剪多余部分 4.容器用 HStack、VStack、ZStack 应该没什么分别，主要是为了有个简单的容器约束大小 如果再有不同的问题，可以开新的 issue 哈 ― You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub<#6 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ALR5KYODZRXYEST4G6PFNYDRIYOSRANCNFSM4LQBMNOA>.

[wxxsw]

好的，上一个评论有更新留意下，祝找到心仪的工作

[Haibo-Zhou]

多谢老兄，一定一定！ 获取 Outlook for iOS<https://aka.ms/o0ukef>

…

________________________________ 发件人: Gesen <notifications@github.com> 发送时间: Wednesday, March 25, 2020 7:03:05 PM 收件人: wxxsw/SwiftUI-WeChat <SwiftUI-WeChat@noreply.github.com> 抄送: Haibo-Zhou <chuckzhb@hotmail.com>; Author <author@noreply.github.com> 主题: Re: [wxxsw/SwiftUI-WeChat] Moment: ForEach(), Index out of range (#6) 好的，上一个评论有更新留意下，祝找到心仪的工作 ― You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub<#6 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ALR5KYKK5WQMWP5JCTVIFK3RJHQGTANCNFSM4LQBMNOA>.