You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Swift开发两个问题:StickerRow位置调整与ScrollView横向滚动实现

问题1:调整StickerRow从屏幕边缘展示的实现方案

问题原因:SwiftUI的List组件默认会给每行内容加左右内边距,且未指定宽度的子视图会默认居中显示。
修改方案如下:

  1. 给StickerRow添加frame(maxWidth: .infinity, alignment: .leading),让子视图撑满父容器宽度,且内容左对齐
  2. 给每行添加.listRowInsets(EdgeInsets())清除List默认的行内边距
    修改后的代码:
var body: some View {
    NavigationView{
        List (categories.keys.sorted(), id: \.self) { key in
            StickerRow(categoryName: "\(key) Slot".uppercased(), stickers: self.categories[key]!)
                .frame(maxWidth: .infinity, alignment: .leading) // 新增:撑满宽度+内容左对齐
                .frame(height:320)
                .padding(.top)
                .padding(.bottom)
                .listRowInsets(EdgeInsets()) // 新增:清除List默认行边距
         }
        .listStyle(.plain) // 可选:需要去掉List默认分组样式间隙时添加
        .navigationBarTitle(Text("Lorem ipsum"))
    }
}

问题2:实现ScrollView横向滚动的修改方案

问题原因:ScrollView默认滚动方向为垂直方向,需要显式指定滚动轴为水平方向。
修改方案:给ScrollView传入axes: .horizontal参数指定滚动方向,可根据需求选择是否隐藏滚动指示器
修改后的代码:

var body: some View {
    VStack(alignment: .leading) {
        Text(self.categoryName)
            .font(.title)
        // 仅修改ScrollView行,指定水平滚动
        ScrollView(.horizontal, showsIndicators: false) {
            HStack(alignment: .top) {
                ForEach (stickers, id: \.name) { sticker in
                    StickerItem(sticker: sticker)
                        .frame(width: 100)
                        .padding(.trailing, 30)
                }
            }
        }
    }
}

内容的提问来源于stack exchange,提问作者EmmeBee

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.30 08:36:05