如何在SwiftUI中更改DatePicker的大小

Question

有人知道如何在SwiftUI中更改默认DatePicker的大小吗？我一直试图提供自定义框架来调整DatePicker的大小，但是效果并不理想。

先行致谢！

以下是我的尝试：

DatePicker("", selection: $currentDate, displayedComponents: .hourAndMinute)
                              .labelsHidden()
                              .frame(width: 150, height: 80, alignment: .center)

- bona912

---

我认为你做不到那样...就像UISwitch一样，它们针对不同的环境有“固定大小”。如果你想要这个功能，你必须编写自己的自定义视图。 - Chris

你基本上是在要求弹出的Picker占用更多的视图控制器，对吗？你可以直接弹出一个视图，这可能会更容易。如果你想这样做，请告诉我。我有一些代码可以分享 :) - Kasey

@Kasey 我试图在我在SwiftUI中构建的自定义弹出窗口中添加日期选择器，但我无法自定义日期选择器的大小。不过，有人已经回答了这个问题，诀窍就是裁剪日期选择器。无论如何，感谢你的努力！ - bona912

Answer 1

只需将其剪切到末尾，如下所示...

DatePicker("", selection: $currentDate, displayedComponents: .hourAndMinute)
    .labelsHidden()
    .frame(width: 150, height: 80, alignment: .center)
    .clipped()

- Asperi

---

这不起作用，基本上日期选择器的宽度仍然是相同的，只是从中看到选择器的框架变小了，但这并没有帮助，因为如果你让它更小，选择器的内容会被裁剪。 - Claudiu

这似乎不再起作用了。在iOS14更新之前，我能够成功地在Picker中使用clipped()。但是现在当我在DatePicker中使用clipped()时，“可滚动区域”没有任何变化。 - kyrers

好的，我刚刚想到了。在.clipped()修饰符之前添加.compositingGroup()即可。 - kyrers

Answer 2

我在日期选择器后添加了.scaleEffect()，现在我可以实现大小缩放...

- icebarley

Answer 3

使用 transform 效果可以改变其大小，例如将日期选择器的大小减小为默认大小的0.8。只需将此修饰符添加到选择器即可。

DatePicker(......).transformEffect(.init(scaleX: 0.8, y: 0.8))

- Rasheed

Answer 4

虽然这并没有直接解决改变SwiftUI DatePicker大小的问题，但对于那些必须使用SwiftUI DatePicker的人来说，这仍然可能是有趣的。

我在SwiftUI中找到的唯一调整DatePicker大小的方法是使用.scaleEffect()修饰符。所以我的想法是创建自己的UI，将点击传递给它覆盖的DatePicker，然后显示弹出窗口。

为了使视图完全可点击，DatePicker必须缩放以覆盖整个宽度。为了动态计算DatePicker和覆盖UI之间的比例因子，我使用了两个DatePicker，将它们放在覆盖UI后面 - 一个用于读取本机宽度，另一个用于调整大小。

下面的实现仅在X轴上进行缩放，因为这已经实现了我需要的功能。

struct ScalingDatePicker: View {

    @Binding var selection: Date
    @State var datepickerSize: CGSize = .zero
    let displayComponents: DatePicker.Components = [.date]

    static let formatter: DateFormatter = {
        let formatter = DateFormatter()
        formatter.dateFormat = "dd.MM.yyyy"
        return formatter
    }()

    var body: some View {
        ZStack(alignment: .leading) {
            // Hidden DatePicker to grab the Size for calculations
            DatePicker("", selection: $selection, displayedComponents: displayComponents)
                .background(
                    GeometryReader { geo in
                        Color.clear.onAppear {
                            datepickerSize = geo.size
                        }
                    }
                )
                .allowsHitTesting(false)
                .fixedSize()
                .opacity(0)

            GeometryReader { geo in
                DatePicker("", selection: $selection, displayedComponents: displayComponents)
                    .scaleEffect(
                        x: geo.size.width/datepickerSize.width,
                        anchor: .topLeading
                    )
                    .labelsHidden()
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .padding(6)
                }

                Text(Self.formatter.string(from: selection))
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .padding(12)
                    .background(Color.white)
                    .allowsHitTesting(false)
//                    .opacity(0.5) // -> use this to see the scaling effect in action
                    .overlay(
                        RoundedRectangle(cornerRadius: 5)
                            .strokeBorder(.black)
                    )
        }
        .fixedSize(horizontal: false, vertical: true)
    }
}

- Deitsch

Answer 5

日期选择器的大小可以轻松手动更改。如果您转到Main.storyboard并简单地单击日期选择器，则可以轻松调整其大小。但是，我不确定是否可以通过代码实现这一点。

希望您会发现这很有帮助。

- natasha

---

如果你使用的是 UIKit，它可以很容易地进行更改，但我正在使用 SwiftUI。不过还是非常感谢你的努力！ - bona912