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的主要内容,如果未能解决你的问题,请参考以下文章

根据宽度和高度保持纵横比

根据视口高度动态设置 DIV 高度

Flutter的布局

根据宽度和高度保持纵横比

解决盒约束widget和assets里的加载资产技术在Flutter框架运用的方案Flutter高级技术

vh——实现根据视口的高度,自适应某一部分的高度