StatelessWidget常用组件总结，撑起Flutter的半边天？

StatelessWidget常用基础总结，我也是刚刚开始学Flutter，总结一下主要用于以后学习，避免忘记。

我学习视频的那个老师博客地址，老师说的很不错，清晰易懂。

Flutter学习第一天：小伙花饭钱去买Flutter教学视频，只为了知道Flutter是否支持双系统开发？

Flutter学习第二天：Dart常用数据类型以及方法大总结，满满的干货，对于学过Python和java的太友好了？

Flutter学习的第三天：面向对象编程Dart语言的学习还能让我回忆java基础，“诚不欺我”真的能够快速上手。

1.Text

因为dart采用声明书的布局格式。

TextStyle textStyle = TextStyle(fontSize: 30,    //字体大小
        color:Colors.deepOrange,                     //字体颜色
        decoration: TextDecoration.lineThrough,     //设置删除线
        decorationColor: Colors.green,          //删除线颜色为绿色
        decorationStyle: TextDecorationStyle.wavy,      //删除线为波浪线
        fontWeight: FontWeight.bold,                 //加粗
        fontStyle: FontStyle.italic,          //斜体
        //letterSpacing: 2.0,
       // backgroundColor: Colors.blue,   //背景颜色
       );

 Text(
	   'Hello world',   //输出内容
	   style: textStyle,    //字体格式
	   //textDirection: TextDirection.ltr,
	   softWrap: false,     //自动换行
	   overflow: TextOverflow.fade,  //文字超出屏幕之后的处理方式（clip裁剪，fade 渐隐，ellipsis 省略号）
	   textScaleFactor: 1.0,
	  )
	  

排布格式：

效果：

2.icon

Icon(
   Icons.access_alarm,  //系统自带图片
   size: 50,            //图片大小
   color: Colors.red,   //图片颜色
   ),

如何导入外部图片呢？

1.先新建一个images目录

2.导入你需要导入的图片

3.在pubspec.yaml文件里面加入如图图片地址

4.使用Image组件导入外部图片

   Image(
      width: 100,
      height: 100,
      image:AssetImage('images/image.png'),
    )

效果如下：

3.CloseButton,BackButton

CloseButton(),
BackButton(),
IconButton(icon:Icon(Icons.people), onPressed: null),

效果如下：

4.chip

   Chip(
    avatar: Icon(Icons.people),  //左边的图片
    label: Text('有趣的小组件'),
    deleteIcon: Icon(Icons.remove_red_eye_outlined),  //右边图片
    onDeleted: ()=>print('删除'),  //响应事件
    ),

效果：

5.Divider

分隔符

 Divider(
   height: 10,
   indent: 10,
   color: Colors.orange,
  ),

效果：

6.Card

 Card(
	color: Colors.blue,   //卡片背景色
	  shadowColor: Colors.red, //阴影颜色
	  elevation: 5,    //阴影高度
	  margin:EdgeInsets.all(10),  //外边距
	  child: Container(   //用Container容器包裹起来
	    width: 150,    
	    height: 80,
	    padding: EdgeInsets.all(10),   //内边距
	    child:Column(
	      children: [
	        Text(
	          'I am Card',        
	          style: textStyle,
	        ),
	        Icon(
	          Icons.add_a_photo,
	          size: 30,
	          color: Colors.orange,
	        )
	      ],
	    )
	  ),
	),

效果：

7.AlertDialog

AlertDialog(
    title: Text('耗子喂汁'),
    content: Text('大意了，没有闪'),
  ),

效果：

持续学习中。。。。