iOS-Flutter 基础组件-Text

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 10 天，点击查看活动详情

Text

用于简单的文本显示，它包含一些控制文本显示样式的属性，类似于UILabel。

Text("Hello world",
  textAlign: TextAlign.left,
);

其中一些常用的属性如下:

• textAlign: 对齐方式
• maxLines: 最多行数
• overflow: 超出部分展示方式，比如时文本展示不下的时候展示...的位置，和iOS的一些属性
• textScaleFactor：字体放大
• TextStyle：字体样式，里面包含的属性比较多，

Text("Hello world",
  style: TextStyle(
    color: Colors.blue,//字体颜色
    fontSize: 18.0,//字体大小
    height: 1.2,  /子高
    fontFamily: "Courier",//字体名称
    background: Paint()..color=Colors.yellow,//背景色
    decoration:TextDecoration.underline,//文本装饰器，可以添加一些特殊效果，比如下划线等。
    decorationStyle: TextDecorationStyle.dashed
  ),
);

• TextSpan: 有点类似于Label的富文本的处理，感觉比iOS的富文本用起来更方便了。

const TextSpan({
    TextStyle style,//字体风格
    String text,//文字
    List<TextSpan> children,//子Widget
    GestureRecognizer recognizer,//点击收拾
})
//例子：
Text.rich(TextSpan(
    children: [//子Widget，多层嵌套
     TextSpan(
       text: "Home: "//内容
     ),
     TextSpan(
       text: "https://flutterchina.club",//内容
       style: TextStyle(//字体风格
         color: Colors.blue
       ),  
       recognizer: _tapRecognizer//点击手势
     ),
    ]
))

• DefaultTextStyle 类似于风格管理组件，可以让子组件直接继承该风格。 举例：

DefaultTextStyle(
  //1.设置文本默认样式  
  style: TextStyle(
    color:Colors.red,
    fontSize: 20.0,
  ),
  textAlign: TextAlign.start,
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Text("hello world"),//继承默认风格
      Text("I am Jack"),//继承默认风格
      Text("I am Jack",
        style: TextStyle(
          inherit: false, //2.不继承默认样式
          color: Colors.grey
        ),
      ),
    ],
  ),
);

• 字体自定义使用 开发中，经常会使用到一些自定义的字体，在工程中需要在pubspec.yaml文件中引入对应的字体包。

flutter:
  fonts:
    - family: Raleway //字体名称
      fonts:对应的字体包
        - asset: assets/fonts/Raleway-Regular.ttf
        - asset: assets/fonts/Raleway-Medium.ttf
          weight: 500
        - asset: assets/fonts/Raleway-SemiBold.ttf
          weight: 600 //字重
          
    - family: AbrilFatface
      fonts:
        - asset: assets/fonts/abrilfatface/AbrilFatface-Regular.ttf

uses-material-design: true//是指如果需要使用md风格的组件，一定要把uses-material-design设为true

• Package中字体使用

const textStyle = const TextStyle(
  fontFamily: 'Raleway',
  package: 'my_package', //指定包名
);

或者

 flutter:
   fonts:
     - family: Raleway
       fonts:
         - asset: assets/fonts/Raleway-Regular.ttf
         - asset: packages/my_package/fonts/Raleway-Medium.ttf//将package中的字体引以到asset中，这样可以直接用Raleway使用，而不需要指定package参数
           weight: 500

用法

TextStyle textStyle = TextStyle(
    fontFamily: 'Raleway',
    fontWeight: FontWeight.bold,
) 

全局风格定制，在根文件的MaterialApp或者CupertinoApp的主题属性中设置

MaterialApp(
     title: 'Test APP',
     theme: ThemeData(
     fontFamily: 'Raleway',//字体库
     //fontFamily: 'packages/sms-fonts/Raleway', //字体package，只要将字体库引用改成该格式就可以了
     原因是官方源码//fontFamily = package == null ? fontFamily : 'packages/$package/$fontFamily',
   )
)