// 文本、字体样式

import 'package:flutter/material.dart';

class TextFontStyle extends StatelessWidget {

// 声明文本样式

TextStyle textStyle = const TextStyle(fontFamily: 'MyFont', fontSize: 30, );

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text('Text Font Style'),

),

body: Container(

child: Column(

children: [

// textAlign:文本的对齐方式;可以选择左对齐、右对齐还是居中。

// 注意,对齐的参考系是Text widget本身。

Text('Hello world!',

textAlign: TextAlign.left,

),

// maxLines、overflow:指定文本显示的最大行数,默认情况下,文本是自动折行的,如果指定此参数,则文本最多不会超过指定的行。

// 如果有多余的文本,可以通过overflow来指定截断方式,默认是直接截断。

// 本例中指定的截断方式TextOverflow.ellipsis,它会将多余文本截断后以省略符“...”表示;

Text('Hello World! hhhhh'*5,

maxLines: 1,

overflow: TextOverflow.ellipsis,

),

// textScaleFactor:代表文本相对于当前字体大小的缩放因子,相对于去设置文本的样式style属性的fontSize,它是调整字体大小的一个快捷方式。

Text('Hello world!',

textScaleFactor: 1.5,

),

// TextStyle用于指定文本显示的样式如颜色、字体、粗细、背景等。

Text('Hello world!',

style: TextStyle(

color: Colors.blue,

// fontSize:该属性和Text的textScaleFactor都用于控制字体大小。但是有两个主要区别:

// * fontSize可以精确指定字体大小,而textScaleFactor只能通过缩放比例来控制。

// * textScaleFactor主要是用于系统字体大小设置改变时对Flutter应用字体进行全局调整,而fontSize通常用于单个文本,字体大小不会跟随系统字体大小变化。

fontSize: 18.0,

// height:该属性用于指定行高,但它并不是一个绝对值,而是一个因子,具体的行高等于fontSize*height。

height: 1.2,

fontFamily: 'Courier',

background: Paint()..color = Colors.yellow,

decoration: TextDecoration.underline,

decorationStyle: TextDecorationStyle.dashed,

)

),

// 需要对一个Text内容的不同部分按照不同的样式显示,这时就可以使用TextSpan,它代表文本的一个“片段”。

Text.rich(TextSpan(

children: [

TextSpan(

text: 'Home:',

),

TextSpan(

text: 'www.baidu.com',

style: TextStyle(

color: Colors.blue,

fontSize: 20,

),

// 点击链接后的一个处理器,手势识别的内容

// recognizer: _tap

),

]

)),

// 在Widget树中,文本的样式默认是可以被继承的(子类文本类组件未指定具体样式时可以使用Widget树中父级设置的默认样式),

// 因此,如果在Widget树的某一个节点处设置一个默认的文本样式,那么该节点的子树中所有文本都会默认使用这个样式,

// 而DefaultTextStyle正是用于设置默认文本样式的。

DefaultTextStyle(

// 设置文本默认样式

style: TextStyle(

color: Colors.red,

fontSize: 20.0,

),

textAlign: TextAlign.start,

child: Column(

crossAxisAlignment: CrossAxisAlignment.start,

children: [

// 继承默认样式

Text('Hello world'),

Text('I am Hhh'),

// 不继承默认样式

Text('I am Hhh',

style: TextStyle(

inherit: false,

color: Colors.grey,

),

),

],

),

),

// 在Flutter中使用字体分两步完成。

// 1. 在pubspec.yaml中声明它们,以确保它们会打包到应用程序中。

// 2. 通过TextStyle属性使用字体。

// 使用本地字体

Text('你好吗hello',

style: textStyle,

),

Text('你好吗hello',

style: TextStyle(

fontSize: 30,

),

),

],

),

),

);

}

}

Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