我试图在Flutter中创建一个带有圆角的警报对话框,如下图所示。在这里也添加我的代码,但是我的输出与预期的完全不同。任何人,请帮助我。
我的代码在这里。
void _showAlert() { AlertDialog dialog = new AlertDialog( content: new Container( width: 260.0, height: 230.0, decoration: new BoxDecoration( shape: BoxShape.rectangle, color: const Color(0xFFFFFF), borderRadius: new BorderRadius.all(new Radius.circular(32.0)), ), child: new Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: <Widget>[ // dialog top new Expanded( child: new Row( children: <Widget>[ new Container( // padding: new EdgeInsets.all(10.0), decoration: new BoxDecoration( color: Colors.white, ), child: new Text( 'Rate', style: TextStyle( color: Colors.black, fontSize: 18.0, fontFamily: 'helvetica_neue_light', ), textAlign: TextAlign.center, ), ), ], ), ), // dialog centre new Expanded( child: new Container( child: new TextField( decoration: new InputDecoration( border: InputBorder.none, filled: false, contentPadding: new EdgeInsets.only( left: 10.0, top: 10.0, bottom: 10.0, right: 10.0), hintText: ' add review', hintStyle: new TextStyle( color: Colors.grey.shade500, fontSize: 12.0, fontFamily: 'helvetica_neue_light', ), ), )), flex: 2, ), // dialog bottom new Expanded( child: new Container( padding: new EdgeInsets.all(16.0), decoration: new BoxDecoration( color: const Color(0xFF33b17c), ), child: new Text( 'Rate product', style: TextStyle( color: Colors.white, fontSize: 18.0, fontFamily: 'helvetica_neue_light', ), textAlign: TextAlign.center, ), ), ), ], ), ), ); showDialog(context: context, child: dialog); } }
设置BoxDecoration的容器位于警报对话框下的小部件树中。这意味着您仅在对话框的填充内设置了一个框。您需要创建一个自定义AlertDialog / showDialog并在其中设置半径。在自定义窗口小部件中,您还可以添加按钮以及除该填充外您需要工作的所有内容。
当在项目(gist.github.com)中包含customShowDialog.dart文件时,您可以在此处编辑半径borderRadius: BorderRadius.all(Radius.circular(20.0))并按如下方式调用它:
borderRadius: BorderRadius.all(Radius.circular(20.0))
return new CustomAlertDialog( content: new Container( width: 260.0, height: 230.0, decoration: new BoxDecoration( shape: BoxShape.rectangle, color: const Color(0xFFFFFF), borderRadius: new BorderRadius.all(new Radius.circular(32.0)), ), child: new Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: <Widget>[ // dialog top new Expanded( child: new Row( children: <Widget>[ new Container( // padding: new EdgeInsets.all(10.0), decoration: new BoxDecoration( color: Colors.white, ), child: new Text( 'Rate', style: TextStyle( color: Colors.black, fontSize: 18.0, fontFamily: 'helvetica_neue_light', ), textAlign: TextAlign.center, ), ), ], ), ), // dialog centre new Expanded( child: new Container( child: new TextField( decoration: new InputDecoration( border: InputBorder.none, filled: false, contentPadding: new EdgeInsets.only( left: 10.0, top: 10.0, bottom: 10.0, right: 10.0), hintText: ' add review', hintStyle: new TextStyle( color: Colors.grey.shade500, fontSize: 12.0, fontFamily: 'helvetica_neue_light', ), ), )), flex: 2, ), // dialog bottom new Expanded( child: new Container( padding: new EdgeInsets.all(16.0), decoration: new BoxDecoration( color: const Color(0xFF33b17c), ), child: new Text( 'Rate product', style: TextStyle( color: Colors.white, fontSize: 18.0, fontFamily: 'helvetica_neue_light', ), textAlign: TextAlign.center, ), ), ), ], ), ), ); });
您将获得如下内容:
编辑:
尽管Flutter最近引入了shape属性,它可以通过设置ShapeBorder来帮助您处理圆角,例如
shape: RoundedRectangleBorder( borderRadius: BorderRadius.all(Radius.circular(20.0)) ),
您仍然需要快速为某些自定义添加自定义窗口小部件,例如自定义填充,如上所述。