FLutter2.X新按钮组件及新特性
FLutter2.X新组件及新特性
-
-
- 按钮组件
- 空安全
-
- 创建组件的变化
- 配置路由的变化
-
按钮组件
| Flutter1.x 中的按钮组件 | Flutter2.x 中的按钮组件 |
|---|---|
| RaisedButton 凸起的按钮 | ElevatedButton 凸起的按钮 |
| FlatButton 扁平化的按钮 | TextButton 扁平化的按钮 |
| OutlineButton 线框按钮 | OutlinedButton 线框按钮 |
| IconButton 图标按钮 | IconButton 图标按钮 |
| ButtonBar 按钮组 | ButtonBar 按钮组 |
| FloatingActionButton 浮动按钮 | FloatingActionButton 浮动按钮 |
RaisedButton的部分参数如下:
| 参数 | 说明 |
|---|---|
| onPressed | 点击事件 |
| onLongPress | 长按点击事件 |
| textColor | 文字颜色 |
| child | 内部布局 |
| elevation | 阴影大小 |
| color | 按钮背景颜色 |
| textColor | 文字颜色 |
| splashColor | 波纹颜色 |
| shape | 处理圆角、边框等样式 shape: RoundedRectangleBorder(borderRadius:BorderRadius.circular(10),) shape:CircleBorder(side: BorderSide(color: Colors.white,)) |
| splashColor | 波纹颜色 |
控制按钮大小可在按钮外部嵌套Container，让按钮宽度自适应屏幕大小可在外部嵌套Expanded
// ignore_for_file: prefer_typing_uninitialized_variables, sized_box_for_whitespace, use_key_in_widget_constructors, avoid_init_to_null
import 'package:flutter/material.dart';
class ButtonDemoPage extends StatelessWidget {
const ButtonDemoPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("按钮演示页面"),
actions: <Widget>[
IconButton(
icon: Icon(Icons.settings),
onPressed: (){
},
)
],
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text('普通按钮'),
onPressed: () {
print("普通按钮");
},
),
SizedBox(width: 5),
RaisedButton(
child: Text('颜色按钮'),
color: Colors.blue,
textColor: Colors.white,
onPressed: () {
print("有颜色按钮");
},
),
],
),
SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text('阴影按钮'),
color: Colors.blue,
textColor: Colors.white,
elevation: 20,
onPressed: () {
print("有阴影按钮");
},
),
SizedBox(width: 5),
RaisedButton.icon(
icon: Icon(Icons.search),
label: Text('图标按钮'),
color: Colors.blue,
textColor: Colors.white,
// onPressed: null,
onPressed: () {
print("图标按钮");
})
],
),
SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
height: 50,
width:200,
child: RaisedButton(
child: Text('宽度高度'),
color: Colors.blue,
textColor: Colors.white,
elevation: 20,
onPressed: () {
print("宽度高度");
},
),
)
],
),
SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: Container(
height: 60,
margin: EdgeInsets.all(20),
child: RaisedButton(
child: Text('自适应按钮'),
color: Colors.blue,
textColor: Colors.white,
elevation: 20,
onPressed: () {
print("自适应按钮");
},
),
),
)
],
),
SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: Text('圆角按钮'),
color: Colors.blue,
textColor: Colors.white,
elevation: 20,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
onPressed: () {
print("圆角按钮");
}),
Container(
height: 80,
child: RaisedButton(
child: Text('圆形按钮'),
color: Colors.blue,
textColor: Colors.white,
elevation: 20,
splashColor: Colors.red,
shape:
CircleBorder(side: BorderSide(color: Colors.white)),
onPressed: () {
print("圆形按钮");
}),
),
FlatButton(
child: Text("按钮"),
color: Colors.blue,
textColor: Colors.yellow,
onPressed: () {
print('FlatButton');
},
),
SizedBox(width: 10),
OutlineButton(
child: Text("按钮"),
// color: Colors.red, //没有效果
// textColor: Colors.yellow,
onPressed: () {
print('FlatButton');
})
],
),
SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: Container(
margin: EdgeInsets.all(20),
height: 50,
child: OutlineButton(child: Text("注册"), onPressed: () {}),
),
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
ButtonBar(
children: <Widget>[
RaisedButton(
child: Text('登录'),
color: Colors.blue,
textColor: Colors.white,
elevation: 20,
onPressed: () {
print("宽度高度");
},
),
RaisedButton(
child: Text('注册'),
color: Colors.blue,
textColor: Colors.white,
elevation: 20,
onPressed: () {
print("宽度高度");
},
),
MyButton(text: "自定义按钮",height: 60.0,width: 100.0,pressed: (){
print('自定义按钮');
})
],
)
],
)
],
));
}
}
//自定义按钮组件
class MyButton extends StatelessWidget {
final text;
final pressed;
final width;
final height;
const MyButton({this.text='',this.width=80,this.height=30, this.pressed}) ;
@override
Widget build(BuildContext context) {
return Container(
height: height,
width: width,
child: RaisedButton(
child: Text(text),
onPressed:pressed ,
),
);
}
}
ElevatedButton的部分参数如下：
| 参数 | 说明 |
|---|---|
| onPressed | 点击事件 |
| onLongPress | 长按点击事件 |
| style | 按钮样式 |
| child | 内部组件 |
RaisedButton使用了不同的参数实现样式，ElevatedButton的样式都在style中使用,使用MaterialStateProperty对各种状态进行判断并返回相应的样式组件,也可以通用一种样式组件
详细可以参考这篇文章，写的很详细
// ignore_for_file: prefer_typing_uninitialized_variables, sized_box_for_whitespace, prefer_const_constructors
import 'package:flutter/material.dart';
class ButtonExtendDemoPage extends StatelessWidget {
const ButtonExtendDemoPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter2.x按钮演示页面"),
actions: <Widget>[
IconButton(
icon: Icon(Icons.settings),
onPressed: (){
},
)
],
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ElevatedButton (
child: Text('普通按钮'),
onPressed: () {
print("普通按钮");
},
),
SizedBox(width: 5),
ElevatedButton(
child: Text('颜色按钮'),
style:ButtonStyle(
backgroundColor:MaterialStateProperty.all(Colors.red),
foregroundColor:MaterialStateProperty.all(Colors.white)
),
onPressed: () {
print("有颜色按钮");
},
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ElevatedButton(
child: Text('阴影按钮'),
style:ButtonStyle(
backgroundColor:MaterialStateProperty.all(Colors.yellow),
foregroundColor:MaterialStateProperty.all(Colors.red),
elevation:MaterialStateProperty.all(50)
),
onPressed: () {
print("有阴影按钮");
},
),
SizedBox(width: 5),
ElevatedButton.icon(
icon: Icon(Icons.search),
label: Text('图标按钮1'),
// onPressed: null,
onPressed: () {
print("图标按钮");
})
],
),
SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
height: 80,
width: 200,
child: ElevatedButton(
child: Text('宽度高度'),
style:ButtonStyle(
backgroundColor:MaterialStateProperty.all(Colors.red),
foregroundColor: MaterialStateProperty.all(Colors.black)
) ,
onPressed: () {
print("宽度高度");
},
),
)
],
),
SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: Container(
height: 60,
margin: EdgeInsets.all(10),
child: ElevatedButton(
child: Text('自适应按钮1'),
onPressed: () {
print("自适应按钮");
},
),
),
)
],
),
SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ElevatedButton(
child: Text('圆角'),
style: ButtonStyle(
backgroundColor:MaterialStateProperty.all(Colors.blue),
foregroundColor: MaterialStateProperty.all(Colors.white),
elevation: MaterialStateProperty.all(20),
shape: MaterialStateProperty.all(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10))
),
),
onPressed: () {
print("圆角按钮");
}),
Container(
height: 80,
child: ElevatedButton(
child: Text('圆形按钮'),
style: ButtonStyle(
backgroundColor:MaterialStateProperty.all(Colors.blue),
foregroundColor: MaterialStateProperty.all(Colors.white),
elevation: MaterialStateProperty.all(20),
shape: MaterialStateProperty.all(CircleBorder(side: BorderSide(color: Colors.white)),
)),
onPressed: () {
print("圆形按钮");
}),
),
TextButton (
child: Text("按钮"),
onPressed: () {
print('FlatButton');
},
),
SizedBox(width: 10),
OutlinedButton(
child: Text("OutlinedButton"),
onPressed: () {
print('FlatButton');
})
],
),
SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: Container(
margin: EdgeInsets.all(20),
height: 50,
child: OutlinedButton(
child: Text("注册 配置边框"),
style: ButtonStyle(
foregroundColor: MaterialStateProperty.all(Colors.black),
side: MaterialStateProperty.all(BorderSide(width:1,color: Colors.red))
),
onPressed: () {}
),
),
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
ButtonBar(
children: <Widget>[
ElevatedButton(
child: Text('登录'),
onPressed: () {
print("宽度高度");
},
),
ElevatedButton(
child: Text('注册'),
onPressed: () {
print("宽度高度");
},
),
MyButton(text: "自定义按钮",height: 60.0,width: 100.0,pressed: (){
print('自定义按钮');
})
],
)
],
)
],
));
}
}
//自定义按钮组件
class MyButton extends StatelessWidget {
final text;
final pressed;
final width;
final height;
const MyButton({this.text='',this.pressed,this.width=80,this.height=30}) ;
@override
Widget build(BuildContext context) {
return Container(
height: height,
width: width,
child: ElevatedButton(
child: Text(text),
onPressed:pressed ,
),
);
}
}
空安全
2021 年 5 月 19 日 Flutter 官方发布了 Flutter2.2.0 的版本，Flutter2.2.0 中迁移了 Dart 的核心库,以完全使用 null safety。
null safety： https://flutter.cn/docs/null-safety
如果您使用的是 Flutter2.2.0 之后的版本，需要注意 null safety。
创建组件的变化
以前创建的 StatefulWidget 格式如下 ：
class PayPage extends StatefulWidget {
PayPage({Key key}) : super(key: key); _PayPageState createState() => _PayPageState();
}
现在创建 StatefulWidget 的时候需要注意把 Key 配置成可空参数 格式如下：
class PayPage extends StatefulWidget {
PayPage({Key? key}) : super(key: key); _PayPageState createState() => _PayPageState();
}
配置路由的变化
1、需要指定路由的类型 final Map
final Map<String,Function> routes={
'/':(context)=>Tabs(),
'/buttonPage':(context)=>ButtonDemoPage(),
'/buttonExtend':(context)=>ButtonExtendDemoPage(),
'/textField':(context)=>TextFieldDemoPage(),
'/checkBox':(context)=>CheckBoxDemo(),
'/radio':(context)=>RadioDemo(), };
2、配置 onGenerateRoute 的时候注意可空类型
var onGenerateRoute=(RouteSettings settings) {
final String? name = settings.name;
final Function? pageContentBuilder = routes[name];
if (pageContentBuilder != null) {
if (settings.arguments != null) {
final Route route = MaterialPageRoute(
builder: (context) =>
pageContentBuilder(context, arguments: settings.arguments));
return route;
}else{
final Route route = MaterialPageRoute(
builder: (context) =>pageContentBuilder(context));
return route;
}
}
};