android - 带有 ListView 和底部 TextField 的 Flutter AlertDialog
问题描述
我正在开发一个 Flutter 项目,我试图实现一个 AlertDialog 类似于MaterialDesign Guidelines 上指定的选项对话框,但底部有一个 TextInput。
我已经设法得到了与我想要的类似的东西,但我有一个我无法解决的问题:当用户点击 TextInput 并出现键盘时,我希望 TextInput 位于键盘顶部,列表视图越来越在 y 轴上更小(这就是为什么我只是在 ConstrainedBox 上设置 maxHeight),以便用户可以看到他的文本,但我得到的正好相反,列表视图保持相同的大小并且 InputText 不可见.
我尝试使用嵌套在 SingleChildScrollView 上的列更改列表视图,或者将整个原始列包装在 SingleChildScrollView 上,但它们似乎都不起作用。这是我当前的代码:
@override
Widget build(BuildContext context) {
return AlertDialog(
title: Text(widget.title),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(20))
),
actions: <Widget>[
FlatButton(
child: const Text('CANCEL'),
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
textColor: Theme.of(context).accentColor,
onPressed: () {
widget.onCancel();
},
),
FlatButton(
child: const Text('OK'),
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
textColor: Theme.of(context).accentColor,
onPressed: () {
widget.onOk();
},
),
],
content: Container(
width: double.maxFinite,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Divider(),
ConstrainedBox(
constraints: BoxConstraints(
maxHeight: MediaQuery.of(context).size.height*0.4,
),
child: ListView.builder(
shrinkWrap: true,
itemCount: widget.exercises.length,
itemBuilder: (BuildContext context, int index){
return RadioListTile(
title: Text(widget.exercises[index].name),
value: index,
groupValue: _selected,
onChanged: (value){
setState(() {
_selected = index;
});
}
);
}
),
),
Divider(),
TextField(
autofocus: false,
maxLines: 1,
style: TextStyle(fontSize: 18),
decoration: new InputDecoration(
border: InputBorder.none,
hintText: widget.hintText,
),
),
],
),
),
);
}
有人可以给我一些帮助吗?
非常感谢!!
解决方案
您可以在下面复制粘贴运行完整代码
您可以content
使用SingleChildScrollView
代码片段
content: SingleChildScrollView(
child: Container(
width: double.maxFinite,
工作演示
完整代码
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class Exercise {
String name;
Exercise({this.name});
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
List<Exercise> exercises = [
Exercise(name: 'A'),
Exercise(name: 'B'),
Exercise(name: 'C'),
Exercise(name: 'D'),
Exercise(name: 'E'),
Exercise(name: 'F'),
Exercise(name: 'G')
];
int _selected;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return AlertDialog(
title: Text(widget.title),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(20))),
actions: <Widget>[
FlatButton(
child: const Text('CANCEL'),
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
textColor: Theme.of(context).accentColor,
onPressed: () {
//widget.onCancel();
},
),
FlatButton(
child: const Text('OK'),
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
textColor: Theme.of(context).accentColor,
onPressed: () {
//widget.onOk();
},
),
],
content: SingleChildScrollView(
child: Container(
width: double.maxFinite,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Divider(),
ConstrainedBox(
constraints: BoxConstraints(
maxHeight: MediaQuery.of(context).size.height * 0.4,
),
child: ListView.builder(
shrinkWrap: true,
itemCount: exercises.length,
itemBuilder: (BuildContext context, int index) {
return RadioListTile(
title: Text(exercises[index].name),
value: index,
groupValue: _selected,
onChanged: (value) {
setState(() {
_selected = index;
});
});
}),
),
Divider(),
TextField(
autofocus: false,
maxLines: 1,
style: TextStyle(fontSize: 18),
decoration: new InputDecoration(
border: InputBorder.none,
hintText: "hint",
),
),
],
),
),
),
);
}
}
推荐阅读
- java - 在spring data jpa的同一个事务中修改不可见,为什么在同一个事务中修改后我得到null?
- python - 使用装饰器保存 matplotlib 图形;保存的输出为空白
- php - Laravel 5.5 测试删除 api 路由的 ModelNotFoundException 异常
- r - 将字符数据构造成数据框
- python - 填充 DataFrame Pandas Python
- amazon-web-services - 动态端口映射使我的任务不可用
- java - 如何编写一个junit来验证方法抛出的异常是否被捕获?
- r - 如何在 R 中自动化这部分 grid.arrange 函数
- python - Python:按值查找类的实例
- java - HackerRank 最接近的数字