每个控件都是通过构造函数构造的，内置属性参数

文本(Text)

Text Text.rich 混合展示样式与单一样式的关键区别在于分片

Flutter与Android IOS对比

平台	Flutter	Android	IOS
文本	Text	TextView	UILabel
分段文本	TextSpan	SpannableString	NSAttributedString

正常文本

Text(
	textAlign:TextAlign.center,
	style:TextStyle(fontWeight:FontWeight.bold,fontSize:20,color:Color.red),
);

分段文本

TextStyle blackStyle = TextStyle(fontWeight: FontWeight.normal, fontSize: 20, color: Colors.black); //黑色样式

TextStyle redStyle = TextStyle(fontWeight: FontWeight.bold, fontSize: 20, color: Colors.red); //红色样式

Text.rich(
    TextSpan(
        children: <TextSpan>[
          TextSpan(text:'文本是视图系统中常见的控件，它用来显示一段特定样式的字符串，类似', style: redStyle), //第1个片段，红色样式 
          TextSpan(text:'Android', style: blackStyle), //第1个片段，黑色样式 
          TextSpan(text:'中的', style:redStyle), //第1个片段，红色样式 
          TextSpan(text:'TextView', style: blackStyle) //第1个片段，黑色样式 
        ]),
  textAlign: TextAlign.center,
);

Image

本地资源图片，加载本地图片，加载网络图片

图片类型	加载方法
本地资源图片	Image.asset(‘images/logo.png’)；
本地（File 文件）图片	Image.file(new File(’/storage/xxx/xxx/test.jpg’))；
网络图片	Image.network('http://xxx/xxx/test.gif')

FadeInImage 控件

图片加载过程展位和加载错误占位

FadeInImage.assetNetwork(
  placeholder: 'assets/loading.gif', //gif占位
  image: 'https://xxx/xxx/xxx.jpg',
  fit: BoxFit.cover, //图片拉伸模式
  width: 200,
  height: 200,
)

图片展示流程

CachedNetworkImage控件

缓存文件系统，加载过程占位和加载错误占位（自定义控件占位
图片缓存只缓存在内存中，若想支持缓存到文件系统，可以用CachedNetworkImage控件

CachedNetworkImage(
        imageUrl: "http://xxx/xxx/jpg",
        placeholder: (context, url) => CircularProgressIndicator(),
        errorWidget: (context, url, error) => Icon(Icons.error),
     )

按钮

FloatingActionButton FlatButton RaisedButton

按钮名称	描述
FloatingActionButton	一个圆形的按钮，一般出现在屏幕内容的前面，用来处理界面中最常用、最基础的用户动作
RaisedButton	凸起的按钮，默认带有灰色背景，被点击后灰色背景会加深
FlatButton	扁平化的按钮，默认透明背景，被点击后会呈现灰色背景

例子：

FlatButton(
    color: Colors.yellow, //设置背景色为黄色
    shape:BeveledRectangleBorder(borderRadius: BorderRadius.circular(20.0)), //设置斜角矩形边框
    colorBrightness: Brightness.light, //确保文字按钮为深色
    onPressed: () => print('FlatButton pressed'), 
    child: Row(children: <Widget>[Icon(Icons.add), Text("Add")],)
)；

标签：控件,样式,TextSpan,xxx,Text,Flutter,加载
来源： https://www.cnblogs.com/zhangjw83/p/15179639.html