SwiftUI动态列表长短时按钮位置自适应实现方案问询

要实现短列表时按钮跟随在列表下方，长列表时按钮固定在屏幕底部，核心是将按钮从List的Section footer中移出，放到List外层的VStack底部，同时调整List的样式和间距适配两种场景。

修改后的代码 #

import SwiftUI

struct ContentView: View {
    let shortList: [String] = ["One", "Two", "Three", "Four", "Five"]
    let longList: [String] = ["One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine", "Ten", "Eleven", "Twelve", "Thirteen", "Fourteen", "Fifteen", "Sixteen", "Seventeen", "Eighteen", "Nineteen", "Twenty", "Twenty One", "Twenty Two"]
    
    @State var showSheet: Bool = false
    
    var body: some View {
        VStack(spacing: 0) {
            // 列表部分
            List {
                ForEach(longList, id: \.self) { value in
                    Text(value).font(.body)
                }
            }
            .listStyle(.plain)
            .padding(.bottom, -8) // 消除List底部默认间距，让按钮紧贴列表
            
            // 固定/跟随按钮
            resetButton
        }
        .sheet(isPresented: $showSheet) { SheetA() }
    }
    
    private var resetButton: some View {
        Button {
            // 执行重置逻辑
        } label: {
            Text("Reset")
                .font(.body.bold())
                .frame(maxWidth: .infinity)
                .frame(height: 30)
                .padding(8)
                .background(Color.mint)
                .foregroundColor(.black)
        }
        .padding(.horizontal, 25)
    }
}

// 示例Sheet视图
struct SheetA: View {
    var body: some View {
        Text("Sheet Content")
    }
}

关键调整说明 #

• 按钮位置迁移：将按钮从List的Section footer移到外层VStack，使其脱离列表滚动区域——长列表时按钮自然固定在屏幕底部；短列表时VStack紧凑排列，按钮自动跟随在列表下方。
• List样式优化：使用.listStyle(.plain)减少列表默认额外间距，再通过.padding(.bottom, -8)消除List底部剩余空白，让短列表场景下按钮与列表衔接更自然。
• 按钮适配优化：用frame(maxWidth: .infinity)替代硬编码屏幕宽度，适配不同设备和横竖屏切换；通过.padding(.horizontal, 25)实现原代码中左右边距的效果。
• ForEach ID优化：将id: \.hashValue改为id: \.self，String本身是Hashable类型，这样更安全可靠。

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