cole
/
MyQRCode
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor ContentView and ScannerView to replace modal presentation with NavigationLink for scanning; remove unused state variables and close button, enhancing navigation flow and user experience.

Browse Source
main
v504 2 months ago
parent fd18b7b683
commit 3d4cdccc22
4 changed files with 258 additions and 28 deletions
Show Stats Download Patch File Download Diff File

10
MyQrCode/ContentView.swift
Unescape View File

@ -9,7 +9,6 @@ import SwiftUI
struct ContentView: View {
@StateObject private var languageManager = LanguageManager.shared
@State private var showScanner = false
@State private var scannedResult: String?
var body: some View {
@ -33,10 +32,8 @@ struct ContentView: View {
.multilineTextAlignment(.center)
.padding(.horizontal)
// 扫描按钮
Button(action: {
showScanner = true
}) {
// 扫描按钮 - 改为NavigationLink
NavigationLink(destination: ScannerView()) {
HStack {
Image(systemName: "camera.fill")
Text("start_scanning".localized)
@ -104,9 +101,6 @@ struct ContentView: View {
.navigationTitle("MyQrCode")
.navigationBarTitleDisplayMode(.inline)
}
.sheet(isPresented: $showScanner) {
ScannerView()
}
.onReceive(NotificationCenter.default.publisher(for: .scannerDidScanCode)) { notification in
if let result = notification.object as? String {
scannedResult = result

14
MyQrCode/ScannerView/ScannerView.swift
Unescape View File

@ -11,8 +11,6 @@ struct ScannerView: View {
@State private var screenOrientation = UIDevice.current.orientation
@State private var previewLayer: AVCaptureVideoPreviewLayer?
@Environment(\.dismiss) private var dismiss
var body: some View {
ZStack {
// 相机权限检查
@ -25,8 +23,7 @@ struct ScannerView: View {
ScanningOverlayView(
showPreviewPause: showPreviewPause,
selectedStyle: $selectedScanningStyle,
detectedCodesCount: scannerViewModel.detectedCodes.count,
onClose: { dismiss() }
detectedCodesCount: scannerViewModel.detectedCodes.count
)
// 条码位置标记覆盖层
@ -59,6 +56,9 @@ struct ScannerView: View {
)
}
}
.navigationTitle("扫描器")
.navigationBarTitleDisplayMode(.inline)
.navigationBarBackButtonHidden(false)
.onAppear {
// 只有在相机权限已授权时才启动扫描
if scannerViewModel.cameraAuthorizationStatus == .authorized {
@ -120,7 +120,7 @@ struct ScannerView: View {
logInfo(" 格式化结果: \(formattedResult)", className: "ScannerView")
NotificationCenter.default.post(name: .scannerDidScanCode, object: formattedResult)
dismiss()
// 使用导航返回，不需要手动dismiss
}
private func pauseForPreview() {
@ -164,7 +164,9 @@ struct ScannerView: View {
#if DEBUG
struct ScannerView_Previews: PreviewProvider {
static var previews: some View {
ScannerView()
NavigationView {
ScannerView()
}
}
}
#endif

16
MyQrCode/ScannerView/ScanningOverlayView.swift
Unescape View File

@ -5,7 +5,6 @@ struct ScanningOverlayView: View {
let showPreviewPause: Bool
@Binding var selectedStyle: ScanningLineStyle
let detectedCodesCount: Int
let onClose: () -> Void
var body: some View {
VStack {
@ -27,8 +26,7 @@ struct ScanningOverlayView: View {
// 底部按钮区域
ScanningBottomButtonsView(
showPreviewPause: showPreviewPause,
selectedStyle: $selectedStyle,
onClose: onClose
selectedStyle: $selectedStyle
)
}
}
@ -70,7 +68,6 @@ struct ScanningInstructionView: View {
struct ScanningBottomButtonsView: View {
let showPreviewPause: Bool
@Binding var selectedStyle: ScanningLineStyle
let onClose: () -> Void
var body: some View {
VStack(spacing: 15) {
@ -79,16 +76,7 @@ struct ScanningBottomButtonsView: View {
ScanningStyleSelectorView(selectedStyle: $selectedStyle)
}
// 关闭按钮 - 只在非预览选择状态时显示
if !showPreviewPause {
Button("close_button".localized) {
onClose()
}
.foregroundColor(.white)
.padding()
.background(Color.black.opacity(0.6))
.cornerRadius(10)
}
// 移除关闭按钮，因为现在使用导航返回
}
.padding(.bottom, 50)
}

246
docs/SCANNER_VIEW_NAVIGATION_README.md
Unescape View File

@ -0,0 +1,246 @@
# ScannerView 导航方式修改说明
## 🎯 修改目标
将 `ScannerView` 的展示方式从 `sheet` 模态弹窗改为 `NavigationLink` 导航方式，提供更好的用户体验和导航一致性。
## 🔄 主要修改内容
### 1. **ContentView.swift 的修改**
#### 移除的状态变量
```swift
// 移除
@State private var showScanner = false
```
#### 修改扫描按钮
```swift
// 修改前：使用 Button + sheet
Button(action: {
showScanner = true
}) {
// 按钮内容
}
.sheet(isPresented: $showScanner) {
ScannerView()
}
// 修改后：使用 NavigationLink
NavigationLink(destination: ScannerView()) {
// 按钮内容
}
```
#### 移除 sheet 修饰符
```swift
// 移除
.sheet(isPresented: $showScanner) {
ScannerView()
}
```
### 2. **ScannerView.swift 的修改**
#### 移除环境变量
```swift
// 移除
@Environment(\.dismiss) private var dismiss
```
#### 添加导航标题和样式
```swift
.navigationTitle("扫描器")
.navigationBarTitleDisplayMode(.inline)
.navigationBarBackButtonHidden(false)
```
#### 修改关闭逻辑
```swift
// 修改前
onClose: { dismiss() }
// 修改后
onClose: { /* 导航会自动返回 */ }
// 修改前
dismiss()
// 修改后
// 使用导航返回，不需要手动dismiss
```
#### 更新预览
```swift
#if DEBUG
struct ScannerView_Previews: PreviewProvider {
static var previews: some View {
NavigationView {
ScannerView()
}
}
}
#endif
```
### 3. **ScanningOverlayView.swift 的修改**
#### 移除 onClose 参数
```swift
// 修改前
struct ScanningOverlayView: View {
let showPreviewPause: Bool
@Binding var selectedStyle: ScanningLineStyle
let detectedCodesCount: Int
let onClose: () -> Void // 移除
}
// 修改后
struct ScanningOverlayView: View {
let showPreviewPause: Bool
@Binding var selectedStyle: ScanningLineStyle
let detectedCodesCount: Int
}
```
#### 移除关闭按钮
```swift
// 修改前
if !showPreviewPause {
Button("close_button".localized) {
onClose()
}
// 按钮样式
}
// 修改后
// 移除关闭按钮，因为现在使用导航返回
```
#### 更新调用方式
```swift
// 修改前
ScanningOverlayView(
showPreviewPause: showPreviewPause,
selectedStyle: $selectedScanningStyle,
detectedCodesCount: scannerViewModel.detectedCodes.count,
onClose: { dismiss() }
)
// 修改后
ScanningOverlayView(
showPreviewPause: showPreviewPause,
selectedStyle: $selectedScanningStyle,
detectedCodesCount: scannerViewModel.detectedCodes.count
)
```
## 🚀 修改的优势
### 1. **用户体验改进**
- **导航一致性**: 与应用的导航结构保持一致
- **返回手势**: 支持 iOS 的滑动返回手势
- **导航历史**: 用户可以清楚地看到导航层级
### 2. **界面布局优化**
- **全屏显示**: 扫描器可以充分利用屏幕空间
- **状态栏**: 保持状态栏的显示，提供更好的系统集成
- **导航栏**: 显示标题和返回按钮，提供清晰的上下文
### 3. **代码简化**
- **移除状态管理**: 不需要管理 `showScanner` 状态
- **简化回调**: 不需要 `onClose` 回调函数
- **自动返回**: 导航系统自动处理返回逻辑
### 4. **系统集成**
- **系统导航**: 利用 iOS 原生的导航机制
- **内存管理**: 系统自动管理视图的生命周期
- **转场动画**: 使用系统标准的导航转场动画
## 📱 界面变化对比
### 修改前 (Sheet 方式)
- 模态弹窗覆盖整个屏幕
- 需要手动关闭或 dismiss
- 不支持滑动返回手势
- 状态栏可能被隐藏
### 修改后 (Navigation 方式)
- 集成到导航栈中
- 自动显示返回按钮
- 支持滑动返回手势
- 保持状态栏显示
- 显示导航标题
## 🔧 技术实现细节
### 1. **NavigationLink 的使用**
```swift
NavigationLink(destination: ScannerView()) {
HStack {
Image(systemName: "camera.fill")
Text("start_scanning".localized)
}
// 按钮样式
}
```
### 2. **导航标题设置**
```swift
.navigationTitle("扫描器")
.navigationBarTitleDisplayMode(.inline)
.navigationBarBackButtonHidden(false)
```
### 3. **自动返回机制**
- 扫描完成后，用户可以通过返回按钮或手势返回
- 不需要手动调用 `dismiss()`
- 系统自动管理导航栈
## 🧪 测试要点
### 1. **导航功能测试**
- ✅ 点击扫描按钮正确导航到 ScannerView
- ✅ 返回按钮正常工作
- ✅ 滑动返回手势正常响应
- ✅ 导航标题正确显示
### 2. **扫描功能测试**
- ✅ 扫描功能正常工作
- ✅ 扫描完成后可以正常返回
- ✅ 权限管理正常工作
- ✅ UI 组件正常显示
### 3. **界面布局测试**
- ✅ 扫描器充分利用屏幕空间
- ✅ 状态栏正常显示
- ✅ 导航栏样式正确
- ✅ 返回按钮位置正确
## 🚨 注意事项
### 1. **导航栈管理**
- 确保 `ScannerView` 正确集成到导航栈中
- 避免创建多个导航视图
- 保持导航层级清晰
### 2. **状态管理**
- 移除不再需要的状态变量
- 确保扫描状态在返回时正确清理
- 保持数据流的清晰性
### 3. **用户体验**
- 保持扫描界面的全屏体验
- 确保返回操作直观易懂
- 维持扫描功能的完整性
## 📊 修改总结
通过这次修改，我们成功地将 `ScannerView` 从 sheet 模态弹窗改为导航方式，主要变化包括：
1. **ContentView**: 使用 `NavigationLink` 替代 `Button + sheet`
2. **ScannerView**: 添加导航标题，移除 `dismiss` 逻辑
3. **ScanningOverlayView**: 移除关闭按钮和 `onClose` 参数
4. **整体体验**: 提供更一致、更直观的导航体验
这次修改不仅简化了代码结构，还提升了用户体验，使扫描功能更好地集成到应用的导航系统中。用户现在可以通过标准的导航方式访问扫描器，享受更流畅、更一致的应用体验。
Write Preview
Loading…
Cancel
Save