flutter - 如何为 ListView 制作包装内容
问题描述
我需要使用表单输入字段进行对话框,当我使用列内容适合屏幕时,但是当我尝试键入值时,它会隐藏下面的输入字段并提交按钮。为了解决这个问题,我只知道一个替换列的解决方案使用 listview 和作品,它可以让我滚动,但内容不适合屏幕。
如何使列表视图中的内容适合屏幕?
这是我的完整代码
import 'package:devaayanam/Confi.dart';
import 'package:flutter/material.dart';
class BookPujaDialogContent extends StatefulWidget {
BookPujaDialogContent({Key key}) : super(key: key);
@override
_BookPujaDialogContentState createState() => _BookPujaDialogContentState();
}
class _BookPujaDialogContentState extends State<BookPujaDialogContent> {
final _formKey =GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
return Container(
child: Form(
key: _formKey,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
TextFormField(
decoration: InputDecoration(
labelText: Confi.TEMPLENAME
),
validator: (value) {
if (value.isEmpty) {
return 'Please enter '+Confi.TEMPLENAME;
}
return null;
},
),
TextFormField(
decoration: InputDecoration(
labelText: Confi.DEITY
),
validator: (value) {
if (value.isEmpty) {
return 'Please enter '+Confi.DEITY;
}
return null;
},
),
TextFormField(
decoration: InputDecoration(
labelText: Confi.BN
),
validator: (value) {
if (value.isEmpty) {
return 'Please enter '+Confi.BN;
}
return null;
},
),
TextFormField(
decoration: InputDecoration(
labelText: Confi.STAR
),
validator: (value) {
if (value.isEmpty) {
return 'Please enter '+Confi.STAR;
}
return null;
},
),
Container(
margin: EdgeInsets.only(top: 20),
child: RaisedButton(
onPressed: () {
// Validate returns true if the form is valid, or false
// otherwise.
if (_formKey.currentState.validate()) {
// If the form is valid, display a Snackbar.
Scaffold.of(context)
.showSnackBar(SnackBar(content: Text('Processing Data')));
}
},
textColor: Colors.white,
padding: const EdgeInsets.all(0.0),
shape:RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
child: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: <Color>[
Color(0xFF0D47A1),
Color(0xFF1976D2),
Color(0xFF42A5F5),
],
),
borderRadius: BorderRadius.all(Radius.circular(10.0))
),
width: MediaQuery.of(context).size.width,
height: 40,
// padding: const EdgeInsets.fromLTRB(45, 10, 45, 10),
child: Center(
child: Text(
Confi.BOOKNOW,
style: TextStyle(fontSize: 16)
),
),
),
),
)
],
),
),
);
}
}
解决方案
设置shirinkWrap: true
在ListView
.
Dialog(
child: Form(
key: _formKey,
child: ListView(
shrinkWrap: true, //TODO: Use this
children: <Widget>[
TextFormField(
decoration: InputDecoration(labelText: Confi.TEMPLENAME),
validator: (value) {
if (value.isEmpty) {
return 'Please enter ' + Confi.TEMPLENAME;
}
return null;
},
),
....
....
推荐阅读
- android - Android Room 数据库:OnConflictStrategy.ABORT 与 IGNORE 之间的区别
- python - 使用 patch_namespaced_deployment 从部署中删除卷不起作用
- python - Flask-sqlalchemy 按 unix 间隔过滤
- c++ - Win32 小堆栈大小的奇怪行为
- python - 当检查返回 false 时,如何停止 channel.purge 的限制减少?
- c - 定义不透明指针时防止不完整的类型声明?
- mysql - 如何提高大型数据库中 Date 的 SQL 查询速度
- python - 如果语句正确,Python 不会检测到函数循环
- java - 如何使用他的包装类创建一个接受并返回泛型类型的方法
- file-upload - 将文件从 Blazor WebAssembly 应用程序直接上传到 Blob 存储