flutter - 显示后颤振改变对话框高度
问题描述
在显示对话框后颤振中,我想改变它的高度,例如使全屏对话框高度,我实现的代码不能正常工作,再次显示后我有全屏。如何实时更改对话框的高度?
void main() => runApp(MaterialApp(home: DialogCustomHeight(),));
class DialogCustomHeight extends StatefulWidget {
@override
State<StatefulWidget> createState() => DialogCustomHeightState();
}
class DialogCustomHeightState extends State<DialogCustomHeight> {
bool fullScreenDialog = false;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: RaisedButton(
color: Colors.white,
child: Text(
'show dialog'
),
onPressed: () => _showDialog(),
),
),
);
}
_showDialog() {
bool _fromTop = true;
return showGeneralDialog(
barrierLabel: "Label",
barrierDismissible: true,
barrierColor: Colors.black.withOpacity(0.5),
transitionDuration: Duration(milliseconds: 200),
context: context,
pageBuilder: (context, anim1, anim2) {
return Align(
alignment: _fromTop ? Alignment.topCenter : Alignment.bottomCenter,
child: Container(
height: fullScreenDialog ? MediaQuery.of(context).size.height : MediaQuery.of(context).size.height * 0.500,
child: SizedBox.expand(
child: ClipRRect(
borderRadius: BorderRadius.only(
bottomRight: Radius.circular(10.0),
bottomLeft: Radius.circular(10.0),
),
child: Container(
color:Colors.green,
child: Center(
child: RaisedButton(
color: Colors.white,
child: Text(
'change height'
),
onPressed: () {
setState(() {
fullScreenDialog = !fullScreenDialog;
});
},
),
),
))),
),
);
},
transitionBuilder: (context, anim1, anim2, child) {
return FadeTransition(
opacity: new CurvedAnimation(parent: anim1, curve: Curves.easeOut),
child: SlideTransition(
position: Tween(begin: Offset(0, _fromTop ? -0.1 : 0.1), end: Offset(0, 0)).animate(anim1),
child: child,
),
);
},
);
}
}
解决方案
输出(从顶部):
输出(从底部)
void main() => runApp(MaterialApp(home: DialogCustomHeight()));
class DialogCustomHeight extends StatefulWidget {
@override
State<StatefulWidget> createState() => DialogCustomHeightState();
}
class DialogCustomHeightState extends State<DialogCustomHeight> {
bool fullScreenDialog = false;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: RaisedButton(
color: Colors.white,
child: Text('show dialog'),
onPressed: () => _showDialog(),
),
),
);
}
_showDialog() {
bool _fromTop = false;
return showGeneralDialog(
barrierLabel: "Label",
barrierDismissible: true,
barrierColor: Colors.black.withOpacity(0.5),
transitionDuration: Duration(milliseconds: 200),
context: context,
pageBuilder: (context, anim1, anim2) {
return MyDialog(fromTop: _fromTop, fullScreen: fullScreenDialog);
},
transitionBuilder: (context, anim1, anim2, child) {
return FadeTransition(
opacity: new CurvedAnimation(parent: anim1, curve: Curves.easeOut),
child: SlideTransition(
position: Tween(begin: Offset(0, _fromTop ? -0.1 : 0.1), end: Offset(0, 0)).animate(anim1),
child: child,
),
);
},
);
}
}
class MyDialog extends StatefulWidget {
final bool fromTop;
final bool fullScreen;
const MyDialog({Key key, this.fromTop, this.fullScreen}) : super(key: key);
@override
_MyDialogState createState() => _MyDialogState();
}
class _MyDialogState extends State<MyDialog> {
bool _fromTop, _fullScreen;
@override
void initState() {
super.initState();
_fromTop = widget.fromTop;
_fullScreen = widget.fullScreen;
}
@override
Widget build(BuildContext context) {
return Align(
alignment: _fromTop ? Alignment.topCenter : Alignment.bottomCenter,
child: Container(
height: _fullScreen ? MediaQuery.of(context).size.height : MediaQuery.of(context).size.height * 0.500,
child: SizedBox.expand(
child: ClipRRect(
borderRadius: BorderRadius.only(
bottomRight: Radius.circular(10.0),
bottomLeft: Radius.circular(10.0),
),
child: Container(
color: Colors.green,
child: Center(
child: RaisedButton(
color: Colors.white,
child: Text('change height'),
onPressed: () {
setState(() {
_fullScreen = !_fullScreen;
});
},
),
),
),
),
),
),
);
}
}
推荐阅读
- wix - 如何设置 WiX 默认安装位置
- angular - 视图不以角度显示
- python - 在 Windows 中禁用调整 python 控制台应用程序的大小
- c# - C# 将每个 wlan 配置文件存储在 ObservableCollection 中
- java - 从服务模拟 YouTube 等应用的暂停/播放
- highcharts - Highcharts - 如何以样式模式包装 y 轴标题
- c# - 枚举客户端可用的 SignalR Server 集线器方法
- docker - Docker compose apt 命令不运行
- asp.net-core-3.1 - 发布到 IIS ASP.NET Core 3.1
- tinymce - Tinymce 编辑器在编辑模式下剥离脚本标签