占用太多空间的 Swiftui 小部件列表

Posted

技术标签:

【中文标题】占用太多空间的 Swiftui 小部件列表【英文标题】:Swift ui widget list of items that take up too much space 【发布时间】:2021-07-14 08:32:34 【问题描述】:

从图片中您可以看到,我有一个带有一系列元素的小部件,我必须在一系列元素的末尾加上单词Next update,它必须在小部件的末尾找到一些。

问题是:

如果元素很少,Next update 太高了。 如果元素很多,则不会显示Next update 消息。

你能帮帮我吗?

附言

如果您认为应该以不同的方式书写,请告诉我,提前谢谢您。

struct GitCommitWidgetEntryView : View 
    var entry: ProviderCommit.Entry
    @Environment(\.colorScheme) var colorScheme
    let firstColor: UInt = getDate() ? 0x4688B4 : 0x030721
    
    var body: some View 
        GeometryReader  geometry in
            if(entry.loading)
                if(!entry.error)
                    VStack() 
                        if(entry.user != "")
                            HStack 
                                Spacer()
                                Text("\(entry.user) (\(entry.commits.count))")
                                    .font(.caption)
                                    .foregroundColor(Color.black)
                                    .shadow(
                                        color: Color.black,
                                        radius: 1.0,
                                        x: CGFloat(1),
                                        y: CGFloat(1)
                                    )
                                Spacer()
                            
                            .background(Color(hex: 0xff9800))
                        
                        if(entry.commits.count > 0)
                            ForEach(entry.commits, id:\.id)
                                item in
                                Text(item.commit.message)
                                    .shadow(
                                        color: Color.black,
                                        radius: 1.0,
                                        x: CGFloat(1),
                                        y: CGFloat(1)
                                    )
                                Text("\(item.author.login) \(convertDate(date: item.commit.author.date))")
                                    .shadow(
                                        color: Color.black,
                                        radius: 1.0,
                                        x: CGFloat(1),
                                        y: CGFloat(1)
                                    )
                                Divider()
                            
                            .frame(alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
                        else
                            Text("There are no repositories.")
                                .font(.caption)
                                .foregroundColor(Color.black)
                                .padding(2)
                                .background(Color.white.opacity(0.4))
                                .cornerRadius(5)
                                .padding(.bottom, 3)
                                .padding(.horizontal, /*@START_MENU_TOKEN@*/10/*@END_MENU_TOKEN@*/)
                                .multilineTextAlignment(.center)
                                .frame(maxWidth: .infinity, maxHeight: /*@START_MENU_TOKEN@*/.infinity/*@END_MENU_TOKEN@*/, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
                        
                        HStack 
                            Spacer()
                            Text("Next update")
                                .font(.caption)
                                .foregroundColor(Color.black)
                                .multilineTextAlignment(.center)
                                .shadow(
                                    color: Color.black,
                                    radius: 1.0,
                                    x: CGFloat(1),
                                    y: CGFloat(1)
                                )
                            Spacer()
                        
                        .background(Color(hex: 0xff9800))
                    
                    .background(LinearGradient(
                                    gradient: Gradient(colors: [
                                        Color(hex: firstColor),
                                        Color(hex: 0xffffff)
                                    ]),
                                    startPoint: .top,
                                    endPoint: .bottom)
                    )
                else
                    VStack() 
                        Text("No user exist.")
                            .font(.caption)
                            .foregroundColor(Color.black)
                            .padding(2)
                            .background(Color.white.opacity(0.4))
                            .cornerRadius(5)
                            .padding(.bottom, 3)
                            .padding(.horizontal, /*@START_MENU_TOKEN@*/10/*@END_MENU_TOKEN@*/)
                            .multilineTextAlignment(.center)
                    
                    .frame(maxWidth: .infinity, maxHeight: /*@START_MENU_TOKEN@*/.infinity/*@END_MENU_TOKEN@*/, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
                    .background(Color.red)
                
            else
                VStack() 
                    Text("No user selected.")
                        .font(.caption)
                        .foregroundColor(Color.black)
                        .padding(2)
                        .background(Color.white.opacity(0.4))
                        .cornerRadius(5)
                        .padding(.bottom, 3)
                        .padding(.horizontal, /*@START_MENU_TOKEN@*/10/*@END_MENU_TOKEN@*/)
                        .multilineTextAlignment(.center)
                
                .frame(maxWidth: .infinity, maxHeight: /*@START_MENU_TOKEN@*/.infinity/*@END_MENU_TOKEN@*/, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
                .background(Color.green)
            
        
    

【问题讨论】:

【参考方案1】:

您需要的方法是将“标签始终在屏幕上”和“不断增长的列表”分开,示意性地应该是这样的

VStack 
  Text("Header label")
  Spacer()
  Text("Footer label")

.background(
   VStack 
     Text("Header label").opacity(0)     // for content offset
                                    // or constant height spacer
     ForEach ... // list here
   

【讨论】:

我按照你的指示做了,但我不明白我做错了什么。正如您从顶部的图像中看到的那样,一些文本被剪切了。 user-images.githubusercontent.com/20476002/… 代码:pastebin.com/Gaxmc3MF

以上是关于占用太多空间的 Swiftui 小部件列表的主要内容,如果未能解决你的问题,请参考以下文章

隐藏 UIView 并调整其他小部件以占用空间?

Flutter - 如何让方形小部件连续占用其最大可能空间?

SwiftUI 小部件无法刷新

Flutter中具有最小高度的扩展小部件

SwiftUI 小部件中的 UIKit UserDefaults

SwiftUI 中的小部件 UI 预览