第三章基础组件一

文本及样式 Flutter.. 两个点语法含义 Dart中两个点..和三个点…的用法

文本及样式

常见属性

textAlign: 文本的对齐方式；可以选择左对齐、右对齐还是居中。注意，对齐的参考系是Text widget 本身, 只有 Text 宽度大于文本内容长度时指定此属性才有意义
maxLines、overflow: 指定文本显示的最大行数，默认情况下，文本是自动折行的，如果指定此参数，则文本最多不会超过指定的行。如果有多余的文本，可以通过overflow来指定截断方式，默认是直接截断，本例中指定的截断方式TextOverflow.ellipsis，它会将多余文本截断后以省略符“…”表示；TextOverflow 的其他截断方式请参考 SDK 文档。
textScaleFactor: 代表文本相对于当前字体大小的缩放因子，相对于去设置文本的样式style属性的fontSize，它是调整字体大小的一个快捷方式。该属性的默认值可以通过MediaQueryData.textScaleFactor获得，如果没有MediaQuery，那么会默认值将为1.0。

TextStyle

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


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
  ),
);

height：该属性用于指定行高，但它并不是一个绝对值，而是一个因子，具体的行高等于fontSize*height。
fontSize：该属性和 Text 的textScaleFactor都用于控制字体大小。但是有两个主要区别：
- fontSize可以精确指定字体大小，而textScaleFactor只能通过缩放比例来控制。
- textScaleFactor主要是用于系统字体大小设置改变时对 Flutter 应用字体进行全局调整，而fontSize通常用于单个文本，字体大小不会跟随系统字体大小变化。

TextSpan

有点像富文本的展示方式

1
2
3
4
5
6


const TextSpan({
  TextStyle style, 
  Sting text,
  List<TextSpan> children,
  GestureRecognizer recognizer,
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


Text.rich(TextSpan(
    children: [
     TextSpan(
       text: "Home: "
     ),
     TextSpan(
       text: "https://flutterchina.club",
       style: TextStyle(
         color: Colors.blue
       ),  
       recognizer: _tapRecognizer
     ),
    ]
))

我们通过 TextSpan 实现了一个基础文本片段和一个链接片段，然后通过Text.rich 方法将TextSpan 添加到 Text 中，之所以可以这样做，是因为 Text 其实就是 RichText 的一个包装，而RichText 是可以显示多种样式(富文本)的 widget

ps: 在Flutter中经常会用用到..的语法糖如下:

1
2
3


state.clone()
          ..splashImg = action.img
          ..famousSentence = action.famousSentence;

等价于

1
2
3


state.clone()
state.splashImg = action.img
state.famousSentence = action.famousSentence;

可以看成链式调用，但是和OC与java的链式调用不太一样在OC/Java中链式调用有个规律，谁调用就返回谁，但是在dart中"..“不用在方法中返回调用主体，景观源码的实现方式也是通过set进去的，但是我们看到的就是Dart给我们提供的语法糖，因为Dart本身就是把成员变量的getter setter方法改成隐式的了

三个点(…) 是用来拼接集合如list Map等

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


class Test {
  Test() {
    //这里组合后 list就变成[ 'a', 'b', 'c','d', 'e', 'f']
    var list2 = ['d', 'e', 'f'];
    var list = ['a', 'b', 'c', ...list2];
    //这里组合后map就变成{'a': 'a', 'b': 'b','c': 'c', 'd': 'd'}
    var map2 = {'a': 'a', 'b': 'b'};
    var map = {...map2, 'c': 'c', 'd': 'd'};
  }
}

DefaultTextStyle

在 Widget 树中，文本的样式默认是可以被继承的（子类文本类组件未指定具体样式时可以使用 Widget 树中父级设置的默认样式），因此，如果在 Widget 树的某一个节点处设置一个默认的文本样式，那么该节点的子树中所有文本都会默认使用这个样式，而DefaultTextStyle正是用于设置默认文本样式的设置Widget树中子Widget的文本的样式, 如果这子Widget中设指定了对应文本样式的话(设置inherit: false, 则全部都不使用继承的默认样式)，子widget的优先级会更高

字体

在Flutter中使用字体分两步完成，首先在pubspec.yaml中声明他们，以确保会打包到应用中，然后通过TextStyle 属性使用字体

在asset中声明

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


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

使用字体

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


// 声明文本样式
const textStyle = const TextStyle(
  fontFamily: 'Raleway',
);

// 使用文本样式
var buttonText = const Text(
  "Use the font for this text",
  style: textStyle,
);

package中的字体要使用 Package 中定义的字体，必须提供package参数。例如，假设上面的字体声明位于 my_package包中。然后创建 TextStyle 的过程如下,如果在 package 包内部使用它自己定义的字体，也应该在创建文本样式时指定package参数

1
2
3
4


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

一个包也可以只提供字体文件而不需要在 pubspec.yaml 中声明。这些文件应该存放在包的lib/文件夹中。字体文件不会自动绑定到应用程序中，应用程序可以在声明字体时有选择地使用这些字体。假设一个名为my_package的包中有一个字体文件： lib/fonts/Raleway-Medium.ttf 然后再声明中声明

1
2
3
4
5
6
7


 flutter:
   fonts:
     - family: Raleway
       fonts:
         - asset: assets/fonts/Raleway-Regular.ttf
         - asset: packages/my_package/fonts/Raleway-Medium.ttf
           weight: 500

ps: lib/是隐含的，所以它不应该包含在 asset 路径中。

在这种情况下，由于应用程序本地定义了字体，所以在创建TextStyle时可以不指定package参数：

1
2
3


const textStyle = const TextStyle(
  fontFamily: 'Raleway',
);

文本及样式#

常见属性#

TextStyle#

TextSpan#

DefaultTextStyle#

字体#

文本及样式

常见属性

TextStyle

TextSpan

DefaultTextStyle

字体