01-文本widget

普通文本

1.控制文本布局的参数：文本对齐方式textAlign、文本排版方向textDirection，文本显示最大行数maxLines、文本截断规则overflow等；
2.控制文本样式的参数：字体名称fontFamily、字体大小fontSize、文本颜色color、文本阴影shadows、textScaleFactor控制文本缩放等。
3.示例demo：
  class HomeBody extends StatelessWidget {
	  @override
	  Widget build(BuildContext context) {
      return Text('《定风波》 苏轼莫听穿林打叶声，何妨吟啸且徐行。竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生。',
            style: TextStyle(fontSize: 20),
            textAlign: TextAlign.center,
            textDirection: TextDirection.ltr,
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
            textScaleFactor:1.5,
  			);
	  }
  }

富文本

class HomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text.rich(
      TextSpan(
          children: [
            TextSpan(text:'《定风波》',style: TextStyle(color: Colors.pink)),
            TextSpan(text:'苏轼',style: TextStyle(color: Colors.red)),
            WidgetSpan(child: Icon(Icons.favorite,color: Colors.red)) ,
            TextSpan(text:'莫听穿林打叶声，何妨吟啸且徐行。竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生',style: TextStyle(color: Colors.orange
            )),
          ]
      ),
    );
  }
}

Icon-Widget

1.特点：
  字体图标矢量图放大的时候不会失真；
  字体图标可以设置颜色；
  图标很多时，占据空间更小。
2.示例：
// 图片图标
  return Icon(Icons.pets, size: 300, color: Colors.orange,);
  return Icon(IconData(0xe91d, fontFamily: 'MaterialIcons'), size: 300);
// 字体图标，其中0xe91d是其对应的unicode编码
  return Text("\ue91d", style: TextStyle(fontSize: 100, color: Colors.orange, fontFamily: "MaterialIcons"),);

02-按钮Widget

分类

1.RaisedButton;
2.FlatButton;
3.OutlineButton;
4.FloatingActionButton;
5.自定义Button(自己设置样式，一般是选择RaisedButton或者FlatButton)

代码

1.默认的按钮上下有外边距解决：materialTapTargetSize；
2.里面有内边距解决：设置padding；
3.设置按钮的大小(button默认情况下上下有一定间距)：ButtonTheme包裹（文本都有默认行高，按钮也有默认大小；所以可能会出现加上padding，但是上下还是有间距的情况）。
class HomeBody extends StatelessWidget {
@override
Widget build(BuildContext context) {
  return Column(
    children: <Widget>[
      ButtonTheme(
        minWidth: 30.0,
        height: 30.0,
        //凸起的基本按钮
        child:  RaisedButton(
          child: Text('RaisedButton'),
          color: Colors.pink,
          textColor: Colors.white,
          materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
          padding: EdgeInsets.all(0),
          onPressed: (){
            print('RaisedButton');
          },
        ),
      ),
      //没有默认边框，平面按钮
      FlatButton(
        child: Text('FlatButton'),
        color: Colors.blue,
        onPressed: (){},
      ),
      //外轮廓凸显的按钮
      OutlineButton(
        child: Text('FlatButton'),//上下文字不一样时，会出现按钮距离左边边框有距离
        color: Colors.orange,
        onPressed: (){},
      ),
      //浮动的按钮，一般看见于页面右下角
      FloatingActionButton(
        child: Text('Float'),
      ),
     // 自定义按钮样式
      FlatButton(
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Icon(Icons.favorite,color: Colors.white),
            Text('自定义'),
          ],
        ),
        color: Colors.pink,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(15)
        ),
        onPressed: (){},
      ),
    ],
  );
 }
}

03-图片Widget

加载网络图片

1.属性Image.network(),其中有属性：（如果属性要求传入的是provider类型，就要使用NetworkImage（））
	width, //图片的宽
	height, //图片高度
  color, //图片的混合色值
  colorBlendMode, //混合模式
  fit,//在图片的显示空间和图片本身大小不同时指定图片的适应模式
 	alignment, //对齐方式
	repeat , //当图片本身大小小于显示空间时，指定图片的重复规则
2.代码示例：
	class MyHomeBody extends StatelessWidget {
	  @override
    Widget build(BuildContext context) {
  	return Center(
        child: Container(
          child: Image.network(
          "http://img0.dili360.com/ga/M01/48/3C/wKgBy1kj49qAMVd7ADKmuZ9jug8377.tub.jpg",
           alignment: Alignment.topCenter,
           repeat: ImageRepeat.repeatY,
           color: Colors.red,
           colorBlendMode: BlendMode.colorDodge,
         ),
         width: 300,
         height: 300,
         color: Colors.yellow,
       ),
     );
    }
   }

加载本地图片

1.讲解：先在pubspec.yaml文件中配置assets图片路径(assets: - 文件夹名称/文件名称或者不写文件只写‘/’)，引入，然后使用。（如果属性要求传入的是provider类型，就要使用AssetImage（））
2.代码：
  class MyHomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 300,
        height: 300,
        color: Colors.yellow,
        child: Image.asset("images/test.jpeg"),
      ),
    );
  }
}

占位图

1.解析：FadeInImage组件(placeholder属性---当前位置的图片没加载出来要显示的图片---和image属性都需要传一个provider类型数据)；
2.示例：
class ImageExtensionDemo extends StatelessWidget {
final String imageURL;
@override
Widget build(BuildContext context) {
  return FadeInImage(
    fadeOutDuration: Duration(milliseconds: 1),
    fadeInDuration: Duration(milliseconds: 1),
    placeholder: AssetImage("assets/images/juren.jpeg"),
    image: NetworkImage(imageURL),  //要求传入imageProvider
  );
}
}
3.补充
  默认会有图片缓存，容量为1000张，最大为100M

