一、Flutter 中的按钮组件介绍
- Flutter 里常见的按钮组件有：
RaisedButton、FlatButton、
IconButton、OutlineButton、ButtonBar、FloatingActionButton 等。 - RaisedButton ：凸起的按钮，
- ElevatedButton：凸起的按钮，
- FlatButton ：扁平化的按钮
- OutlineButton：线框按钮
- IconButton ：图标按钮
- ButtonBar:按钮组
- FloatingActionButton: 浮动按钮
二、Flutter 按钮组件中的一些属性
- onPressed:(){}
onPressed 按下按钮时触发的回调，接收一个
方法，传 null 表示按钮禁用，会显示禁用相关样式
child:
- textColor: 文本颜色
- color: 按钮的颜色
- disabledColor: 按钮禁用时的颜色
- disabledTextColor: 按钮禁用时的文本颜色
- splashColor: 点击按钮时水波纹的颜色
- highlightColor: 点击（长按）按钮后按钮的颜色
- elevation: double 阴影的范围，值越大阴影范围越大
- padding: 内边距
- shape: 设置按钮的形状
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
)
shape: CircleBorder(
side: BorderSide(
color: Colors.white,
)
)
样式图
下面只举几个例子
实际开发中我们遇到的
- 自适应按钮
- 圆角按钮
- 带阴影按钮
- 带icon按钮
// 1.自适应按钮
Row(
children: [
Expanded(
child: Container(
margin: EdgeInsets.all(10),
child: RaisedButton(
onPressed: () {},
child: Text("自适应按钮"),
),
))
],
),
// 2.圆角按钮
Container(
margin: EdgeInsets.only(left: 10),
height: 40,
width: 80,
child: RaisedButton(
color: Colors.blue,
textColor: Colors.white,
onPressed: () {},
child: Text("圆角"),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
),
),
// 3.带阴影
RaisedButton(
onPressed: () {},
child: Text("带阴影"),
elevation: 20,
),
// 4.带图标
RaisedButton.icon(
onPressed: () {},
icon: Icon(Icons.search),
label: Text("带图标"))
// 5.背景颜色
RaisedButton(
onPressed: () {},
color: Colors.blue,
textColor: Colors.white,
child: Text("背景按钮"),
),
// 6.修改 ElevatedButton样式使用 style: ElevatedButton.styleFrom
ElevatedButton(
onPressed: () {},
child: Text("Elevate样式"),
style: ElevatedButton.styleFrom(
primary: Colors.red, // 按钮背景颜色
elevation: 20,
textStyle: TextStyle(color: Colors.blue, fontSize: 15)),
),
如何实现咸鱼凸起按钮
image.png
总的思想是FloatingActionButton去覆盖中间的BottomNavigationBarItem。因为BottomNavigationBarItem不能去掉icon属性，所以只能覆盖。
floatingActionButton: Container(
height: 80,
width: 80,
margin: EdgeInsets.only(top: 20),
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
color: Colors.white,
),
child: FloatingActionButton(
elevation: 10,
onPressed: () {
setState(() {
this._index = 1;
});
},
tooltip: 'Increment',
child: Icon(Icons.add),
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomNavigationBar(
backgroundColor: Colors.white,
currentIndex: this._index,
onTap: (index) {
setState(() {
this._index = index;
});
},
type: BottomNavigationBarType.fixed, // 配置多个底部按钮
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home_filled), title: Text("首页")),
BottomNavigationBarItem(
icon: Icon(Icons.arrow_left), title: Text("")),
BottomNavigationBarItem(icon: Icon(Icons.settings), title: Text("我的"))
],
),
Scaffold(
...
resizeToAvoidBottomInset: false, // 防止FloatingActionButton被顶起
...
)
三、Flutter中的各种Dialog
dialog.gif
AlertDialog
_showAlartDialog() async {
var result = await showDialog(
context: context,
barrierDismissible: false,
builder: (context) {
return AlertDialog(
title: Text("提示"),
content: Text("确定删除"),
actions: [
OutlinedButton(
onPressed: () {
Navigator.pop(context, "cancle");},
child: Text("取消")),
ElevatedButton(
onPressed: () {
Navigator.pop(context, "sure");},
child: Text("确定")),
],
);
});
print("===========$result");
}
SimpleDialog
_simpleDiaglog() async {
var simpleRel = await showDialog(
context: context,
builder: (BuildContext context) {
return SimpleDialog(
title: Text("select 单选按钮框"),
children: <Widget>[
SimpleDialogOption(
child: Text("Option A"),
onPressed: () {
Navigator.pop(context, 'Option A');},
),
],
);
});
}
showModalBottomSheet
_showbottomDialog() async {
var actionSheet = await showModalBottomSheet(
context: context,
builder: (builder) {
return Container(
height: 200,
child: Column(
children: <Widget>[
ListTile(
title: Text("分享 A"),
onTap: () {
Navigator.pop(context, 'A');},
),
],
),
);
});
}
自定义Dialog
// 1. 创建Dialog里面的内容 创建自定义类WindowDialog
import 'dart:async';
import 'package:flutter/material.dart';
class WindowDialog extends StatefulWidget {
const WindowDialog({Key? key}) : super(key: key);
@override
_WindowDialogState createState() => _WindowDialogState();
}
class _WindowDialogState extends State<WindowDialog> {
_showTimeDialog(context) {
Timer.periodic(Duration(milliseconds: 1500), (timer) {
Navigator.pop(context);
timer.cancel();
});
}
@override
Widget build(BuildContext context) {
_showTimeDialog(context);
return Material( // 这里需要注意
type: MaterialType.transparency,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
alignment: Alignment.center,
width: 300,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10),
),
child: AspectRatio(
aspectRatio: 3 / 2,
child: Stack(
children: [
Align(
child: Text("头部"),
alignment: Alignment(0, -1),
),
Align(
child: IconButton(
onPressed: () {
Navigator.pop(context);
},
icon: Icon(
Icons.close_sharp,
color: Colors.black26,
size: 24,
),
),
alignment: Alignment(1, -1),
),
],
),
),
),
],
),
));
}
}
这里自定义的dialog的样式必须是Material否则不会生效。
// 2.引用
showDialog(
context: context,
builder: (context) {
return WindowDialog();
});
dialog 小技巧 设置barrierDismissible: false,为外部点击无效
自定义Material(中的type: MaterialType.transparency设置背景半透明；
Navigator.pop(context, "result"); 后面的result可以通过async aweit 同步获取。
Toast
fluttertoast: ^8.0.8
Fluttertoast.showToast(
msg: "This is Center Short Toast",
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.CENTER,
timeInSecForIosWeb: 1,
backgroundColor: Colors.red,
textColor: Colors.white,
fontSize: 16.0);
四、Swiper
swiper.gif
flutter_swiper: ^1.1.6
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
class Mine extends StatelessWidget {
Mine({Key? key}) : super(key: key);
List imageList = [
"https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
"https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg",
'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
];
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: Column(
children: [
AspectRatio(
aspectRatio: 2 / 1,
child: new Swiper(
itemBuilder: (BuildContext context, int index) {
return new Image.network(
imageList[index],
fit: BoxFit.cover,
);
},
itemCount: imageList.length,
loop: true,
autoplay: true,
onTap: (index) {
print("=-=-=-=-$index=-");
},
duration: 500,
// scrollDirection: Axis.vertical,
pagination: new SwiperPagination(
alignment: Alignment.bottomCenter,
margin: EdgeInsets.only(top: 10),
builder: SwiperPagination.dots),
// pagination: new SwiperCustomPagination(
// builder: (BuildContext context, SwiperPluginConfig config) {
// return config.;
// }
// ),
// control: new SwiperControl(),
),
),
],
)),
);
}
}
