需要條形圖適合Section()

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")
    }
}

uj5u.com熱心網友回復：

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

第一：嘗試洗掉額外的填充 -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：也許可選，也許可以與2nd結合（但也可能影響其他內容，因此需要額外的就地對齊） - 將 Form inset 設定為零，如

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

標籤：迅速 迅捷 swiftui形式

上一篇：如何提供帶有“Content-Encoding:gzip”標頭的檔案？

下一篇：屬性包裝器：將空更改為可選