需要條形圖以適應 Section()

Question

SwiftUI 的新手。我有一個包含兩個 Section() 的簡單表單。 在其中一個部分中，我已將 SwiftUICharts() 中的 BarChartView() 放入，如下所示。

條形圖不適合該部分，需要幫助才能在 Section() 中正確適合條形圖。 我附上了 UI 在模擬器中的外觀截圖。

我的主要目標是在此屏幕上獲得整個數據的滾動視圖行為，因此我將條形圖放在表單中。

我不能將條形圖放在表格之外，因為這樣只有表格滾動，條形圖不會滾動。 （我知道將整個表單放入 ScrollView() 中效果不佳）。

import SwiftUICharts
import SwiftUI

struct TestView: View {
    @State var pickerSelectedItem = 0
    
    var body: some View {
        Form{
            Section(){
                VStack{
                    Picker(selection: $pickerSelectedItem, label: Text("")) {
                        Text("Pass").tag(0)
                    }
                    .pickerStyle(SegmentedPickerStyle())
                    .padding(.horizontal, 24)
                    
                    if (pickerSelectedItem == 0) {
                        BarChartView(data: ChartData(values: [("12 Feb 2021",10.22), ("13 Feb 2021",20.44), ("14 Feb 2021",25.34), ("15 Feb 2021",30.56), ("16 Feb 2021",40),("17 Feb 2021",50), ("18 Feb 2021",60), ("19 Feb 2021",65), ("20 Feb 2021",70), ("21 Feb 2021",80),("22 Feb 2021",80), ("23 Feb 2021",90), ("24 Feb 2021",91), ("25 Feb 2021",90.99), ("26 Feb 2021",92.86)]), title: "Pass %", legend: "Dates",
                                     style: Styles.barChartStyleNeonBlueLight, form: ChartForm.extraLarge,
                                     cornerImage:Image(systemName: "face.smiling.fill"),valueSpecifier: "%.2f")
                    }
                }
                .padding()
            }
            
            Section(header: Text("12 Dec 2021")) {
                DisclosureGroup(
                    content: {Text("test status")
                            .font(Font.custom("Avenir", size: 15))
                    },
                    label: {Text("Updates:")
                        .font(Font.custom("Avenir Heavy", size: 16))}
                )
            }
        }
        .accentColor(.black)
        .navigationBarTitle("Status")
    }
}

如果我將 BarChartView() 放在表單之外，那么我可以看到圖表適合，但這樣做我失去了圖表的滾動，只有它下面的表單滾動。

這篇文章的代碼在屏幕截圖下方。

import SwiftUICharts
import SwiftUI

struct TestView: View {
@State var pickerSelectedItem = 0
    
    var body: some View {
                        VStack{
                            Picker(selection: $pickerSelectedItem, label: Text("")) {
                                Text("Pass").tag(0)
                            }
                            .pickerStyle(SegmentedPickerStyle())
                            .padding(.horizontal, 24)
        
                            if (pickerSelectedItem == 0) {
                                BarChartView(data: ChartData(values: [("12 Feb 2021",10.22), ("13 Feb 2021",20.44), ("14 Feb 2021",25.34), ("15 Feb 2021",30.56), ("16 Feb 2021",40),("17 Feb 2021",50), ("18 Feb 2021",60), ("19 Feb 2021",65), ("20 Feb 2021",70), ("21 Feb 2021",80),("22 Feb 2021",80), ("23 Feb 2021",90), ("24 Feb 2021",91), ("25 Feb 2021",90.99), ("26 Feb 2021",92.86)]), title: "Pass %", legend: "Dates",
                                             style: Styles.barChartStyleNeonBlueLight, form: ChartForm.extraLarge,
                                             cornerImage:Image(systemName: "face.smiling.fill"),valueSpecifier: "%.2f")
                            }
                        }
                        .padding()
        
        Form{
            Section(header: Text("12 Dec 2021")) {
                DisclosureGroup(
                    content: {Text("test status")
                            .font(Font.custom("Avenir", size: 15))
                    },
                    label: {Text("Updates:")
                        .font(Font.custom("Avenir Heavy", size: 16))}
                )
            }
        }
        .accentColor(.black)
        .navigationBarTitle("Status")
    }
}

Answer 1

很明顯BarChartView沒有足夠的空間，所以

1st：嘗試刪除額外的填充 - Form本身有足夠的插圖

VStack{
  // content here
}
//.padding()        // << this one !!

第二：為酒吧提供所有可用空間，例如

BarChartView(data: ChartData(values: [("12 Feb 2021",10.22), ("13 Feb 2021",20.44), ("14 Feb 2021",25.34), ("15 Feb 2021",30.56), ("16 Feb 2021",40),("17 Feb 2021",50), ("18 Feb 2021",60), ("19 Feb 2021",65), ("20 Feb 2021",70), ("21 Feb 2021",80),("22 Feb 2021",80), ("23 Feb 2021",90), ("24 Feb 2021",91), ("25 Feb 2021",90.99), ("26 Feb 2021",92.86)]), title: "Pass %", legend: "Dates",
             style: Styles.barChartStyleNeonBlueLight, form: ChartForm.extraLarge,
             cornerImage:Image(systemName: "face.smiling.fill"),valueSpecifier: "%.2f")
 .frame(maxWidth: .infinity, alignment: .leading)   // here !!

3d: Maybe optional maybe can be combined with 2nd (but also might affect other content, so require additional alignments in-place) - 將 Form inset 設置為零，比如

VStack{
  // content here
}
.listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0)) // << here !!