3 文本组件

文本组件(text)负责显示文本和定义显示样式,常用属性见表4-4。 接下来我们通过创建多个文本组件来展示不同的文本样式。比如不同的颜色、不同的字号、不同的线形等,完整示例代码如下:

import 'package:flutter/material.dart';

class ContainerDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('文本组件'),
      ),
      body: new Column(
        children: <Widget>[

          new Text(
            '红色+黑色删除线+25号',
            style: new TextStyle(
              color: const Color(0xffff0000),
              decoration: TextDecoration.lineThrough,
              decorationColor: const Color(0xff000000),
              fontSize: 25.0,

            ),
          ),
          new Text(
            '橙色+下划线+24号',
            style: new TextStyle(
              color: const Color(0xffff9900),
              decoration: TextDecoration.underline,
              fontSize: 24.0,

            ),
          ),

          new Text(
            '虚线上划线+23号+倾斜',
            style: new TextStyle(
              decoration: TextDecoration.overline,
              decorationStyle: TextDecorationStyle.dashed,
              fontSize: 23.0,
              fontStyle: FontStyle.italic,
            ),
          ),
          new Text(
            '24号+加粗',
            style: new TextStyle(
              fontSize: 23.0,
              fontStyle: FontStyle.italic,
              fontWeight: FontWeight.bold,
              letterSpacing: 6.0,
            ),
          ),

        ],
      ),
    );
  }
}

void main() {
  runApp(
    new MaterialApp(
      title: 'Text demo',
      home: new ContainerDemo(),
    )
  );
}

上述示例代码视图展现大致如图4-3所示。