qlistwidgetitem text自动换行_SwiftUI基础之Text长度过长该如何处理

谁践踏了优雅 2023-01-12 10:17 225阅读 0赞

![57609df0d6ef6968976eb30146e216db.png][]

> Text是SwiftUI世界中最基础的控件，使用也非常简单。但是越是简单，越是基础的控件，我们就应该全面掌握。例如，当我们遇到长文本时该如何优雅处理呢。

## 解决思路 ##

对于超长文本可以有两种解决方案 - 超长部分直接省略 - 自动缩小字体然后换行

## 超过长度直接省略 ##

import SwiftUI
    
    struct ContentView: View {
        var name:String
        var body: some View {
    
            ZStack{
                Circle()
                    .frame(width:100,height:100)
                    .foregroundColor(.blue)
                    .shadow(radius: 10)
    
                Text(self.name)
    
                    .frame(width:80,height:40)
    
                    .foregroundColor(.white)
                    //.scaledToFit()
                    .lineLimit(nil)
    
            }
        }
    }
    
    struct ContentView_Previews: PreviewProvider {
        static var previews: some View {
            ContentView(name: "苏轼是北宋中期文坛领袖")
        }
    }

![b56a86d387e3b3ab7616531a1f2ec2df.png][]

## 自动缩小 ##

import SwiftUI
    
    struct ContentView: View {
        var name:String
        var body: some View {
    
            ZStack{
                Circle()
                    .frame(width:100,height:100)
                    .foregroundColor(.blue)
                    .shadow(radius: 10)
    
                Text(self.name)
    
                    .frame(width:80,height:40)
    
                    .foregroundColor(.white)
                    //.scaledToFit()
                    //.lineLimit(nil)
                .minimumScaleFactor(0.3)
    
            }
        }
    }

![8e1fc37ee570a9a4f9112de82d287294.png][]

## 未实现的需求 ##

*  换行后文本如何居中
 *  字体如何优雅的适应frame的大小

朋友们有什么好的解决的方案，欢迎留言交流

## 更多SwiftUI教程和代码关注专栏 ##

*  请关注我的专栏icloudend, SwiftUI教程与源码 https://www.jianshu.com/c/7b3e3b671970

[57609df0d6ef6968976eb30146e216db.png]: /images/20221119/8c995a145f6942f3a36d7a457669fc04.png
[b56a86d387e3b3ab7616531a1f2ec2df.png]: /images/20221119/b0f972ed2dd247ebb717cf7ebdaf470f.png
[8e1fc37ee570a9a4f9112de82d287294.png]: /images/20221119/934eefefa8c34fea9a26d3109f2c9231.png