天天看點

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控件之文本控件