我使用此方法显示AlertDialog:
_onSubmit(message) {
if (message.isNotEmpty) {
showDialog(
context: context,
barrierDismissible: false,
builder: (BuildContext context) {
return AlertDialog(
title: Center(child: Text('Alert')),
content: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children : <Widget>[
Expanded(
child: Text(
message,
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.red,
),
),
)
],
),
actions: <Widget>[
FlatButton(
child: Text('Cancel'),
onPressed: () {
Navigator.of(context).pop();
}),
FlatButton(
child: Text('Ok'),
onPressed: () {
_inputTextController.clear();
Navigator.of(context).pop();
})
],
);
},
);
}
}
一切正常,但按钮向右对齐,如下图所示:
我想对按钮的样式进行一些设置,例如一个开始一个按钮,另一个结束按钮。 我在文档中进行搜索,但仅找到如何使它们成为“堆叠的全角按钮”。 关于如何设置按钮样式的任何想法?
答案 0 :(得分:9)
自定义小部件
编辑窗口小部件本身:在AlertDialog
下有一个ButtonBar widget,您可以在其中使用alignment: MainAxisAlignment.spaceBetween
来正确对齐按钮。有关自定义AlertDialog小部件的示例,请参见this answer。
自己的按钮行
您还可以删除actions
下的按钮,并添加一个带有RaisedButtons的自定义Row
,如下所示:
Row (
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
RaisedButton(), // button 1
RaisedButton(), // button 2
]
)
在您的情况下,您可以在content
中的行周围添加一个Column,然后在其中添加您现有的行以及您根据上述示例创建的修改后的行。
答案 1 :(得分:6)
更改主题是个不错的选择。
MaterialApp(
theme: ThemeData(
buttonBarTheme: ButtonBarThemeData(
alignment: MainAxisAlignment.center,
)),
...
答案 2 :(得分:3)
在AlertDialog的操作中不添加按钮。如您所见。
_onSubmit(message) {
if (message.isNotEmpty) {
showDialog(
context: context,
barrierDismissible: false,
builder: (BuildContext context) {
return AlertDialog(
title: Center(child: Text('Alert')),
content: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children : <Widget>[
Expanded(
child: Text(
message,
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.red,
),
),
),
FlatButton(
child: Text('Cancel'),
onPressed: () {
Navigator.of(context).pop();
}),
FlatButton(
child: Text('Ok'),
onPressed: () {
_inputTextController.clear();
Navigator.of(context).pop();
})
],
),
);
},
);
}
}
答案 3 :(得分:3)
将按钮移至内容是一个很好的解决方案。
showDialog(
context: context,
barrierDismissible: false,
builder: (BuildContext context) {
return AlertDialog(
title: Center(child: Text('Alert')),
content: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
child: Text(
"message",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.red,
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
FlatButton(
child: Text('Yes'),
onPressed: () {
Navigator.of(context).pop();
}),
FlatButton(
child: Text('No'),
onPressed: () {
Navigator.of(context).pop();
})
])
],
),
);
});
答案 4 :(得分:3)
我使用此方法在 AlertDialog 的操作中对齐按钮。
AlertDialog样式:
AlertDialog( title: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Text('Tilte'), CloseButton( color: Color(0xFFD5D3D3), onPressed: () { Navigator.of(context).pop(); }) ]), content: SingleChildScrollView(child: Text("Boby")), actions: [ SizedBox( width: MediaQuery.of(context).size.width, child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ ButtonTheme( minWidth: 25.0, height: 25.0, child: OutlineButton( borderSide: BorderSide(color: Colors.blueAccent), child: new Text("Save"), shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(20)), onPressed: () {})), SizedBox(width: 8.0), ButtonTheme( minWidth: 25.0, height: 25.0, child: OutlineButton( borderSide: BorderSide(color: Colors.black26), textColor: Colors.blue, child: new Text("Close"), shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(20)), onPressed: () {})) ])) ]);
答案 5 :(得分:0)
或者您可以使用RFlutter Alert库。它易于定制且易于使用。其默认样式包括圆角,您可以根据需要添加任意数量的按钮。
警报样式:
var alertStyle = AlertStyle(
animationType: AnimationType.fromTop,
isCloseButton: false,
isOverlayTapDismiss: false,
descStyle: TextStyle(fontWeight: FontWeight.bold),
animationDuration: Duration(milliseconds: 400),
alertBorder: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(0.0),
side: BorderSide(
color: Colors.grey,
),
),
titleStyle: TextStyle(
color: Colors.red,
),
);
并将您的AlertStyle对象关联到Alert的样式字段。
Alert(
context: context,
style: alertStyle,
type: AlertType.info,
title: "RFLUTTER ALERT",
desc: "Flutter is more awesome with RFlutter Alert.",
buttons: [
DialogButton(
child: Text(
"COOL",
style: TextStyle(color: Colors.white, fontSize: 20),
),
onPressed: () => Navigator.pop(context),
color: Color.fromRGBO(0, 179, 134, 1.0),
radius: BorderRadius.circular(0.0),
),
],
).show();
*我是RFlutter Alert的开发人员之一。