782 字
4 分钟
Flutter反馈组件
反馈组件
Dialog
AlertDialog
// 1.弹出框 alertDialog() async { var result = await showDialog( barrierDismissible: false, //表示点击灰色背景的时候是否消失弹出框 context: context, builder: (context) { return AlertDialog( title: const Text("提示信息!"), content: const Text("您确定要删除吗?"), actions: <Widget>[ TextButton( child: const Text("取消"), onPressed: () { print("取消"); Navigator.pop(context, 'Cancle'); }, ), TextButton( child: const Text("确定"), onPressed: () { print("确定"); Navigator.pop(context, "Ok"); }, ) ], ); }); print('result${result}'); //resultOk resultCancle } ElevatedButton( onPressed: alertDialog, child: const Text('弹出对话框'), ),
SimpleDialog
SimpleDialogOption
//2.简单选择框 simpleDialog() async { var result = await showDialog( barrierDismissible: true, //表示点击灰色背景的时候是否消失弹出框 context: context, builder: (context) { return SimpleDialog( title: const Text("请选择内容"), children: <Widget>[ SimpleDialogOption( child: const Text("Option A"), onPressed: () { Navigator.pop(context, "A"); }, ), const Divider(), SimpleDialogOption( child: const Text("Option B"), onPressed: () { Navigator.pop(context, "B"); }, ), const Divider(), SimpleDialogOption( child: const Text("Option C"), onPressed: () { Navigator.pop(context, "C"); }, ), ], ); }); print('result${result}'); } ElevatedButton( onPressed: simpleDialog, child: const Text('简单选择框'), ),
showModalBottomSheet
//3.底部选择框 modelBottomSheet() async { var result = await showModalBottomSheet( context: context, builder: (context) { return SizedBox( height: 220, child: Column( children: <Widget>[ ListTile( title: const Text("分享 A"), onTap: () { Navigator.pop(context, "分享 A"); }, ), const Divider(), ListTile( title: const Text("分享 B"), onTap: () { Navigator.pop(context, "分享 B"); }, ), const Divider(), ListTile( title: const Text("分享 C"), onTap: () { Navigator.pop(context, "分享 C"); }, ) ], ), ); }); print(result); }
ElevatedButton( onPressed: modelBottomSheet, child: const Text('底部选择框'), ),
自定义dialog
自定义 Dialog 对象,需要继承 Dialog 类,尽管 Dialog 提供了 child 参数可以用来写视图界面,但是往往会 达不到我们想要的效果,因为默认的 Dialog 背景框是满屏的。如果我们想完全定义界面,就需要重写 build 函数。下面我们通过两个案例给大家演示一下 Dialog 的使用。
myDialog.dart
import 'dart:async'; import 'package:flutter/material.dart'; // ignore: must_be_immutable class MyDialog extends Dialog { String title; String content; Function()? onClosed; MyDialog( {Key? key, required this.title, required this.onClosed, this.content = ""}) : super(key: key); @override Widget build(BuildContext context) { return Material( type: MaterialType.transparency, child: Center( child: Container( height: 300, width: 300, color: Colors.white, child: Column( children: <Widget>[ Padding( padding: const EdgeInsets.all(10), child: Stack( children: <Widget>[ Align( alignment: Alignment.center, child: Text(title), ), Align( alignment: Alignment.centerRight, child: InkWell( onTap: onClosed, child: const Icon(Icons.close), ), ) ], ), ), const Divider(), Container( padding: const EdgeInsets.all(10), width: double.infinity, child: Text(content, textAlign: TextAlign.left), ), ], ), )), ); } }
import '../../components/myDialog.dart'; //4.自定义dialog myDialog() async { await showDialog( barrierDismissible: true, //表示点击灰色背景的时候是否消失弹出框 context: context, builder: (context) { return MyDialog( title: '标题', onClosed: () { print("关闭"); Navigator.of(context).pop(); }, content: "我是一个内容"); }); } ElevatedButton( onPressed: myDialog, child: const Text('自定义dialog'), ),
FlutterToast
支持 ANDROID IOS WEB
安装
引入
import 'package:fluttertoast/fluttertoast.dart';
使用
//5. fluttertoast使用 flutterToast() { 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); } ElevatedButton( onPressed: flutterToast, child: const Text('fluttertoast使用'), ),
ftoast 的使用
支持支持 ANDROID IOS LINUX MACOS WEB WINDOWS 的另一个插件
参数
参数 | 类型 | 必要 | 默认值 | 说明 |
---|---|---|---|---|
context | BuildContext | true | null | 页面环境 |
toast | Widget | false | null | 自定义 toast 视图,会覆盖默认视图 |
msg | String | false | null | 主信息 |
msgStyle | TextStyle | false | null | 主信息文本样式 |
subMsg | String | false | null | 副信息 |
subMsgStyle | TextStyle | false | null | 副信息文本样式 |
subMsgSpace | double | false | 12.0 | 副信息与主信息的间距 |
corner | double | false | 6.0 | 边角 |
color | Color | false | Colors.black54 | 颜色 |
duration | double | false | 1800 | 展示时长 |
padding | EdgeInsets | false | EdgeInsets.only(left: 16.0, right: 16.0, top: 16.0, bottom: 16.0) | 内间距 |
image | Widget | false | null | 图标 |
imageDirection | AxisDirection | false | AxisDirection.up | 图标相对文本的位置 |
imageSpace | double | false | 9.0 | 图标与文本的间距 |