本文主要介绍使用 RfFlutter 来显示如下对话框。
网络异常，图片无法展示
|
我们从左到右。首先要做的是添加包
rflutter_alert: ^1.0.2 复制代码
基本警报
RfFlutter 具有看起来不错的基本警报，并且可以轻松使用。我们将设置一个带有 HomeView 无状态小部件的基本应用程序。我将使用功能性小部件，这样我就不会编写太多代码。您可以通过定义整个类来使用普通的无状态小部件。我们将让我们的应用程序带有一个简单的 HomeView 小部件。我们将在整个教程中使用的中心有一个按钮。
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp(home: HomeView('Home view Title')); } } @widget Widget homeView(BuildContext context, String title) => Scaffold( body: Center( child: MaterialButton( color: Colors.yellow, child: Text('Show Alert'), onPressed: () { // Show a basic widget Alert(context: context, title: "FilledStacks", desc: "Flutter is awesome.") .show(); }, ))); 复制代码
onPressed 函数调用中的代码是我们显示基本小部件所需的全部代码。
自定义小部件样式
基本小部件可以设置样式并具有以下属性。
final AnimationType animationType; final Duration animationDuration; final ShapeBorder alertBorder; final bool isCloseButton; final bool isOverlayTapDismiss; final Color overlayColor; final TextStyle titleStyle; final TextStyle descStyle; final EdgeInsets buttonAreaPadding; 复制代码
基于此，您可以发出非常圆润的警报，当您在警报之外点击时不会解除警报。并有一个蓝色覆盖物来指示信息通知。
var alertStyle = AlertStyle( overlayColor: Colors.blue[400], animationType: AnimationType.fromTop, isCloseButton: false, isOverlayTapDismiss: false, descStyle: TextStyle(fontWeight: FontWeight.bold), animationDuration: Duration(milliseconds: 400), alertBorder: RoundedRectangleBorder( borderRadius: BorderRadius.circular(50.0), side: BorderSide( color: Colors.grey, ), ), titleStyle: TextStyle( color: Color.fromRGBO(91, 55, 185, 1.0), ), ); Alert( context: context, style: alertStyle, type: AlertType.info, title: "FilledStacks", desc: "FilledStacks.com has the best Flutter tutorials", buttons: [ DialogButton( child: Text( "COOL", style: TextStyle(color: Colors.white, fontSize: 20), ), onPressed: () => Navigator.pop(context), color: Color.fromRGBO(91, 55, 185, 1.0), radius: BorderRadius.circular(10.0), ), ], ).show(); 复制代码
自定义内容
您不仅可以更改样式，还可以添加自己的内容。让我们添加一个警报弹出窗口，当您希望用户再次登录时会显示该弹出窗口。
Alert( context: context, title: "LOGIN", content: Column( children: <Widget>[ TextField( decoration: InputDecoration( icon: Icon(Icons.account_circle), labelText: 'Username', ), ), TextField( obscureText: true, decoration: InputDecoration( icon: Icon(Icons.lock), labelText: 'Password', ), ), ], ), buttons: [ DialogButton( onPressed: () => Navigator.pop(context), child: Text( "LOGIN", style: TextStyle(color: Colors.white, fontSize: 20), ), ) ]).show(); 复制代码
某组织
如果您打算在多个地方使用警报并且想要不同的样式，我建议您创建一个对话框帮助文件，您可以在其中存储所有样式和预定义的小部件。
// dialog_helper.dart showLoginDialog( BuildContext context, { TextEditingController usernameController, TextEditingController loginController, Function onLoginPressed }) { Alert( context: context, title: "LOGIN", content: Column( children: <Widget>[ TextField( decoration: InputDecoration( icon: Icon(Icons.account_circle), labelText: 'Username', ), ), TextField( obscureText: true, decoration: InputDecoration( icon: Icon(Icons.lock), labelText: 'Password', ), ), ], ), buttons: [ DialogButton( onPressed: onLoginPressed, child: Text( "LOGIN", style: TextStyle(color: Colors.white, fontSize: 20), ), ) ]).show(); } 复制代码
现在在你的代码中你所要做的就是
@widget Widget homeView(BuildContext context, String title) => Scaffold( body: Center( child: MaterialButton( color: Colors.yellow, child: Text('Show Alert'), onPressed: () { showLoginWidget(context, onLoginPressed: (){ /* Do stuff */ }); // <-- Much better readability }, ))); 复制代码
当您有许多警报样式时，将它们作为 const 存储在帮助文件中并重用它们。就是这样。谢谢阅读