实现圆角头像

CircleAvatar

1.属性:
	child, // 子Widget
	this.backgroundColor, // 背景颜色
	this.backgroundImage, // 背景图像
	this.foregroundColor, // 前景颜色
	this.radius, // 半径
	this.minRadius, // 最小半径
	this.maxRadius, // 最大半径
 2.示例代码：
	class HomeContent extends StatelessWidget {
	@override
	  Widget build(BuildContext context) {
  	    return Center(
    	  child: CircleAvatar(
      	  radius: 100,
      	  backgroundImage: NetworkImage("https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg"),
      	  child: Container(
       	  alignment: Alignment.center,
          width: 200,
          height: 200,
          child: Text("兵长利威尔")
        ),
      ),
    );
  }
}

ClipOval（通常是在只有头像时使用）

示例代码：
class HomeContent extends StatelessWidget {
@override
	Widget build(BuildContext context) {
    	return Center(
    		child: ClipOval(
      			child: Image.network(
                	"https://..."
      				width: 200,
      				height: 200,
   				),
  			),
		);
}
}

Container+BoxDecoratio

实现圆角图片

ClipRRect

class HomeContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
	return Center(
  	child: ClipRRect(
    	borderRadius: BorderRadius.circular(10),
    	child: Image.network(
      		"https:...
      		width: 200,
      		height: 200,
    		),
  		),
		);
}
}

Container+BoxDecoration

04-表单Widget

TextField

1.常见属性
	keyboardType键盘的类型，
	style设置样式，
	textAlign文本对齐方式，
	maxLength最大显示行数等；
	decoration：用于设置输入框相关的样式
		icon：设置左边显示的图标
		labelText：在输入框上面显示一个提示的文本
		hintText：显示提示的占位文字
		border：输入框的边框，默认底部有一个边框，可以通过InputBorder.none删除掉
		filled：是否填充输入框，默认为false
		fillColor：输入框填充的颜色
	controller：使用它设置文本的初始值，也可以使用它监听文本的改变；
	onChanged：监听输入框内容的改变，传入一个回调函数；
	onSubmitted：点击键盘中右下角的down时，会回调的一个函数；
2.示例代码
	class TextFieldDemo extends StatelessWidget {
  // 自定义Controller
	final usernameTextEditController = TextEditingController();
	final passwordTextEditController = TextEditingController();
	@override
	Widget build(BuildContext context) {
    return Theme(
    	data: ThemeData(
        primaryColor: Colors.red
      ),
     child: Padding(
       padding: const EdgeInsets.all(8.0),
       child: Column(
         children: <Widget>[
           TextField(
             controller: usernameTextEditController,
             decoration: InputDecoration(
                labelText: "username",
                icon: Icon(Icons.people),
                hintText: "请输入用户名",
                border: InputBorder.none,
                filled: true,
                fillColor: Colors.red[100]
            ),
            onChanged: (value) {
              print("onChange:$value");
            },
            onSubmitted: (value) {
              print("onSubmitted:$value");
            },
          ),
          SizedBox(height: 10,),
          TextField(
            controller: passwordTextEditController,
            decoration: InputDecoration(
              labelText: "password",
              icon: Icon(Icons.lock),
              border: OutlineInputBorder(),
            ),
          ),
          SizedBox(height: 10,),
          Container(
            width: double.infinity,
            height: 40,
            child: FlatButton(
              child: Text("登 录", style: TextStyle(fontSize: 20, color: Colors.white),),
              color: Colors.blue,
              onPressed: () {
                // 1.获取用户名和密码
                final username = usernameTextEditController.text;
                final password = passwordTextEditController.text;
                print("账号:$username 密码:$password");
                usernameTextEditController.text = "";
                passwordTextEditController.text = "";
              },
            ),
          )
        ],
      ),
    ),
  );
 }
}

Form表单

1.使用：Form表单输入框必须是FormField类型的，而TextField是继承自StatefulWidget，而不是一个FormField类型，故采用TextFormField，使用类似于TextField，并且继承自FormField.
2.示例代码：
	class FormDemo extends StatefulWidget {
	@override
		_FormDemoState createState() => _FormDemoState();
 	}
  class _FormDemoState extends State<FormDemo> {
	@override
	Widget build(BuildContext context) {
  	return Form(
    		child: Column(
      		mainAxisAlignment: MainAxisAlignment.center,
      		children: <Widget>[
        			TextFormField(
          		decoration: InputDecoration(
           	 	icon: Icon(Icons.people),
            		labelText: "用户名或手机号"
          		),
        		),
        		TextFormField(
          	obscureText: true,
          	decoration: InputDecoration(
            		icon: Icon(Icons.lock),
            		labelText: "密码"
          		),
        		),
        		SizedBox(height: 16,),
        		Container(
          		width: double.infinity,
          		height: 44,
          		child: RaisedButton(
            			color: Colors.lightGreen,
            			child: Text("注 册", style: TextStyle(fontSize: 20, color: Colors.white),),
            			onPressed: () {
             		 	print("点击了注册按钮");
            			},
          			),
        		)
      		],
    		),
  		);
  	}
	}

Says flutter---05基础widget

01-文本widget

02-按钮Widget

03-图片Widget

04-表单Widget