flutter 有状态组件StatefulWidget、控制子组件高宽组件SiezedBox、标签组件Chip

有状态组件:
 能够动态改变数据状态
	安装插件
		Flutter Widget Snippets
		Awesome Flutter Snippets
	快捷键生成有状态和无状态组件:
		 statefulw
		 statelessw
	改变状态(改变会会重新渲染):
	   setState((){
			 this.类的属性=值
			}
		)
	
控制子组件高宽组件:
 也可以用来设置组件间的间距
 	SizedBox(
 		height,
 		width,
 		child:组件
 	)
 	其他类型的SizedBox组件
		SizedBox.expand():  可以使SizedBox的大小充满parent的布局，相当于设置了SizedBox的宽度和高度为double.infinity(无穷大)。
		SizedBox.fromSize():  创建一个指定Size的SizedBox
		FractionallySizedBox():可以用百分比来控制sizebox的大小。 widthFactor，heightFactor参数就是相对于父控件的比例。 alignment：可以设置sizebox在父控件里面的相对位置。
		SizedOverflowBox(): 通过设置Size，允许它的child控件，溢出它的父控件，进行绘制，不会报OverFlow的错误。
		OverflowBox()： 通过设置最大最小的宽高，OverflowBox允许它的child控件，溢出它的父控件，进行绘制，不会报OverFlow的错误。
		LimtedBox(): 一个可以限制子控件的最大宽高的控件，child只能在这区域内进行绘制

标签组件
	两边为半圆的标签矩形
		Chip(
			Key key,	
		    avatar,  标签左侧Widget，一般为小图标，可以使用CircleAvatar来设置
		   	label,   标签，设置标签内容
		    labelStyle,
		    labelPadding,
		    deleteIcon,  删除的图标,标签最右侧
		    onDeleted,  删除回调，为空时不显示删除图标
		    deleteIconColor,  删除图标的颜色
		    deleteButtonTooltipMessage,  删除图标位置长按时显示的信息
		    shape,   形状.默认两端是半圆形
		    clipBehavior = Clip.none
		    backgroundColor,  背景颜色
		    padding,
		    materialTapTargetSize,  设置为MaterialTapTargetSize.shrinkWrap时，clip距顶部距离为0；设置为MaterialTapTargetSize.padded时距顶部有一个距离
		)

代码示例:

import "package:flutter/material.dart";

void main()
{
  runApp(App());
}

class App extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home:Scaffold(appBar: AppBar(title: Text("hh")),
        body:Home2()
      )
      ,);
  }
}

class Home extends StatelessWidget {
  const Home({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          SizedBox(height: 200,width: 200,child:Text('哈哈哈',textAlign: TextAlign.center)),
          Text("1")
        ],
      ),
    );
  }
}
class Home2 extends StatefulWidget {
  Home2({Key key}) : super(key: key);

  @override
  _Home2State createState() => _Home2State();
}

class _Home2State extends State<Home2> {
  int num=0;
  @override
  Widget build(BuildContext context) {
    return  Container(
      child: Column(
        children:<Widget>[
          Chip(
            label: Text(this.num.toString()),
          ),
          SizedBox(
            height: 20,
          ),
          RaisedButton(
            child: Text('按钮',style: TextStyle(color: Color(0xff00ff00)),),
            onPressed: (){
                setState(() {
                  this.num++;
                });
            },
          ),
          Chip(
                  label: Text("课程"),
                  deleteIcon: Icon(Icons.cancel),
                  deleteIconColor: Colors.red,
                  deleteButtonTooltipMessage: "长按删除按钮显示这个信息",
                  onDeleted: (){},
                  avatar: CircleAvatar(
                    backgroundColor: Colors.green,
                    child: Text("K"),
                  ),
                )
        ],
      ),
    );
    
  }
}