flutter - Flutter:如何使我的对话框可滚动?
问题描述
我只是颤振的新手,现在我的对话框中有问题。问题是我的对话框由于文本而溢出。所以,现在我想让它可滚动,以便仍然可以查看文本。我已经在上面放了一个“SingleChildScrollView”,但仍然不起作用请帮忙。
我的代码:
_viewingRequest(dynamic data) async {
return showDialog(
barrierDismissible: false,
context: _scaffoldKey.currentContext,
builder: (context) {
return SingleChildScrollView(
child: AlertDialog(
contentPadding: EdgeInsets.only(left: 25, right: 25),
title: Center(child: Text("Information")),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(20.0))),
content: Container(
height: 200,
width: 300,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
SizedBox(
height: 20,
),
Text(
'Name of requestor: ${data['Name_ofUser']}'
),
Text(
'Description:',
),
Text(
'${data['Help_Description']}',
),
Text(
'Type of help needed: ${data['Help_TypeNeeded']}',
)
],
),
),
actions: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width * 0.20,
child: RaisedButton(
child: new Text(
'Fund',
style: TextStyle(color: Colors.white),
),
color: Color(0xFF121A21),
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
onPressed: () {
saveIssue();
Navigator.of(context).pop();
},
),
),
SizedBox(
width: MediaQuery.of(context).size.width * 0.01,
),
Padding(
padding: const EdgeInsets.only(right: 70.0),
child: Container(
width: MediaQuery.of(context).size.width * 0.20,
child: RaisedButton(
child: new Text(
'Cancel',
style: TextStyle(color: Colors.white),
),
color: Color(0xFF121A21),
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
onPressed: () {
Navigator.of(context).pop();
},
),
),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.02,
),
],
)
],
),
);
});
}
我的用户界面:
解决方案
将 SingleChildScrollView 的位置更改为 Column 的顶部可以正常工作
return AlertDialog(
contentPadding: EdgeInsets.only(left: 25, right: 25),
title: Center(child: Text("Information")),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(20.0))),
content: Container(
height: 200,
width: 300,
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
SizedBox(
height: 20,
),
Text(
'Name of requestor: }'
),
Text(
'Description:' * 20,
),
Text(
'Help_Description',
),
Text(
'Type of help needed:Help_TypeNeeded',
)
],
),
),
),
完整的测试代码
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
void main() {
runApp(MyStatelessApp());
}
class MyStatelessApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Dialog Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: StatelessWidgetDemo(),
);
}
}
class StatelessWidgetDemo extends StatefulWidget {
@override
_StatelessWidgetDemoState createState() => _StatelessWidgetDemoState();
}
class _StatelessWidgetDemoState extends State<StatelessWidgetDemo> {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
title: Text('Dialog Demo'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
onPressed: () {
_showTestDialog();
},
child: Text('Show Test Dialog'),
),
SizedBox(
height: 20,
),
RaisedButton(
onPressed: () {
_showCupertinoDialog();
},
child: Text('Show Cupertino Dialog'),
),
SizedBox(
height: 20,
),
RaisedButton(
onPressed: () {
_showSimpleDialog();
},
child: Text('Show Simple Dialog'),
)
],
),
)));
}
void _showTestDialog() {
showDialog(
context: context,
barrierDismissible: false,
//context: _scaffoldKey.currentContext,
builder: (context) {
return AlertDialog(
contentPadding: EdgeInsets.only(left: 25, right: 25),
title: Center(child: Text("Information")),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(20.0))),
content: Container(
height: 200,
width: 300,
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
SizedBox(
height: 20,
),
Text(
'Name of requestor: }'
),
Text(
'Description:' * 20,
),
Text(
'Help_Description',
),
Text(
'Type of help needed:Help_TypeNeeded',
)
],
),
),
),
actions: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width * 0.20,
child: RaisedButton(
child: new Text(
'Fund',
style: TextStyle(color: Colors.white),
),
color: Color(0xFF121A21),
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
onPressed: () {
//saveIssue();
Navigator.of(context).pop();
},
),
),
SizedBox(
width: MediaQuery.of(context).size.width * 0.01,
),
Padding(
padding: const EdgeInsets.only(right: 70.0),
child: Container(
width: MediaQuery.of(context).size.width * 0.20,
child: RaisedButton(
child: new Text(
'Cancel',
style: TextStyle(color: Colors.white),
),
color: Color(0xFF121A21),
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
onPressed: () {
Navigator.of(context).pop();
},
),
),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.02,
),
],
)
],
);
});
}
void _showMaterialDialog() {
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text('Material Dialog'),
content: Text('This is the content of the material dialog'),
actions: <Widget>[
FlatButton(
onPressed: () {
_dismissDialog();
},
child: Text('Close')),
FlatButton(
onPressed: () {
print('HelloWorld!');
_dismissDialog();
},
child: Text('HelloWorld!'),
)
],
);
});
}
_dismissDialog() {
Navigator.pop(context);
}
void _showCupertinoDialog() {
showDialog(
context: context,
builder: (context) {
return CupertinoAlertDialog(
title: Text('Cupertino Dialog'),
content: Text('This is the content of the cupertino dialog'),
actions: <Widget>[
FlatButton(
onPressed: () {
_dismissDialog();
},
child: Text('Close')),
FlatButton(
onPressed: () {
print('HelloWorld!');
_dismissDialog();
},
child: Text('HelloWorld!'),
)
],
);
});
}
void _showSimpleDialog() {
showDialog(
context: context,
builder: (context) {
return SimpleDialog(
title: Text('Chosse an Option'),
children: <Widget>[
SimpleDialogOption(
onPressed: () {
_dismissDialog();
},
child: const Text('Option 1'),
),
SimpleDialogOption(
onPressed: () {
_dismissDialog();
},
child: const Text('Option 2'),
),
SimpleDialogOption(
onPressed: () {
_dismissDialog();
},
child: const Text('Option 3'),
),
SimpleDialogOption(
onPressed: () {
_dismissDialog();
},
child: const Text('Option 4'),
),
],
);
});
}
}
推荐阅读
- python-3.x - 当 XGboost 预测引发多个警告“不建议使用 np.ndarray 的子集(切片数据)...”时,Colab 会话崩溃
- python - 如何跨多种语言和默认值指定通用 spark 配置语义?
- php - 即使在我输入“域”类型后,ResellersPanel API 也会给我域错误
- firebase - 覆盖firebase文档中的字段而不是更新它
- wordpress - 每页帖子不适用于wordpress中的粘性帖子查询
- javascript - 根据json数据创建画布框
- android - 由于使用 Paypal 而不是应用内计费,Ionic 5 android 应用被拒绝
- mysql - 如何使用 mysql GROUP_CONCAT 重复组合多行?
- c++ - 如何设置 VSCode C++ 以显示局部变量
- python - Python如何多次但按顺序打印列表?