将视图固定到屏幕底部并忽略底部安全区域

Question

布局问题 - 如何设置视图块以扩展到底部安全区域？我已经查看了 ignoresSafeAreas() 的各种来源，但无法达到我正在寻找的结果。 稍后，我希望能够向上扩展此视图，但开始时要简短。如果这是有道理的。

const ordersCountController = async (req, res) => {

    try {
        const data = await ordersCountService();
        console.log(data);
        res.json({data})
    } catch(err) {
        console.log(err);
    }
};

Answer 1

选项 1

将 ignoresSafeArea 放入 background。这将使红色延伸到设备边缘，但 HStack 的位置将保持不变。

struct ContentView: View {
    var body: some View {
        VStack{
            Spacer()
            
            HStack(alignment: .center) {
                Text ("Expand to fill bottom safe area ...?")
                    .foregroundColor(.white)
            }
            
            .frame(minWidth: 100, maxWidth: .infinity, minHeight: 50, maxHeight: 100)
            .background(Color.red.ignoresSafeArea()) /// inside `background`
        }
    }
}

选项 2

将 ignoresSafeArea 放在 VStack 上，一切都会忽略安全区域。

struct ContentView: View {
    var body: some View {
        VStack{
            Spacer()
            
            HStack(alignment: .center) {
                Text ("Expand to fill bottom safe area ...?")
                    .foregroundColor(.white)
            }
            
            .frame(minWidth: 100, maxWidth: .infinity, minHeight: 50, maxHeight: 100)
            .background(Color.red)
        }
        .ignoresSafeArea() /// attached to `VStack`
    }
}

结果：

<头>

选项 1	选项 2