颤振 - 如何在弹出窗口中创建表单
Posted
技术标签:
【中文标题】颤振 - 如何在弹出窗口中创建表单【英文标题】：flutter - how to create forms in popup 【发布时间】：2019-06-26 02:21:17 【问题描述】：我想在弹出窗口中创建一个表单，如下图所示： 弹出窗口
.
我怎样才能用颤振做到这一点？
【问题讨论】：
使用showDialog()或showGeneralDialog()
showDialog(context: context, builder: (BuildContext context) return Container(height: 10.0, width: 10.0, color: Colors.white,);) 我这样做了，但白页是显示。我希望弹出窗口是我页面的一部分，而不是全部
您需要使用Wrap 或Column 和mainAxisSize: MainAxisSize.min
【参考方案1】：
给你！ showDialog 将 WidgetBuilder 作为参数，因此您可以返回任何小部件。
import 'package:flutter/material.dart';
void main()
runApp(new MaterialApp(home: new MyApp()));
class MyApp extends StatefulWidget
@override
_MyAppState createState() => _MyAppState();
class _MyAppState extends State<MyApp>
final _formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context)
return Scaffold(
appBar: AppBar(
title: Text("Flutter"),
),
body: Center(
child: RaisedButton(
onPressed: ()
showDialog(
context: context,
builder: (BuildContext context)
return AlertDialog(
content: Stack(
overflow: Overflow.visible,
children: <Widget>[
Positioned(
right: -40.0,
top: -40.0,
child: InkResponse(
onTap: ()
Navigator.of(context).pop();
,
child: CircleAvatar(
child: Icon(Icons.close),
backgroundColor: Colors.red,
),
),
),
Form(
key: _formKey,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Padding(
padding: EdgeInsets.all(8.0),
child: TextFormField(),
),
Padding(
padding: EdgeInsets.all(8.0),
child: TextFormField(),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: RaisedButton(
child: Text("Submitß"),
onPressed: ()
if (_formKey.currentState.validate())
_formKey.currentState.save();
,
),
)
],
),
),
],
),
);
);
,
child: Text("Open Popup"),
),
),
);
希望有帮助！
【讨论】：
@Amit 来自文档：树中当前具有此全局键的小部件的状态。如果 (1) 树中没有与此全局键匹配的小部件，(2) 该小部件不是 StatefulWidget，或者关联的 State 对象不是 T 的子类型，则当前状态为空。 @AjayKumar 你能添加关闭按钮吗？？ 如果我们使用的是 showDialog。仍然需要 AlertDialog？ @NullByte08 来自theshowDialog docs：“此函数采用通常构建对话框小部件的构建器”。换句话说，showDialog 用于显示对话框小部件，如AlertDialog。【参考方案2】：
使用 rflutter_alert 插件 rflutter_alert
您必须将该库作为依赖项添加到您的项目中。
dependencies:
rflutter_alert: ^1.0.3
要打开一个弹出窗口，让我们成为一个函数并执行以下操作：
_openPopup(context)
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();
这样称呼它
onPressed: ()
_openPopup(context),
【讨论】：
为什么要选择这个库而不是使用 showDialog() 函数？谢谢 用于状态管理或轻松定制【参考方案3】：这是一个代码示例，可让您创建一个可以产生这种弹出窗口的按钮。
代码：
RaisedButton(
child: Text("Open Popup"),
onPressed: ()
showDialog(
context: context,
builder: (BuildContext context)
return AlertDialog(
scrollable: true,
title: Text('Login'),
content: Padding(
padding: const EdgeInsets.all(8.0),
child: Form(
child: Column(
children: <Widget>[
TextFormField(
decoration: InputDecoration(
labelText: 'Name',
icon: Icon(Icons.account_box),
),
),
TextFormField(
decoration: InputDecoration(
labelText: 'Email',
icon: Icon(Icons.email),
),
),
TextFormField(
decoration: InputDecoration(
labelText: 'Message',
icon: Icon(Icons.message ),
),
),
],
),
),
),
actions: [
RaisedButton(
child: Text("Submit"),
onPressed: ()
// your code
)
],
);
);
,
),
输出：
要获得更多选项，您必须操作 表单小部件、TextField 小部件或 RaisedButton 小部件，例如 自动验证、装饰、颜色等……如果这还不够，你 可以使用Dialog 小部件代替AlertDialog 小部件。但在 在这种情况下，您将用 child 替换 content 属性。和做 必要的修改。
【讨论】：
【参考方案4】：我尝试了上面的所有答案，但它说没有实质性的小部件错误。然后我试试这个 在图标按钮的位置，您可以使用任何小部件，但您也必须使用脚手架 bg 颜色作为透明和返回或取消按钮
onTap: ()
showDialog(
context: context,
builder: (BuildContext context)
return Scaffold(
backgroundColor: Colors.transparent,
body: IconButton(
icon: Icon(Icons.ac_unit),
onPressed: ()
Navigator.pop(context);
,
),
);
,
);
,
【讨论】：
【参考方案5】：屏幕截图（不含任何第三方包）：
代码：只要调用这个方法：
void showDialogWithFields()
showDialog(
context: context,
builder: (_)
var emailController = TextEditingController();
var messageController = TextEditingController();
return AlertDialog(
title: Text('Contact Us'),
content: ListView(
shrinkWrap: true,
children: [
TextFormField(
controller: emailController,
decoration: InputDecoration(hintText: 'Email'),
),
TextFormField(
controller: messageController,
decoration: InputDecoration(hintText: 'Message'),
),
],
),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: Text('Cancel'),
),
TextButton(
onPressed: ()
// Send them to your email maybe?
var email = emailController.text;
var message = messageController.text;
Navigator.pop(context);
,
child: Text('Send'),
),
],
);
,
);
【讨论】：
如果有人遇到“hasSize”错误：将 ListView 替换为->content: SingleChildScrollView(child: Column(....))【参考方案6】：
showDialog(
context: context,
builder: (BuildContext context)
return AlertDialog(
contentPadding: EdgeInsets.zero,
content: Stack(
overflow: Overflow.visible,
children: <Widget>[
Positioned(
right: -15.0,
top: -15.0,
child: InkResponse(
onTap: ()
Navigator.of(context).pop();
,
child: CircleAvatar(
radius: 12,
child: Icon(Icons.close, size: 18,),
backgroundColor: Colors.red,
),
),
),
Form(
key: _formKey,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
height: 60,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color:Colors.yellow.withOpacity(0.2),
border: Border(
bottom: BorderSide(color: Colors.grey.withOpacity(0.3))
)
),
child: Center(child: Text("Contact Me", style:TextStyle(color: Colors.black54, fontWeight: FontWeight.w700, fontSize: 20, fontStyle: FontStyle.italic, fontFamily: "Helvetica"))),
),
Padding(
padding: EdgeInsets.all(20.0),
child: Container(
height: 50,
decoration: BoxDecoration(
border: Border.all(color: Colors.grey.withOpacity(0.2) )
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
flex:1,
child: Container(
width: 30,
child: Center(child: Icon(Icons.person, size: 35,color:Colors.grey.withOpacity(0.4))),
decoration: BoxDecoration(
border: Border(
right: BorderSide(color: Colors.grey.withOpacity(0.2))
)
),
),
),
Expanded(
flex: 4,
child: TextFormField(
decoration: InputDecoration(
hintText: "Name",
contentPadding: EdgeInsets.only(left:20),
border: InputBorder.none,
focusedBorder: InputBorder.none,
errorBorder: InputBorder.none,
hintStyle: TextStyle(color:Colors.black26, fontSize: 18, fontWeight: FontWeight.w500 )
),
),
)
],
)
),
),
Padding(
padding: const EdgeInsets.all(20.0),
child: RaisedButton(
padding: EdgeInsets.zero,
child: Container(
width:MediaQuery.of(context).size.width,
height: 60,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color(0xffc9880b),
Color(0xfff77f00),
]
)
),
child: Center(child: Text("Submit", style: TextStyle(color:Colors.white70, fontSize: 20, fontWeight: FontWeight.w800),)),
),
onPressed: ()
if (_formKey.currentState.validate())
_formKey.currentState.save();
,
),
)
],
),
),
],
),
);
);
【讨论】：
以上是关于颤振 - 如何在弹出窗口中创建表单的主要内容，如果未能解决你的问题，请参考以下文章
如何让所有 django allauth 表单和对话框显示在弹出窗口中
如何在 Python 函数中创建简单的 PyQt 弹出窗口并在其末尾关闭？