5.5 KiB

Raw Blame History Unescape Escape

二维码详情页操作按钮布局优化记录

优化概述

对二维码详情页的操作按钮区域进行了全面的布局优化，将垂直布局改为水平布局，并将文字按钮改为纯图标按钮，提升了界面的美观度和用户体验。

具体优化内容

布局结构优化

文件: MyQrCode/Views/History/QRCodeDetailView.swift

修改内容:

将操作按钮从垂直布局（VStack）改为水平布局（HStack）
移除了按钮中的文字标签，只保留图标
优化了按钮间距和尺寸

修改前:

private var actionButtonsSection: some View {
    VStack(spacing: 12) {
        // 收藏按钮
        Button(action: toggleFavorite) {
            HStack {
                Image(systemName: historyItem.isFavorite ? "heart.fill" : "heart")
                    .foregroundColor(historyItem.isFavorite ? .red : .gray)
                
                Text(historyItem.isFavorite ? "unfavorite".localized : "favorite".localized)
                    .fontWeight(.medium)
            }
            .frame(maxWidth: .infinity)
            .padding()
            .background(historyItem.isFavorite ? Color.red.opacity(0.1) : Color.gray.opacity(0.1))
            .foregroundColor(historyItem.isFavorite ? .red : .gray)
            .cornerRadius(10)
        }
        
        // 复制内容按钮
        Button(action: copyContent) {
            HStack {
                Image(systemName: "doc.on.doc")
                    .foregroundColor(.blue)
                
                Text("copy_content".localized)
                    .fontWeight(.medium)
            }
            .frame(maxWidth: .infinity)
            .padding()
            .background(Color.blue.opacity(0.1))
            .foregroundColor(.blue)
            .cornerRadius(10)
        }
        
        // 打开链接按钮（如果是URL类型）
        if let content = historyItem.content, canOpenURL(content) {
            Button(action: { openURL(content) }) {
                HStack {
                    Image(systemName: "arrow.up.right.square")
                        .foregroundColor(.green)
                    
                    Text("open_link".localized)
                        .fontWeight(.medium)
                }
                .frame(maxWidth: .infinity)
                .padding()
                .background(Color.green.opacity(0.1))
                .foregroundColor(.green)
                .cornerRadius(10)
            }
        }
    }
    .padding()
    .background(Color(.systemBackground))
    .cornerRadius(12)
    .shadow(radius: 2)
}

修改后:

private var actionButtonsSection: some View {
    HStack(spacing: 16) {
        // 收藏按钮
        Button(action: toggleFavorite) {
            Image(systemName: historyItem.isFavorite ? "heart.fill" : "heart")
                .font(.system(size: 24, weight: .semibold))
                .foregroundColor(historyItem.isFavorite ? .red : .gray)
                .frame(width: 60, height: 60)
                .background(historyItem.isFavorite ? Color.red.opacity(0.1) : Color.gray.opacity(0.1))
                .cornerRadius(12)
        }
        
        // 复制内容按钮
        Button(action: copyContent) {
            Image(systemName: "doc.on.doc")
                .font(.system(size: 24, weight: .semibold))
                .foregroundColor(.blue)
                .frame(width: 60, height: 60)
                .background(Color.blue.opacity(0.1))
                .cornerRadius(12)
        }
        
        // 打开链接按钮（如果是URL类型）
        if let content = historyItem.content, canOpenURL(content) {
            Button(action: { openURL(content) }) {
                Image(systemName: "arrow.up.right.square")
                    .font(.system(size: 24, weight: .semibold))
                    .foregroundColor(.green)
                    .frame(width: 60, height: 60)
                    .background(Color.green.opacity(0.1))
                    .cornerRadius(12)
            }
        }
        
        Spacer()
    }
    .padding()
    .background(Color(.systemBackground))
    .cornerRadius(12)
    .shadow(radius: 2)
}

优化效果

界面美观度

✅ 更现代: 水平布局更符合现代UI设计趋势
✅ 更简洁: 纯图标按钮占用空间更小，界面更加简洁
✅ 更平衡: 按钮均匀分布，视觉更加平衡
✅ 更一致: 统一的按钮样式和尺寸

用户体验

✅ 更直观: 图标按钮功能一目了然
✅ 更易用: 按钮间距适中，便于点击操作
✅ 更高效: 减少了文字阅读时间，提升操作效率

技术优势

✅ 编译成功: 所有修改都通过了编译测试
✅ 功能完整: 完全保留了原有的所有功能
✅ 响应性: 保持了原有的交互逻辑和状态管理
✅ 扩展性: 水平布局便于后续添加更多操作按钮

按钮功能说明

收藏按钮

图标: heart / heart.fill
颜色: 灰色（未收藏）/ 红色（已收藏）
功能: 切换收藏状态

复制内容按钮

图标: doc.on.doc
颜色: 蓝色
功能: 复制二维码内容到剪贴板

打开链接按钮（条件显示）

图标: arrow.up.right.square
颜色: 绿色
功能: 打开二维码中的链接（仅当内容为URL时显示）

总结

这次优化成功将二维码详情页的操作按钮从垂直文字布局改为水平图标布局，提升了界面的现代感和用户体验，同时保持了所有功能的完整性和一致性。

5.5 KiB Raw Blame History Unescape Escape