The size of the picture is not displayed properly in the waterfall flow

[wisepmlin]

var coverRow: some View {
        VStack {
            if selectedTask.taskCover != nil {
                Image(uiImage: selectedTask.tTaskCover)
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .cornerRadius(CGFloat.bl_4.double)
                    .blendMode(colorScheme == .dark ? .screen : .normal)
                    .opacity(colorScheme == .dark ? 0.75 : 0.85)
            } else {
                Button(action: {
                    isShowingImagePicker = true
                }, label: {
                    RoundedRectangle(cornerRadius: CGFloat.bl_4.double)
                        .fill(Color.s_c.opacity(0.35))
                        .frame(height: 180)
                        .overlay(Image(systemName: "photo").modifier(SK_20(textColor: Color.t_t_c, weight: .regular)))
                })
            }
        }
    }

[AlexanderOtavka]

I've had the same problem. It seems to be caused when a resizable image is used in a card. If there aren't enough cards to force the grid container size large enough, the images will get squished.

I haven't found a workaround yet, but we either need to find a way to make the waterfall grid create enough space for the images to scale up to their full preferred height, or we need to find a way to tell our images to be more agressive and demand the vertical space they need.

You can reproduce this issue in the sample app either on the images or the cards view by modifying the generator code to only spit out one row's worth of images or cards.

[andrewpang]

I've had the same problem. It seems to be caused when a resizable image is used in a card. If there aren't enough cards to force the grid container size large enough, the images will get squished.

I haven't found a workaround yet, but we either need to find a way to make the waterfall grid create enough space for the images to scale up to their full preferred height, or we need to find a way to tell our images to be more agressive and demand the vertical space they need.

You can reproduce this issue in the sample app either on the images or the cards view by modifying the generator code to only spit out one row's worth of images or cards.

I also have this issue with resizable images in a card. Whenever I have 2 cards (in a 2 column grid), the images get squished into having 0 height (unless I specify a height on it's frame). Whenever I add a 3rd card which seems to make the grid container larger, then all the images display properly.

Does anyone have a fix for this? Even a hack to make it work properly for now?