天天看点

flutter控件之文本控件

Text即文本控件是一个常用的控件,下面会为大家展示几种文本类型 

import 'package:flutter/material.dart';
class TextDemo 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(0xffff0000),
              fontSize: 25.0
            ),
          ),
          new Text(
            "橙色+下划线+24号",
            style: new TextStyle(
              color: const Color(0xffff9900),
              decoration: TextDecoration.underline,
              decorationColor: const Color(0xffff9900),
              fontSize: 24.0
            ),
          ),
          new Text(
            "虚线上划线+23号+倾斜",
            style: new TextStyle(
              decoration: TextDecoration.overline,
              decorationStyle: TextDecorationStyle.dashed,
              fontSize: 23.0,
              fontStyle: FontStyle.italic
            ) ,
          ),
          new Text(
            "serif字体+24号",
            style:new TextStyle(
              fontFamily: "serif",
              fontSize: 26.0,
            ),
          ),
          new Text(
            "monospace字体+24号+加粗",
            style: new TextStyle(
              fontFamily: 'monospace',
              fontSize: 24.0,
              fontWeight: FontWeight.bold,
            ),
          ),
          new Text(
            "天蓝色+25号+两行跨度",
            style: new TextStyle(
              color:Colors.cyan,
              fontSize: 25.0,
              height: 2.0
            ),
          ),
          new Text(
            "24号+10个字符间隔",
            style: new TextStyle(
              fontSize: 24.0,
              letterSpacing: 10.0
            ),
          )
        ],
      ),
    );
  }
}
void main(){
  runApp(new MaterialApp(
    title: "文本案例",
    theme: new ThemeData(primaryColor: Colors.deepOrangeAccent),
    home:new TextDemo() ,
  ));
}      

效果:

flutter控件之文本控件