Flutter中如何根据视口高度约束ListView
Posted
技术标签:
【中文标题】Flutter中如何根据视口高度约束ListView【英文标题】:How to constrain ListView in Flutter based on viewport height 【发布时间】:2020-09-13 05:54:56 【问题描述】:我正在尝试根据视口高度限制 ListView,以便在其中存在更多项目时滚动,但我还没有找到一种方法来成功地做到这一点,而无需在 SizedBox 上提供固定数字。
布局如下:
- SingleChildScrollView
- SizedBox (height equal to MediaQuery.of(context).size.height)
- Column
- Text
- TextField
- SizedBox (because I found no other way)
- ListView
这里要注意的是,我不希望 List 沿着视图的其余部分滚动,而是自己让文本字段始终在视图中。
【问题讨论】:
你现在遇到什么问题 为什么不Column[Text, TextField, Expanded > ListView]
?
键盘打开时没有滚动容器我得到溢出错误。
检查下面的解决方案我有 texfield 当键盘出现时不会在底部出现错误
【参考方案1】:
对于当数据超出设备高度时的整个屏幕滚动,您需要使用SingleChildScrollView
小部件,当数据超出设备高度时滚动。我已经创建了它的示例,其中我使用了MediaQuery
来获得适当大小的小部件。请检查以下解决方案,如果有问题请告诉我。
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
class HomeScreen extends StatefulWidget
@override
State<StatefulWidget> createState()
// TODO: implement createState
return _HomeScreen();
class _HomeScreen extends State<HomeScreen>
@override
Widget build(BuildContext context)
return _buildPage();
Widget _buildPage()
return SafeArea(
top: true,
child: Scaffold(
body: SingleChildScrollView (
child: ConstrainedBox(
constraints: BoxConstraints(maxHeight: MediaQuery.of(context).size.height),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Container(
margin: const EdgeInsets.only(top: 20.0),
height: MediaQuery
.of(context)
.size
.height * 0.2,
child: Align(
alignment: Alignment.center,
child: Text("Ravindra Kushwaha", style: TextStyle(
fontSize: 20.0
),),
),
),
Padding(
padding: EdgeInsets.all(4.0),
child: TextField(
),
),
Expanded(
child: _buildList(),
),
],
),
)
),
),
);
Widget _buildList()
return ListView(
children: <Widget>[
ListTile(
leading: Icon(Icons.ac_unit),
title: Text('First'),
trailing: Icon(Icons.arrow_forward_ios)
),
ListTile(
leading: Icon(Icons.ac_unit),
title: Text('Seond'),
trailing: Icon(Icons.arrow_forward_ios)
),
ListTile(
leading: Icon(Icons.ac_unit),
title: Text('Third'),
trailing: Icon(Icons.arrow_forward_ios)
),
],
);
输出将紧随其后。
【讨论】:
这要好得多,但是为了查看列表的最后一个条目,我还需要滚动整个视图,所以现在更像是双滚动。 你可以去掉singlecollview来避免整个屏幕屏幕而不是listview滚动以上是关于Flutter中如何根据视口高度约束ListView的主要内容,如果未能解决你的问题,请参考以下文章