782 字
4 分钟
Flutter反馈组件
2022-01-06

反馈组件#

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

pub 地址

安装

引入

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 的另一个插件

文档地址

参数#

参数类型必要默认值说明
contextBuildContexttruenull页面环境
toastWidgetfalsenull自定义 toast 视图,会覆盖默认视图
msgStringfalsenull主信息
msgStyleTextStylefalsenull主信息文本样式
subMsgStringfalsenull副信息
subMsgStyleTextStylefalsenull副信息文本样式
subMsgSpacedoublefalse12.0副信息与主信息的间距
cornerdoublefalse6.0边角
colorColorfalseColors.black54颜色
durationdoublefalse1800展示时长
paddingEdgeInsetsfalseEdgeInsets.only(left: 16.0, right: 16.0, top: 16.0, bottom: 16.0)内间距
imageWidgetfalsenull图标
imageDirectionAxisDirectionfalseAxisDirection.up图标相对文本的位置
imageSpacedoublefalse9.0图标与文本的间距
Flutter反馈组件
https://www.tanghailong.com/posts/flutter/dialog/
作者
隆海
发布于
2022-01-06
许可协议
CC BY-NC-SA 4.0