SwiftUI：如何在列表底部添加渐变提示更多内容

你的问题出在mask的作用对象和布局结构上：当前的mask是给包裹列表的整个VStack添加的，而这个VStack的高度由内部列表内容的实际高度决定，导致渐变无法固定在列表底部。下面提供两种可行的修复方案：

方案一：使用Overlay替代Mask（推荐） #

直接在列表上叠加渐变层，通过alignment: .bottom固定在底部，并设置渐变的高度，这样不管列表内容多少，渐变都会显示在列表底部：

private var directionsList: some View {
    ScrollViewReader { proxy in
        VStack(alignment: .leading, spacing: 8.0) {
            let displaySteps: [DirectionSteps] = [] // 你的数据
            if !displaySteps.isEmpty {
                List(displaySteps, id: \.self) { detail in
                    HStack {
                        // 你的列表内容
                    }
                    .id(detail.directionIndex)
                    .listRowBackground(Color.gray)
                }
                .listStyle(.plain)
                .foregroundColor(.white)
                .background(Color.lightGray)
                .padding([.leading, .trailing], 20.0)
                // 添加底部渐变overlay
                .overlay(
                    LinearGradient(
                        stops: [
                            Gradient.Stop(color: Color(red: 0.17, green: 0.17, blue: 0.18), location: 0.00),
                            Gradient.Stop(color: Color(red: 0.17, green: 0.17, blue: 0.18).opacity(0), location: 1.00)
                        ],
                        startPoint: .bottom,
                        endPoint: .top
                    )
                    .frame(height: 40) // 设置渐变高度，可根据需求调整
                    .alignmentGuide(.bottom) { $0[.bottom] },
                    alignment: .bottom
                )
            } else {
                Color.clear
            }
        }
        .padding(.horizontal, -20.0)
    }
}

方案二：调整Mask的布局结构 #

如果坚持使用Mask，需要让mask中的渐变只占据底部固定高度，通过Spacer()让上方的空白区域填满剩余空间，确保渐变固定在底部：

private var directionsList: some View {
    ScrollViewReader { proxy in
        VStack(alignment: .leading, spacing: 8.0) {
            let displaySteps: [DirectionSteps] = [] // 你的数据
            if !displaySteps.isEmpty {
                List(displaySteps, id: \.self) { detail in
                    HStack {
                        // 你的列表内容
                    }
                    .id(detail.directionIndex)
                    .listRowBackground(Color.gray)
                }
                .listStyle(.plain)
                .foregroundColor(.white)
                .background(Color.lightGray)
                .padding([.leading, .trailing], 20.0)
            } else {
                Color.clear
            }
        }
        .padding(.horizontal, -20.0)
        .mask(
            VStack(spacing: 0) {
                // 用Spacer填满上方空间
                Spacer()
                // 渐变只占底部固定高度
                LinearGradient(
                    stops: [
                        Gradient.Stop(color: Color(red: 0.17, green: 0.17, blue: 0.18), location: 0.00),
                        Gradient.Stop(color: Color(red: 0.17, green: 0.17, blue: 0.18).opacity(0), location: 1.00)
                    ],
                    startPoint: .bottom,
                    endPoint: .top
                )
                .frame(height: 40)
            }
        )
    }
}

注意：两种方案中，你可以根据需求调整渐变的height值，让过渡效果更自然。如果列表内容不足一屏，渐变依然会显示在列表底部，符合你的需求。

内容的提问来源于stack exchange，提问作者tech_human