需要条形图以适应 Section()

Question

Swift 新手UI。我有一个包含两个 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的space不够了，所以

第 1 步：尝试删除额外的填充 - Form 本身有足够的插图

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

第二：给出所有可用的 space 条，例如

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 (但也可能会影响其他内容，因此需要额外对齐 in-place) - 将 Form inset 设置为零，喜欢

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

需要条形图以适应 Section()

Need Bar Chart to fit inside Section()

swift

swiftui

swiftui-form