Swift开发两个问题:StickerRow位置调整与ScrollView横向滚动实现
问题1:调整StickerRow从屏幕边缘展示的实现方案
问题原因:SwiftUI的List组件默认会给每行内容加左右内边距,且未指定宽度的子视图会默认居中显示。
修改方案如下:
- 给StickerRow添加
frame(maxWidth: .infinity, alignment: .leading),让子视图撑满父容器宽度,且内容左对齐 - 给每行添加
.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
相关产品推荐
相关产品推荐

