SwiftUI中如何实现向数组添加随机字符串并正确展示列表？

核心问题 #

1. 列表未展示菜单文本：你的List循环中仅渲染了「Add」按钮，没有将menuItems的字符串内容显示出来，导致原有菜单项完全不可见。
2. 数组越界风险：menuItems仅包含5个元素（索引范围为0...4），但你使用了Int.random(in: 0...6)，会触发数组访问越界崩溃。
3. 按钮位置错误：当前每个列表项都附带一个Add按钮，不符合需求——应该设置一个全局按钮来追加随机项，而非每行都添加按钮。

修复后的代码 #

struct MenuList: View {
    @State var menuItems = ["Sushi","Nigiri","soso","SeaWeed","Boiled Rice"]

    var body: some View {
        VStack {
            // 展示菜单列表项
            List(menuItems, id: \.self) { item in
                Text(item)
                    .font(.body)
            }
            
            // 全局追加按钮
            Button(action: {
                // 安全获取随机元素，避免越界
                guard let randomItem = menuItems.randomElement() else { return }
                menuItems.append(randomItem)
            }) {
                Text("Add")
                    .font(.headline)
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(8)
            }
            .padding(.bottom, 20)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        MenuList()
    }
}

关键修改说明 #

• 调整布局结构：用VStack将列表和按钮分离，把Add按钮放在列表下方，保证全局唯一。
• 显示菜单内容：List的每个行渲染Text(item)，直接展示菜单字符串。
• 安全获取随机项：使用randomElement()替代手动生成索引，自动适配数组长度，同时处理数组为空的边界情况。
• 优化按钮样式：给按钮添加基础样式，提升交互辨识度（可根据需求自行调整）。

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