我想在弹出窗口中创建一个表单，如下图所示： 弹出窗口
.
我怎样才能用颤振做到这一点？
【问题讨论】：
showDialog()或showGeneralDialog()
Wrap 或Column 和mainAxisSize: MainAxisSize.min
标签： flutter dart popup flutter-layout flutter-form-builder
给你！ 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"),
),
),
);
}
}
希望有帮助！
【讨论】：
showDialog docs：“此函数采用通常构建对话框小部件的构建器”。换句话说，showDialog 用于显示对话框小部件，如AlertDialog。
使用 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),
}
【讨论】：
这是一个代码示例，可让您创建一个可以产生这种弹出窗口的按钮。
代码：
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 属性。和做 必要的修改。
【讨论】：
我尝试了上面的所有答案，但它说没有实质性的小部件错误。然后我试试这个 在图标按钮的位置，您可以使用任何小部件，但您也必须使用脚手架 bg 颜色作为透明和返回或取消按钮
onTap: () {
showDialog(
context: context,
builder: (BuildContext context) {
return Scaffold(
backgroundColor: Colors.transparent,
body: IconButton(
icon: Icon(Icons.ac_unit),
onPressed: () {
Navigator.pop(context);
},
),
);
},
);
},
【讨论】：
屏幕截图（不含任何第三方包）：
代码：只要调用这个方法：
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'),
),
],
);
},
);
}
【讨论】：
content: SingleChildScrollView(child: Column(....))
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();
}
},
),
)
],
),
),
],
),
);
});
【讨论】：