iOS 16 SwiftUI列表（List）项包含 Label 视图导致分隔线变短的解决

已于 2022-09-15 17:31:14 修改
阅读量874 收藏
点赞数 1
分类专栏： 开发疑难秒懂百科 文章标签： iOS 16 SwiftUI Label List 分割线变短
于 2022-09-15 17:26:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/mydo/article/details/126875061
版权
在iOS 16中，SwiftUI的List项包含Label时，分隔线会变短。通过在Label上应用.titleAndIcon样式，或者为iOS 14.0及更低版本的系统使用HStack模拟，可以解决这个问题。本文介绍了如何修复这一现象并恢复正常显示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在这里插入图片描述



问题现象

在iOS 16中，若 SwiftUI 列表（List）项中包含 Label 视图，则列表项的分隔线就会变得非常短：

在这里插入图片描述

如上图所示，List种每个列表项右下角都包含一个显示日期的 Label 视图，导致 List 分隔线短的不正常。

在 iOS 15 中无此问题。

那么，在 iOS 16 中如何解决这个问题呢？

答案其实很简单！

Let’s fix it!!! 😉


问题分析

1. 在iOS 16中不正常的 Label 视图

大家知道，Label 是从 iOS 14（SwiftUI 2.0）开始提供的一种整合图片和文本显示的视图：

