Question

基本上，每当我尝试使用AnyTransition.move(edge: .bottom)转换水平滚动ScrollView时，应用程序都会冻结，并且内存会不断增加。我设法通过以下方式重现该问题：

struct ContentView: View {
    @State private var showScroll: Bool = false

    var body: some View {
        VStack {
            Spacer()
            Button(action: {
                withAnimation {
                    self.showScroll = true
                }
            }, label: {
                Text("Hit me")
            }).padding()
                .background(Capsule().fill())
            Spacer()
            if showScroll {
                scrollView
            }
        }
    }

    var scrollView: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            HStack {
                Text("Horizontal list")
                Text("Horizontal list")
                Text("Horizontal list")
                Text("Horizontal list")
            }
        }
        .frame(height: 100)
        .transition(.move(edge: .bottom))
    }
}

将ScrollView轴更改为.vertical可以防止应用程序挂起，将过渡更改为另一个边缘（例如.leading）也是如此。

还有其他人遇到过这样的事情吗？

Answer 1

您需要配置HStack。

<section id="contact">
    <form asp-action="PostEmail" asp-controller="Home">
        <div class="text-center">
            <div class="editor-label">
                @Html.LabelFor(model => model.Name)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Name)
                @Html.ValidationMessageFor(model => model.Name)
            </div>
            &nbsp;

            <div class="editor-label">
                @Html.LabelFor(model => model.Email)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Email)
                @Html.ValidationMessageFor(model => model.Email)
            </div>
            &nbsp;

            <div class="editor-label">
                @Html.LabelFor(model => model.Message)
            </div>
            <div class="editor-field">
                @Html.TextAreaFor(model => model.Message)
                @Html.ValidationMessageFor(model => model.Message)
            </div>
            &nbsp;
            <div>
                <button type="submit">Submit Message</button>
            </div>
            &nbsp;
            <div class="font-weight-bold text-danger">
                @ViewBag.message
            </div>
        </div>
    </form>

Answer 2

确认在Simulator中描述的行为，在“预览”中一切正常。 Xcode 11.2。像下面这样在VStack中进行包装可以解决此问题。

var scrollView: some View {
    VStack {
        ScrollView(.horizontal, showsIndicators: false) {
            HStack {
                Text("Horizontal list")
                Text("Horizontal list")
                Text("Horizontal list")
                Text("Horizontal list")
            }
        }
        .frame(height: 100)
    }
    .transition(.move(edge: .bottom))
}

Answer 3

使用.frame(minHeight: 0, maxHeight: .greatestFiniteMagnitude)代替.frame(maxHeight: .infinity)给了我更好的结果。即。我可以为.frame(height: 100)设置任何值，并且不会冻结。

SwiftUI-从底部过渡时水平ScrollView锁定

3 个答案: