我想在弹出窗口中创建一个带有flutter的窗体,如下图所示:弹出
。我怎样才能做到这一点与Flutter?
s4n0splo1#
给你showDialog接受WidgetBuilder作为参数,因此您可以返回任何小部件。
import 'package:flutter/material.dart'; void main() { runApp(const MaterialApp(home: MyApp())); } class MyApp extends StatefulWidget { const MyApp({super.key}); @override _MyAppState createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { final _formKey = GlobalKey<FormState>(); @override Widget build(BuildContext context) => Scaffold( appBar: AppBar( title: const Text('Flutter'), ), body: Center( child: ElevatedButton( onPressed: () async { await showDialog<void>( context: context, builder: (context) => AlertDialog( content: Stack( clipBehavior: Clip.none, children: <Widget>[ Positioned( right: -40, top: -40, child: InkResponse( onTap: () { Navigator.of(context).pop(); }, child: const CircleAvatar( backgroundColor: Colors.red, child: Icon(Icons.close), ), ), ), Form( key: _formKey, child: Column( mainAxisSize: MainAxisSize.min, children: <Widget>[ Padding( padding: const EdgeInsets.all(8), child: TextFormField(), ), Padding( padding: const EdgeInsets.all(8), child: TextFormField(), ), Padding( padding: const EdgeInsets.all(8), child: ElevatedButton( child: const Text('Submitß'), onPressed: () { if (_formKey.currentState!.validate()) { _formKey.currentState!.save(); } }, ), ) ], ), ), ], ), )); }, child: const Text('Open Popup'), ), ), ); }
希望能有帮助!
webghufk2#
下面是一个代码示例,它允许您创建一个可以产生这种弹出窗口的按钮。
编码:
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: [ ElevatedButton( child: Text("Submit"), onPressed: () { // your code }) ], ); }); }, ),
输出:
要获得更多选项,您必须操作Form小部件、TextField小部件或RaisedButton小部件的属性,例如自动验证、装饰、颜色等。如果这还不够,您可以使用Dialog小部件代替AlertDialog小部件。但在本例中,您将用child替换content属性。并进行必要的修改。
vshtjzan3#
截图(无第三方包):
**代码:**直接调用此方法即可:
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'), ), ], ); }, ); }
pu82cl6c4#
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(); } }, ), ) ], ), ), ], ), ); });
7ivaypg95#
我尝试了上面的所有答案,但它说没有材料Widget错误。然后我尝试在图标按钮的地方,你可以使用任何部件,但你必须使用脚手架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条答案
按热度按时间s4n0splo1#
给你showDialog接受WidgetBuilder作为参数,因此您可以返回任何小部件。
希望能有帮助!
webghufk2#
下面是一个代码示例,它允许您创建一个可以产生这种弹出窗口的按钮。
编码:
输出:
要获得更多选项,您必须操作Form小部件、TextField小部件或RaisedButton小部件的属性,例如自动验证、装饰、颜色等。如果这还不够,您可以使用Dialog小部件代替AlertDialog小部件。但在本例中,您将用child替换content属性。并进行必要的修改。
vshtjzan3#
截图(无第三方包):
**代码:**直接调用此方法即可:
pu82cl6c4#
7ivaypg95#
我尝试了上面的所有答案,但它说没有材料Widget错误。然后我尝试在图标按钮的地方,你可以使用任何部件,但你必须使用脚手架bg颜色作为一个透明和返回或取消按钮太多