一、Flutter 中的按鈕組件介紹
- Flutter 里常見的按鈕組件有：
RaisedButton谍失、FlatButton谨究、
IconButton、OutlineButton、ButtonBar雕薪、FloatingActionButton 等昧诱。 - RaisedButton ：凸起的按鈕，
- ElevatedButton：凸起的按鈕所袁，
- FlatButton ：扁平化的按鈕
- OutlineButton：線框按鈕
- IconButton ：圖標按鈕
- ButtonBar:按鈕組
- FloatingActionButton: 浮動按鈕
二盏档、Flutter 按鈕組件中的一些屬性
- onPressed:(){}
onPressed 按下按鈕時觸發(fā)的回調(diào)，接收一個
方法燥爷，傳 null 表示按鈕禁用蜈亩，會顯示禁用相關(guān)樣式
child:
- textColor: 文本顏色
- color: 按鈕的顏色
- disabledColor: 按鈕禁用時的顏色
- disabledTextColor: 按鈕禁用時的文本顏色
- splashColor: 點擊按鈕時水波紋的顏色
- highlightColor: 點擊（長按）按鈕后按鈕的顏色
- elevation: double 陰影的范圍，值越大陰影范圍越大
- padding: 內(nèi)邊距
- shape: 設(shè)置按鈕的形狀
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
)
shape: CircleBorder(
side: BorderSide(
color: Colors.white,
)
)
樣式圖
下面只舉幾個例子
實際開發(fā)中我們遇到的
- 自適應(yīng)按鈕
- 圓角按鈕
- 帶陰影按鈕
- 帶icon按鈕
// 1.自適應(yīng)按鈕
Row(
children: [
Expanded(
child: Container(
margin: EdgeInsets.all(10),
child: RaisedButton(
onPressed: () {},
child: Text("自適應(yīng)按鈕"),
),
))
],
),
// 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)),
),
如何實現(xiàn)咸魚凸起按鈕
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. 創(chuàng)建Dialog里面的內(nèi)容 創(chuàng)建自定義類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 小技巧 設(shè)置barrierDismissible: false,為外部點擊無效
自定義Material(中的type: MaterialType.transparency設(shè)置背景半透明；
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(),
),
),
],
)),
);
}
}
