我想要做的幾乎與我嘗試使用的徽章MacOS和設備相同，但它只支持, , ,但我想將我的電池徽章更新為當前的電池電量。iOSSFSymbols%0%Pu0

我嘗試使用帶有重疊battery.0圖示的圖示，如下所示：SFSymbolsRoundedRectangle

struct BatteryView : View {
    var body: some View {
            ZStack {
                Image(systemName: "battery.0")
                RoundedRectangle(cornerRadius: 15)
                    .foregroundColor(.green)
            }
    }
}

但是當我嘗試放大或縮小它時，它的行為真的很奇怪，因為RoundedRectangle.

提前致謝！

uj5u.com熱心網友回復：

這是我想出的：

據我所見，battery圖示SFSymbols僅包含 3 個元素，一個圓角矩形，一個位于電池頂部的半圓，另一個指示當前電池電量的圓角矩形。

第一個圓角矩形（電池盒）

struct BatteryView : View {
    var body: some View {
        GeometryReader { geo in
            RoundedRectangle(cornerRadius: 15)
                .stroke(lineWidth: 3)
       } 
   }
}

它看起來像這樣（aframe為 180、60）：

我只是按照你的建議使用了一個圓角矩形作為電池盒。

半圈

HalfCircleShape我為此創建了一個簡單的形狀。

struct HalfCircleShape : Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()
        
        path.move(to: CGPoint(x: rect.minX, y: rect.midY))
        path.addArc(center: CGPoint(x: rect.minX, y: rect.midY), radius: rect.height , startAngle: .degrees(90), endAngle: .degrees(270), clockwise: true)
        return path
    }
}

并且在GeometryReader我給出了當前幀的 1/7 的幀，因為它看起來很優雅。

我將這些與HStack

像這樣：

GeometryReader { geo in
    HStack {
        RoundedRectangle(cornerRadius: 15)
            .stroke(lineWidth: 3)
        
        HalfCircleShape()
            .frame(width: geo.size.width / 7, height: geo.size.height / 7)
    }
}

電池指示燈

我創建了一個擴展Color來選擇當前電池電量的顏色

extension Color {
    static var BatteryLevel : Color {
        let batteryLevel = 0.6
        print(batteryLevel)
        switch batteryLevel {
            // returns red color for range %0 to  
            case 0...0.2:
                return Color.red
            // returns yellow color for range   to P
            case 0.2...0.5:
                return Color.yellow
            // returns green color for range P to 0
            case 0.5...1.0:
                return Color.green
            default:
                return Color.clear
        }
    }
}

我剛剛創建了另一個RoundedRectangle并將兩個RoundedRectangles 組合成一個ZStack

結果如下所示：

最終代碼：

import SwiftUI

struct ContentView: View {
    var body: some View {
            BatteryView()
            .frame(width: 170, height: 60)
            .padding()
    }
}

struct HalfCircleShape : Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()
        
        path.move(to: CGPoint(x: rect.minX, y: rect.midY))
        path.addArc(center: CGPoint(x: rect.minX, y: rect.midY), radius: rect.height , startAngle: .degrees(90), endAngle: .degrees(270), clockwise: true)
        return path
    }
}

struct BatteryView : View {
    init() {
        UIDevice.current.isBatteryMonitoringEnabled = true
    }
    var body: some View {
        // UIDevice.current.batteryLevel always returns -1, and I don't know why. so here's a value for you to preview
        let batteryLevel = 0.4
        GeometryReader { geo in
            HStack(spacing: 5) {
                GeometryReader { rectangle in
                    RoundedRectangle(cornerRadius: 15)
                        .stroke(lineWidth: 3)
                    RoundedRectangle(cornerRadius: 15)
                        .padding(5)
                        .frame(width: rectangle.size.width - (rectangle.size.width * (1 - batteryLevel)))
                        .foregroundColor(Color.BatteryLevel)
                }
                HalfCircleShape()
                .frame(width: geo.size.width / 7, height: geo.size.height / 7)
                
            }
            .padding(.leading)
        }
    }
}

extension Color {
    static var BatteryLevel : Color {
        let batteryLevel = 0.4
        print(batteryLevel)
        switch batteryLevel {
            // returns red color for range %0 to  
            case 0...0.2:
                return Color.red
            // returns yellow color for range   to P
            case 0.2...0.5:
                return Color.yellow
            // returns green color for range P to 0
            case 0.5...1.0:
                return Color.green
            default:
                return Color.clear
        }
    }
}

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

此外，在 中 UIDevice，有一個名為的屬性batteryLevel可以為您提供當前的電池電量，但在這種情況下，它只回傳 -1，它看起來像一個SwiftUI錯誤，所以我將創建另一個StackOverFlow問題并在此處留下一個鏈接。

標籤：IOS迅速迅捷电池

上一篇：即使遵循相同的腳本，日期選擇器也不起作用

下一篇：如何在appconnect儀表板中檢查應用程式崩潰的原因？