swift 选择滚动视图中的项目并更改样式

rqdpfwrv 于 11个月前发布在 Swift

关注(0)|答案(2)|浏览(94)

我创建了一个垂直滚动视图，如下所示：

struct UserFeedView: View {
    
    var body: some View {
        @State var selectedFilter: Filter?
        
        let filters = [
        Filter(name: "All"),
        Filter(name: "fil1"),
        Filter(name: "fil2"),
        Filter(name: "fil3"),
        ]

        VStack() {
            ScrollView(.horizontal,showsIndicators: false) {
                HStack(spacing: 15) {
                    ForEach(filters) { filter in
                        Text(filter.name)
                            .font(.system(size: selectedFilter?.id == filter.id ? 30 : 20))
                            .onTapGesture {
                                selectedFilter = filter
                            }
                    }
                }
                .padding(.top, 10)
                .padding(.leading, 30)
            }
            .frame(height: 150)
            .onAppear {
               if let first = filters.first {
                   selectedFilter = first
               }
            }
            Spacer()
        }
    }
}

字符串
我正在尝试更改所选项目的字体大小，以便用户可以看到所选内容。
目标是：
当用户第一次访问屏幕时，选择第一项，然后当滚动并选择项时，所选择的项与另一项相比具有增大的尺寸和粗体。
有想法吗？谢谢。

swift

来源：https://stackoverflow.com/questions/76796475/select-item-in-a-scrollview-and-change-style

2条答案

按热度按时间

swvgeqrz1#

你可以尝试一些简单的方法，比如：
在此示例代码中，点击滚动视图中的Filter名称，将点击的Filter的字体大小增加到30，而其他条目的大小为20。
代码还显示，当视图第一次出现时，第一个Filter被选中（字体大小30）。

struct ContentView: View {
    @State private var selected: Filter?   // <-- here
    let filters = [
        Filter(name: "All"),
        Filter(name: "fil1"),
        Filter(name: "fil2"),
        Filter(name: "fil3")]
    
    var body: some View {
        ScrollView(.horizontal,showsIndicators: false) {
            HStack(spacing: 15) {
                ForEach(filters) { filter in
                    Text(filter.name)
                        .bold(selected?.id == filter.id)  // <-- here
                        .font(.system(size: selected?.id == filter.id ? 30 : 20))  // <-- here
                        .onTapGesture {
                            selected = filter  // <-- here
                        }
                }
            }
            .padding(.top, 10)
            .padding(.leading, 30)
        }
        .frame(height: 150)
        .onAppear {
           if let first = filters.first {
               selected = first   // <-- here
           }
        } 
    }
}

struct Filter: Identifiable {
    let name: String
    var id: String { name }
}

字符串
编辑-1
添加了.bold(selected?.id == filter.id)以在选中时具有粗体外观。

赞(0）回复(0）举报 11个月前

1sbrub3j2#

假设Filter是Identifiable：

struct Filter: Identifiable {
    let name: String
    var id: String { name }
}

字符串
您可以将@State添加到视图中，以指示选择了哪个过滤器。

// here I'm assuming "filters" is a global constant.
// if it is part of "self", then you would need to initialise it in onAppear
@State var selectedFilterId = filters[0].id

型
然后，根据过滤器是否是所选的过滤器来显示不同的视图：

ForEach(filters) { filter in
    if filter.id == selectedFilterId {
        Text(filter.name)
            .font(.system(size: 30))
            .bold()
            .onTapGesture {
                selectedFilterId = filter.id
            }
    } else {
        Text(filter.name)
            .onTapGesture {
                selectedFilterId = filter.id
            }
    }
}

型
您可以通过添加Group来提取公共onTapGesture：

Group {
    if filter.id == selectedFilterId {
        Text(filter.name)
            .font(.system(size: 30))
            .bold()
    } else {
        Text(filter.name)
    }
}.onTapGesture {
    selectedFilterId = filter.id
}

型

赞(0）回复(0）举报 11个月前

我来回答

swift 选择滚动视图中的项目并更改样式

2条答案

相关问题

热门标签

最新问答