了解本专栏 订阅专栏 解锁全文
iOS 16 SwiftUI 4.0 列表（List）项分隔线变短的原因及解决
享受开发，颠倒银河
09-29 888
在本篇博文中，我们讨论了 iOS 16 SwiftUI 4.0 中列表分隔线变短的原因，并给出了iOS 16 中的新解决方案。
SwiftUI iOS15 WWDC21 之如何在列表list中添加滑动操作.swipeActions 为列表的两侧创建滑动按钮
iCloudEnd的博客
06-12 847
SwiftUI iOS15 WWDC21 之如何在列表list中添加滑动操作.swipeActions 为列表的两侧创建滑动按钮 在 iOS 15 中，SwiftUI 引入了一个新的修饰符，要求.swipeActions开发人员在任何列表行中创建自定义滑动操作。您需要做的就是将.swipeActions修饰符附加到列表行的视图。 在列表行中创建自定义滑动操作 新版本的 SwiftUI 为List视图带来了一些受欢迎的增强功能。您现在只需几行代码即可轻松自定义行分隔符的外观并将自定义滑动操作添加到列表视
SwiftUI : 使用List去掉List分割线。
qq_26359763的博客
06-03 1706
需求是这样的:一个列表 UIKit框架中就是个tableView 然后去处tableViewCell的分割线 SwiftUI中是使用List去替代TableView的实现的 去除List的分割线方法如下： iOS 13的情况下 你写一个modifier struct ListRemoveSeparator: ViewModifier { func body(content: Content) -> some View { content .o...
SwiftUI基础组件之List详解
最新发布
小洋人最happy的专栏
02-18 1068
在SwiftUI中，List组件用于创建可滚动的列表界面。它类似于UIKit中的，但使用起来更加简洁和直观。List可以显示静态或动态的数据，并支持多种样式和交互。
SwiftUI List那些事(七）List 去掉分割线
冷胜任 的专栏
09-18 1284
上几篇文章,没有把列代码抽出来,无法复用,我们先创建个ListRow 来吧Row UI代码解耦出来 // // ListRow.swift // List // // Created by lsr on 2021/9/17. // import SwiftUI struct ListRow: View { var item:StudentModel var body: some View { HStack(spacing:15, content: {
SwiftUI 中 List 隐藏分割线的终极解决方案，对 iOS13/14/15 均有效
my_Wade的博客（吃亏是福）
07-30 1256
SwiftUI 中 List 隐藏分割线的终极解决方案，对 iOS13/14/15 均有效 添加 viewModifier extension View { /// 隐藏 List 中的 分割线 func hideRowSeparator(insets: EdgeInsets = .init(top: 0, leading: 0, bottom: 0, trailing: 0), background: Color = .white) -&
SwiftUI 基础之如何取消List的分割线divider
iCloudEnd的博客
02-07 2689
效果 image.png 代码 struct ContentView: View { init() { // To remove only extra separators below the list: UITableView.appearance().tableFooterView = UIView...
SwiftUI基础课程第三课：List的简单使用
函数的彼端
12-29 897
本课介绍了 SwiftUI 中的 List 控件，包括其基本使用、动态数据绑定、添加与删除功能的实现，以及多种内置样式的对比与适用场景。通过示例演示了如何使用 List 展示静态和动态数据，并借助按钮实现列表项的增删操作。此外，课程还对不同 ListStyle 样式进行了详细解析，帮助开发者根据需求选择合适的列表外观和行为。
SwiftUI 4.0 中 List 显示层级数据的子视图在展开和收起操作时无动画的解决
享受开发，颠倒银河
05-12 940
在本篇博文中，我们讨论了 SwiftUI 4.0 中显示层级数据的 List 为何在其子项内容展开和收起操作时没有动画的问题，以及如何解决它。
UIViewRepresentable （SwiftUI UIKit中文文档手册）
iCloudEnd的博客
08-18 1680
UIViewRepresentable UIKit视图的包装器，可用于将该视图集成到SwiftUI视图层次结构中。 protocol UIViewRepresentable : View where Self.Body == Never 总览 使用实例在SwiftUI界面中创建和管理对象。在您的应用的一个自定义实例中采用此协议，并使用其方法来创建，更新和拆除视图。创建和更新过程与SwiftUI视图的行为类似，您可以使用它们使用应用程序的当前状态信息来配置视图。使用拆解过程从SwiftUI干净地删除视图。例
SwiftUI 技巧之如何取消List的分割线separator
iCloudEnd的博客
04-30 1313
本文价值与收获 看完本文后，您将能够作出下面的界面 image.png List简介(基础知识，高手可以略过) List是什么有什么用 移动设备上的大多数用户界面可以通过表视图表示，这是一种简单而优雅的数据显示形式。SwiftUI时代苹果为我们提供了List组件，List最大优势在与其原生自带了滚动和元素复用功能。也就是说，我们直接使用List就可以达到app store的列表水平，是...
第3章第7节：使用Divider分隔线对视图进行分隔 [SwiftUI快速入门到实战]
互动教程网[www.hdjc8.com]
09-04 605
本节课演示Divider分隔线的使用，当分隔线被包含在堆栈中时，可以沿水平方向进行延伸。 首先添加一个图像视图，显示一枚时钟图标，并设置字体尺寸为36。接着按下键盘上的command键。 在按下command键的同时，点击此处的视图，打开快捷操作菜单。 选择此处的VStack选项，将视图嵌入到VStack视图里。 接着添加一个Divider分隔线视图。 分隔线视图是一条位于图像视图下方的灰色实线。 继续添加一个文本视图，显示当前的日期和时间。文本视图和图像视图被分隔线..
SwiftUI 如何给ScrollView添加分割条和虚线（教程含源码）
iCloudEnd的博客
12-27 917
实战需求 SwiftUI 如何给ScrollView添加分割条和虚线 本文价值与收获 看完本文后，您将能够作出下面的界面 收获 学会如何在ForEach循环中实现自动添加组件，不仅仅添加分割符，还可以添加更多的分割符。 看完本文您将掌握的技能 循环布局ForEach 实现页面切换NavigationLink 绘制分割线 .stroke(style: StrokeStyle(lineWidth: 1, dash: [2])) 绘制自定义图形 func path(in rect: CGRect)
在SwiftUI中如何为ScrollView添加分割条和虚线
BUG？不存在的！
09-02 275
当我们在SwiftUI中使用ScrollView时，可能希望为其添加一些视觉上的分割条或虚线效果来增强用户界面的可读性和可视化效果。通过自定义分割条和虚线视图，并将其与ScrollView结合使用，我们可以在SwiftUI中实现为ScrollView添加分割条和虚线的效果。首先，我们需要创建一个自定义的视图，用于表示分割条和虚线效果。接下来，我们将创建一个包含ScrollView和分割条/虚线视图的视图组合。修饰符来调整分割条/虚线视图的位置，以使其出现在ScrollView的特定位置。
SwiftUI中List的样式及使用详解（添加、移动、删除、自定义滑动）
郭永明的技术专栏
05-20 3058
SwiftUI中的List可是个好东西，它用于显示可滚动列表的视图容器，类似于UITableView。在`List`中可以显示静态或动态的数据，并支持垂直滚动。List是一个数据驱动的视图，当数据发生变化时，列表会自动更新。针对List，我们还可以进行添加、移动、删除以及滑动等功能。
SwiftUI中List的liststyle样式及使用详解添加、移动、删除、自定义滑动
07-04 1852
SwiftUI的swipeActions()修饰符允许你添加一个或多个滑动动作按钮到你的列表行，可选地控制他们属于哪一边，以及他们是否应该被触发使用一个完整的滑动。先看下代码及效果图：swipeActions()方法有三个参数，第一个edge决定操作按钮放哪边；第二个allowsFullSwipe决定完全滑动是否自动执行第一个操作，默认值为true；第三个即是内容闭包了。关于样式，只能通过tint设置背景色，如果不设置，系统默认是灰色的。
SwiftUI--List View全攻略
热门推荐
知更鸟CoolLee的博客
10-23 1万+
SwiftUI的List View和UIKit中的UITableView很相似，它可以根据你的需求加载静态或者动态数据。不同的是，List使用起来更加的简单:我们不需要在storyboard或者Xib中创建cell，也不需要使用代码注册cell，不需要告诉它要有多少行内容，当然也不需要dequeue cell以及手动设置cell等等。 一、创建一个静态数据列表 想要创建一个静态数据列表，你首先需...
E���ÿjHost '192.168.1.24' is not allowed to connect to this MySQL server
10-14
这个错误提示表明，MySQL服务器不允许来自IP地址为192.168.1.24的主机连接。这可能是由于MySQL服务器的安全设置所致。要解决这个问题，可以尝试以下几个步骤： 1. 检查MySQL服务器的安全设置，确保允许来自192.168.1.24的主机连接。 2. 确保在连接MySQL服务器时使用了正确的用户名和密码。 3. 确保在连接MySQL服务器时使用了正确的主机名或IP地址。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大熊猫侯佩

赏点钱让我买杯可乐好吗 ;)

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值