flutter使用 RfFlutter 来显示对话框
小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
本文主要介绍使用 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 存储在帮助文件中并重用它们。就是这样。谢谢阅读。