一、Text文本
Text是显示文本的组件,最常用的组件,都没有之一。基本用法如下:
Text("Hello world1",
maxLines: 1,// 最大显示行数
//是否自动换行 false文字不考虑容器大小,单行显示,超出屏幕部分将默认截断处理
softWrap: true,
//文字超出屏幕之后的处理方式 TextOverflow.clip剪裁 TextOverflow.fade 渐隐 TextOverflow.ellipsis省略号
overflow: TextOverflow.ellipsis,
//TextDirection.ltr从左至右,TextDirection.rtl从右至左
textDirection: TextDirection.rtl,
//TextAlign.left左对齐,TextAlign.right右对齐,TextAlign.center居中对齐,TextAlign.justfy两端对齐
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.blue,//字体颜色
fontSize: 18.0,//字体大小
height: 5.5,//字体高度
fontFamily: "Courier",
background: new Paint()..color=Colors.yellow,
decoration:TextDecoration.underline,//下划线
decorationStyle: TextDecorationStyle.dashed//下划线 样式
),
);
效果如下
二、button按钮
///自定义按钮外观
//@required this.onPressed, //按钮点击回调
//this.textColor, //按钮文字颜色
//this.disabledTextColor, //按钮禁用时的文字颜色
//this.color, //按钮背景颜色
//this.disabledColor,//按钮禁用时的背景颜色
//this.highlightColor, //按钮按下时的背景颜色
//this.splashColor, //点击时,水波动画中水波的颜色
//this.colorBrightness,//按钮主题,默认是浅色主题
//this.padding, //按钮的填充
//this.shape, //外形
//@required this.child, //按钮的内容
//this.elevation = 2.0, //正常状态下的阴影
//this.highlightElevation = 8.0,//按下时的阴影
//this.disabledElevation = 0.0,// 禁用时的阴影
///RaisedButton 即"漂浮"按钮,它默认带有阴影和灰色背景。按下后,阴影会变大
var buttonOne = new RaisedButton(
child: Text("normal"),
onPressed: () {},
);
///FlatButton即扁平按钮,默认背景透明并不带阴影。按下后,会有背景色
var buttonTow = new FlatButton(
child: Text("normal"),
onPressed: () {},
);
///OutlineButton默认有一个边框,不带阴影且背景透明。按下后,边框颜色会变亮、同时出现背景和阴影(较弱)
var buttonThree = new OutlineButton(
child: Text("normal"),
onPressed: () {},
);
///IconButton是一个可点击的Icon,不包括文字,默认没有背景,点击后会出现背景
var buttonFour = new IconButton(
icon: Icon(Icons.thumb_up),
onPressed: () {},
);
///带图标的按钮
///RaisedButton、FlatButton、OutlineButton都有一个icon 构造函数,通过它可以轻松创建带图标的按钮
var buttonFire1 = RaisedButton.icon(
icon: Icon(Icons.send),
label: Text("发送"),
onPressed: () {},
);
var buttonFire2 = OutlineButton.icon(
icon: Icon(Icons.add),
label: Text("添加"),
onPressed: () {},
);
var buttonFire3 = FlatButton.icon(
icon: Icon(Icons.info),
label: Text("详情"),
onPressed: () {},
);
Column(
children: <Widget>[
RaisedButton(
child: Text("normal"),
onPressed: () {},
),
FlatButton(
child: Text("normal"),
onPressed: () {},
),
OutlineButton(
child: Text("normal"),
onPressed: () {},
),
IconButton(
icon: Icon(Icons.thumb_up),
onPressed: () {},
),
RaisedButton.icon(
icon: Icon(Icons.send),
label: Text("发送"),
onPressed: () {},
),
OutlineButton.icon(
icon: Icon(Icons.add),
label: Text("添加"),
onPressed: () {},
),
FlatButton.icon(
icon: Icon(Icons.info),
label: Text("详情"),
onPressed: () {},
),
FlatButton(
color: Colors.blue,
highlightColor: Colors.blue[700],
colorBrightness: Brightness.dark,
splashColor: Colors.grey,
child: Text(
"Submit",
),
shape:RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
onPressed: () {
},
)
],
),
效果图如下:
三、Image图片控件
///在工程根目录下创建一个images目录,并将图片avatar.png拷贝到该目录。
///在pubspec.yaml中的flutter部分添加如下内容:
///assets:
/// - images/avatar.png
/// 加载本地图片
var imageView1 = Image(
image: AssetImage("images/img.png"),
width: 100.0,
height: 100.0,
);
var imageView2 = Image.asset(
"images/img.png",
width: 100.0,
);
///从网络加载图片
var imageView3 = Image(
image: NetworkImage(
"https://avatars2.githubusercontent.com/u/20411648?s=460&v=4"),
width: 100.0,
);
var imageView4 = Image.network(
"https://avatars2.githubusercontent.com/u/20411648?s=460&v=4",
width: 100.0,
);
//const Image({
//...
//this.width, //图片的宽
//this.height, //图片高度
//this.color, //图片的混合色值
//this.colorBlendMode, //混合模式
//this.fit,//缩放模式
//this.alignment = Alignment.center, //对齐方式
//this.repeat = ImageRepeat.noRepeat, //重复方式
//...
//})
四、icon图标
/// ICON
/// Flutter默认包含了一套Material Design的字体图标,在pubspec.yaml文件中的配置如下
///flutter:
/// uses-material-design: true
///Material Design所有图标可以在其官网查看:https://material.io/tools/icons/
// fingerprint:  or 0xE90D or E90D
//icons += " \uE90D";
var icon1 =Text("\uE914 \uE90D",
style: TextStyle(
fontFamily: "MaterialIcons",
fontSize: 24.0,
color: Colors.green
),
);
///Flutter封装了IconData和Icon来专门显示字体图标
var icon2 =Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.accessible,color: Colors.green,),
Icon(Icons.error,color: Colors.green,),
Icon(Icons.fingerprint,color: Colors.green,),
],
);
五、Checkbox选择框
Checkbox是勾选框控件,本身不包含任何状态,改变状态需要通过改变value的值改变。基本用法如下:
var _checkValue = false;
_buildCheckbox(){
return Checkbox(
value: _checkValue,
onChanged: (value){
setState(() {
_checkValue = value;
});
},
);
}
效果如下:
value
值为bool类型,true表示选择状态。
onChanged
为发生变化时回调,即点击控件时回调,方法内的参数为新的值。
activeColor
为激活状态下颜色,是矩形区域内的颜色,checkColor
是选中后“对勾”的颜色,用法如下:
Checkbox(
activeColor: Colors.red,
checkColor: Colors.blue,
...
)
效果如下:
#CheckboxListTile
通常情况下,我们不直接使用Checkbox,而是使用CheckboxListTile,因为我们需要Checkbox后面添加说明,用法如下:
Container(
width: 120,
child: CheckboxListTile(
title: Text('老孟'),
value: _checkValue,
onChanged: (value){
setState(() {
_checkValue = value;
});
},
),
)
CheckboxListTile默认是充满父组件的,因此需要Container限制其宽度,效果如下:
一般的习惯是将勾选框放在前面,用法如下:
CheckboxListTile(
controlAffinity: ListTileControlAffinity.leading,
...
)
ListTileControlAffinity取值范围说明如下:
- leading:勾选框在开头位置。
- trailing:勾选框在结尾位置,
- platform:根据平台确定
还可以设置其子标题和第二图标,用法如下:
CheckboxListTile(
subtitle: Text('一枚有态度的程序员'),
secondary: Icon(Icons.person),
...
)
secondary
一般放置一个图标,位于勾选框的另一边。效果如下:
六、Switch
Switch为material风格的开关组件,基本用法如下:
var _switchValue = false;
_buildSwitch(){
return Switch(
value: _switchValue,
onChanged: (value){
setState(() {
_switchValue = value;
});
},
);
}
效果如下:
设置激活状态下thumb及track颜色,用法如下:
Switch(
activeColor: Colors.red,
activeTrackColor: Colors.blue,
...
)
效果如下:
注意红色区域为thumb,蓝色区域为track。
thumb区域也可以设置图片,用法如下:
Switch(
activeThumbImage: AssetImage('images/bird.png',),
...
)
效果如下:
有激活状态样式的设置,也有未激活样式的设置,用法如下:
Switch(
inactiveThumbColor: Colors.black54,
inactiveThumbImage: AssetImage('images/bird.png',),
inactiveTrackColor: Colors.blue,
...
)
#SwitchListTile
SwitchListTile是Switch和ListTile组合控件,基本用法如下:
var _switchValue = false;
_buildSwitch(){
return SwitchListTile(
title:Text('是否允许4G下载'),
value: _switchValue,
onChanged: (value){
setState(() {
_switchValue = value;
});
},
);
}
效果如下:
所有的属性都是Switch和ListTile属性的组合,可到具体控件查看其属性。
#CupertinoSwitch
CupertinoSwitch是ios风格控件,用法和Switch一样,用法如下:
var _switchValue = false;
_buildSwitch(){
return CupertinoSwitch(
value: _switchValue,
onChanged: (value){
setState(() {
_switchValue = value;
});
},
);
}
效果如下:
七、TextField 输入框
const TextField({
Key key,
//控制正在编辑的文本。通过其可以拿到输入的文本值
//获取方式 String value=controller.text
this.controller, 控制器,控制TextField文字
//控制此小部件是否具有键盘焦点。
this.focusNode,
//给TextField设置装饰(形状等)
this.decoration = const InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
borderSide: BorderSide(color: Colors.transparent)
),
//输入内容距离上下左右的距离 ,可通过这个属性来控制 TextField的高度
contentPadding: EdgeInsets.all(10.0),
fillColor: Colors.white, filled: true,
// labelText: 'Hello',
// 以下属性可用来去除TextField的边框
disabledBorder: InputBorder.none,
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none,
), //输入器装饰
TextInputType keyboardType, 输入的类型 TextInputType.text
//控制键盘的功能键 指enter键,比如此处设置为next时,enter键
//显示的文字内容为 下一步
this.textInputAction, //TextInputAction.next
//键盘大小写的显示 Only supports text keyboards 但是好像不起作用?
//characters 默认为每个字符使用大写键盘
//sentence 默认为每个句子的第一个字母使用大写键盘
//word 默认为每个单词的第一个字母使用大写键盘。
//none 默认使用小写
this.textCapitalization = TextCapitalization.none,
this.style,
this.textAlign = TextAlign.start, //文字显示位置
this.autofocus = false, //是否自动获得焦点
this.obscureText = false, //是否是密码
this.autocorrect = true, //是否自动更正
this.maxLines = 1,
//最大长度,设置此项会让TextField右下角有一个输入数量的统计字符串
//这种情况一般是不符合我们设计的要求的,但是有需要限制其输入的位数
// 这时候我们可以使用下方的属性来限制
this.maxLength,
// 跟最大长度限制对应,如果此属性设置为false,当输入超过最大长度
// 限制时,依然会显示输入的内容,为true不会(默认为 true)
this.maxLengthEnforced = true,
// 限制输入的 最大长度 TextField右下角没有输入数量的统计字符串
this.inputFormatters: [LengthLimitingTextInputFormatter(11)],
//允许的输入格式 下方的模式指只允许输入数字
this.inputFormatters: [WhitelistingTextInputFormatter.digitsOnly],
this.onChanged, //内容改变的回调
this.onEditingComplete, //按回车时调用
this.onSubmitted, //内容提交(按回车)的回调
this.enabled,
//光标宽度
this.cursorWidth = 2.0,
this.cursorRadius, //光标圆角弧度
//光标颜色
this.cursorColor,
this.keyboardAppearance,
this.scrollPadding = const EdgeInsets.all(20.0),
})
输入框用法大全
class page extends StatefulWidget {
page({Key key}) : super(key: key);
@override
_PageState createState() => _PageState();
}
class _PageState extends State<page> {
final controller = TextEditingController();
FocusNode focusNode1 = new FocusNode();
FocusNode focusNode2 = new FocusNode();
FocusScopeNode focusScopeNode;
var _textFieldValue = '';
@override
void initState() {
super.initState();
controller.addListener(() {
print('input ${controller.text}');
});
}
@override
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "Container Title",
home: Scaffold(
appBar: AppBar(
title: Text(
"Container Titlte",
style: TextStyle(color: Colors.cyan),
),
),
body:Column(
children: <Widget>[
TextField(
autofocus: true, //是否自动获得焦点
obscureText: false,//是否是密码
maxLines: 5,//最大行数
minLines: 3,//最小行数
// keyboardType: TextInputType.text,//指定输入方式为文本输入
keyboardType: TextInputType.number,//指定唤起软键盘时默认显示数字键盘
focusNode: focusNode1,//关联focusNode1
controller: controller, 控制器,控制TextField文字
//给TextField设置装饰(形状等)
decoration: InputDecoration(
border: OutlineInputBorder(//输入边框
borderRadius: BorderRadius.circular(10.0),
borderSide: BorderSide(color: Colors.transparent)
),
icon: Icon(Icons.person_add),//在控件左方
prefixIcon: Icon(Icons.person),//在控件中的左方
labelText: '姓名:',//上方提示文字
labelStyle: TextStyle(color:Colors.red),
helperText: '用户名长度为6-10个字母',//下方方提示文字
helperStyle: TextStyle(color: Colors.blue),
helperMaxLines: 1,
hintText: '请输入用户名',//提示文字
hintStyle: TextStyle(color: Colors.grey),
hintMaxLines: 1,
// errorText: '用户名输入错误',//错误提示
// errorStyle: TextStyle(fontSize: 12),
// errorMaxLines: 1,
// errorBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.red)),
counterText: '${_textFieldValue.length}/32',//提示字数
//输入内容距离上下左右的距离 ,可通过这个属性来控制 TextField的高度
contentPadding: EdgeInsets.all(10.0),
// 以下属性可用来去除TextField的边框
disabledBorder: InputBorder.none,
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none,
),
textAlign: TextAlign.center, //文字显示位置
onChanged: (value){//内容改变的回调
setState(() {
_textFieldValue = value;
});
},
onSubmitted: (value){//内容提交(按回车)的回调
setState(() {
_textFieldValue = value;
});
},
onEditingComplete: (){
print("----------------编辑完成---");
},
),
TextField(
focusNode: focusNode2,//关联focusNode2
decoration: InputDecoration(
labelText: "input2"
),
),
RaisedButton(
child: Text("移动焦点"),
onPressed: () {
//将焦点从第一个TextField移到第二个TextField
// 这是一种写法 FocusScope.of(context).requestFocus(focusNode2);
// 这是第二种写法
if(null == focusScopeNode){
focusScopeNode = FocusScope.of(context);
}
focusScopeNode.requestFocus(focusNode2);
},
),
RaisedButton(
child: Text("隐藏键盘"),
onPressed: () {
// 当所有编辑框都失去焦点时键盘就会收起
focusNode1.unfocus();
focusNode2.unfocus();
},
),
],
),
),
);
}
//销毁
@override
void dispose() {
controller.dispose();
super.dispose();
}
}