Flutter基础组件Widget

在Flutter中，几乎所有的对象都是一个Widget，与原生开发中的控件不同的是，Flutter中的widget的概念更广泛，它不仅可以表示UI元素，也可以表示一些功能性的组件如：用于手势检测的 GestureDetector widget、用于应用主题数据传递的Theme等等。由于Flutter主要就是用于构建用户界面的，所以，在大多数时候，可以认为widget就是一个控件

Text是展示单一格式的文本Widget(Android TextView)。

import 'package:flutter/material.dart';

///
/// main方法 调用runApp传递Widget，这个Widget成为widget树的根
void main() => runApp(TextApp());

///
/// 1、单一文本Text
///
//创建一个无状态的Widget
class TextApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //封装了应用程序实现Material Design所需要的一些widget
    return MaterialApp(
      title: "Text演示", //标题
      //主页面
      //Scaffold : Material Design布局结构的基本实现。
      home: Scaffold(
        //ToolBar/ActionBar
        appBar: AppBar(title: Text("Text")),
        body: Text("Hello,Flutter"),
      ),
    );
  }
}

-new Text() 构造方法创建，只能生成一种style

 //相当于Android 中设置textview 的style
  Widget _TextBody(String text) {
    return Padding(

      ///设置padding
      padding: const EdgeInsets.only(left: 8.0, top: 8.0),
      child: Text(
        text,
        style: TextStyle(

          ///否继承父组件的属性，默认true，这个属性极少需要设置为false，设置为false字体默认为白色、10pixels
            inherit: true,

            ///字体颜色
            color: Colors.blue,

            ///粗细
            fontWeight: FontWeight.w500,

            /// 斜体
            fontStyle: FontStyle.italic,

            ///字母间距，默认0，负数间距越小，正数 间距越大
            letterSpacing: 5.0,

            ///underline：下划线，overline：上划线，lineThrough：删除线
            decoration: TextDecoration.underline,

            ///划线颜色
            decorationColor: Colors.black,

            ///solid：实线，double：双线，dotted：点虚线，dashed：横虚线，wavy：波浪线
            decorationStyle: TextDecorationStyle.wavy),),
    );
  }

• RichText
  如果需要显示更为丰富样式的文本(比如一段文本中文字不同颜色),可以使用RichText或者Text.rich

Widget _RichTextBody() {
  var textSpan = TextSpan(
    text: "Hello",
    style: TextStyle(color: Colors.red),
    children: [
      TextSpan(text: "Flu", style: TextStyle(color: Colors.blue)),
      TextSpan(text: "uter", style: TextStyle(color: Colors.yellow)),
    ],
  );
  //Text.rich(textSpan);
  return RichText(text: textSpan);
}

DefaultTextStyle

​ 在widget树中，文本的样式默认是可以被继承的，因此，如果在widget树的某一个节点处设置一个默认的文本样式，那么该节点的子树中所有文本都会默认使用这个样式。相当于在Android中定义 Theme

Widget _DefaultStyle(){
  DefaultTextStyle(
    //设置文本默认样式
    style: TextStyle(
      color:Colors.red,
      fontSize: 20.0,
    ),
    textAlign: TextAlign.start,
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Text("Hello Flutter!"),
        Text("Hello Flutter!"),
        Text("Hello Flutter!",
          style: TextStyle(
              inherit: false, //不继承默认样式
              color: Colors.grey
          ),
        ),
      ],
    ),
  );
}