iOS 17中SwiftUI列表侧滑按钮如何同时显示图标与文字？

我在iOS 17系统上运行应用，已经给列表行添加了侧滑操作，但目前只能显示图标，想要实现图标下方同时显示文字的效果。

代码：

import SwiftUI
import Foundation

struct ContentView: View {
    var body: some View {
        NavigationStack {
            VStack {
                List {
                    Section {
                        HStack {
                            Text("Hello World").font(.body)
                            Spacer()
                           
                            Divider().frame(width: 3.0)
                                .overlay(Color.blue).padding(.trailing, -50.0).padding([.top, .bottom], -1.5)
                        }
                        .padding([.top, .bottom], 1.5)
                        .swipeActions(allowsFullSwipe: false) {
                            Button(role: .destructive) {
                                print("Deleting row")
                            } label: {
                                /// Note: Want to show Image and text below it.
                                VStack(spacing: 2.0) {
                                    Image(systemName: "trash")
                                    Text("Delete").font(.caption2)
                                }
                                
                                /// Note: Using label as well doesn't show both text and icon. It only shows the icon.
                                // Label("Delete", systemImage: "trash")
                            }
                            
                            // TODO: Add more swipe action buttons
                        }
                    }
                }
                .listStyle(.insetGrouped)
            }
        }
    }
}

iOS 17中默认的侧滑操作按钮会采用紧凑水平布局，自动裁剪超出范围的内容。要实现图标+文字垂直排列的效果，需要给按钮标签设置足够的显示空间，并关闭系统的强制裁剪布局：

修改侧滑操作的Button部分代码如下：

Button(role: .destructive) {
    print("Deleting row")
} label: {
    VStack(spacing: 2) {
        Image(systemName: "trash")
        Text("Delete")
            .font(.caption2)
    }
    .frame(width: 60, height: 44) // 设置足够宽高容纳图标和文字
}
.buttonStyle(.plain) // 避免系统对内容进行强制裁剪

原理说明 #

• 通过frame给垂直布局的图标和文字分配固定显示区域，确保内容不会被压缩；
• 使用.plain按钮样式，让系统不再限制按钮内容的布局方式，允许垂直排列的元素完整显示。

如果需要添加多个侧滑操作按钮，只需按相同方式修改每个按钮的label部分即可。

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