Flutter 组件练习 (text,Image,ListView)

第 01 节：Text Widget 文本组件的使用

// text组件

@override

Widget  build(BuildContext context) {

// final wordPair = new WordPair.random();

// return new Text(wordPair.asPascalCase);

return  new  Scaffold(

appBar:  new  AppBar(

title:  new  Text('第1页'),

actions:  <Widget>[

new  IconButton(icon:  new  Icon(Icons.list), onPressed: _pushSaved),

],

),

// body: _buildSuggestions(),

body:  Center(

child:  Container(

child:  new  Text(

'MaterialPageRoute',

style:  TextStyle(fontSize:  21.0),

),

alignment:  Alignment.topLeft,

width:  300,

height:  400,

// color: Colors.lightBlue,

// padding: const EdgeInsets.all(10.0)

padding:  const  EdgeInsets.fromLTRB(10.0, 30, 0.0, 0),

margin:  const  EdgeInsets.fromLTRB(10.0, 30, 0.0, 0),

decoration:  new  BoxDecoration(

gradient:  const  LinearGradient(colors: [

Colors.lightBlue,

Colors.greenAccent,

Colors.purple

]),

border:  Border.all(width:  5.0, color:  Colors.red)),

),

),

);

}

TextAlign 属性

TextAlign 属性就是文本的对齐方式，它的属性值有如下几个（详细请看视频中讲解）：

• center: 文本以居中形式对齐,这个也算比较常用的了。
• left:左对齐，经常使用，让文本居左进行对齐，效果和 start 一样。
• right :右对齐，使用频率也不算高。
• start:以开始位置进行对齐，类似于左对齐。
• end: 以为本结尾处进行对齐，不常用。有点类似右对齐.

overflow 属性

overflow 属性是用来设置文本溢出时，如何处理,它有下面几个常用的值供我们选择。

• clip：直接切断，剩下的文字就没有了，感觉不太友好，体验性不好。
• ellipsis:在后边显示省略号，体验性较好，这个在工作中经常使用。
• fade: 溢出的部分会进行一个渐变消失的效果，当然是上线的渐变，不是左右的哦。

第 02 节：Container 容器组件的使用 1

• bottomCenter:下部居中对齐。
• botomLeft: 下部左对齐。
• bottomRight：下部右对齐。
• center：纵横双向居中对齐。
• centerLeft：纵向居中横向居左对齐。
• centerRight：纵向居中横向居右对齐。
• topLeft：顶部左侧对齐。
• topCenter：顶部居中对齐。
• topRight： 顶部居左对齐。

设置宽、高和颜色属性

设置宽、高和颜色属性是相对容易的，只要在属性名称后面加入浮点型数字就可以了，比如要设置宽是 500，高是 400，颜色为亮蓝色。代码如下：

child:Container(  child:new Text('Hello JSPang',style: TextStyle(fontSize: 40.0),),  alignment: Alignment.center,  width:500.0,  height:400.0,  color: Colors.lightBlue,),

padding 属性

padding:const EdgeInsets.all(10.0),

EdgeInsets.fromLTRB(value1,value2,value3,value4)

我们用 EdgeInsets.fromLTRB(value1,value2,value3,value4) 可以满足我们的需求，LTRB 分别代表左、上、右、下。

那我们设置上边距为 30，左边距为 10，就可以用下面的代码来编写。

padding:const EdgeInsets.fromLTRB(10.0,30.0,0.0,0.0),

这时候我们的结果就变成了下图。

margin 属性

跟 padding 类似

margin: const EdgeInsets.all(10.0),

decoration 属性

decoration 是 container 的修饰器，主要的功能是设置背景和边框。

比如你需要给背景加入一个渐变，这时候需要使用 BoxDecoration 这个类，代码如下（需要注意的是如果你设置了 decoration，就不要再设置 color 属性了，因为这样会冲突）

设置边框

border:Border.all(width:2.0,color:Colors.red)

运行效果

3.Image 图片组件的使用

加入图片的几种方式

• Image.asset:加载资源图片，就是加载项目资源目录中的图片,加入图片后会增大打包的包体体积，用的是相对路径。
• Image.network:网络资源图片，意思就是你需要加入一段 http://xxxx.xxx 的这样的网络路径地址。
• Image.file:加载本地图片，就是加载本地文件中的图片，这个是一个绝对路径，跟包体无关。
• Image.memory: 加载 Uint8List 资源图片,这个我目前用的不是很多，所以没什么发言权。

我们现在就以加入网络图片为例子，在 Container 里加入一张图片，代码如下：

// Image 组件

@override

Widget  build(BuildContext context) {

// final wordPair = new WordPair.random();

// return new Text(wordPair.asPascalCase);

return  new  Scaffold(

appBar:  new  AppBar(

title:  new  Text('第1页'),

actions:  <Widget>[

new  IconButton(icon:  new  Icon(Icons.list), onPressed: _pushSaved),

],

),

// body: _buildSuggestions(),

body:  Center(

child:  Container(

child:  new  Image.network(

'http://www.imooc.com/static/img/landp_banner.jpg',

// fit: BoxFit.fill,

// fit: BoxFit.fitHeight,

// fit: BoxFit.fitWidth,

// fit: BoxFit.cover,

// color: Colors.yellow,

// colorBlendMode: BlendMode.lighten,

repeat:  ImageRepeat.repeat,

),

width:  300,

height:  200,

color:  Colors.lightBlue,

),

),

);

fit 属性的设置

fit 属性可以控制图片的拉伸和挤压，这些都是根据图片的父级容器来的，我们先来看看这些属性（建议此部分组好看视频理解）。

• BoxFit.fill:全图显示，图片会被拉伸，并充满父容器。

• BoxFit.contain:全图显示，显示原比例，可能会有空隙。

• BoxFit.cover：显示可能拉伸，可能裁切，充满（图片要充满整个容器，还不变形）。

• BoxFit.fitWidth：宽度充满（横向充满），显示可能拉伸，可能裁切。

• BoxFit.fitHeight ：高度充满（竖向充满）,显示可能拉伸，可能裁切。

• BoxFit.scaleDown：效果和 contain 差不多，但是此属性不允许显示超过源图片大小，可小不可大。

repeat 图片重复

• ImageRepeat.repeat : 横向和纵向都进行重复，直到铺满整个画布。

• ImageRepeat.repeatX: 横向重复，纵向不重复。

• ImageRepeat.repeatY：纵向重复，横向不重复。

如图

4：ListView 列表组件简介

@override

Widget  build(BuildContext context) {

return  new  Scaffold(

appBar:  new  AppBar(

title:  new  Text('第1页'),

actions:  <Widget>[

new  IconButton(icon:  new  Icon(Icons.list), onPressed: _pushSaved),

],

),

// body: _buildSuggestions(),

body:  new  ListView(

children:  <Widget>[

new  Image.network(

'http://jspang.com/static/upload/20181213/pvA-e9vkrNiXVFUm6xXMO9zf.jpg',

),

new  Image.network(

'http://jspang.com/static/upload/20181212/RPW7VSlP0xG1UcsMdwPs9MeR.jpg'),

new  Image.network('http://jspang.com/static/myimg/smile-vue.jpg'),

new  Image.network(

'http://jspang.com/static/upload/20181015/hvCIWlUzc3OEMWtXPWJlrI2W.jpg'),

],

padding:  const  EdgeInsets.all(10.0),

),

);