【问题标题】:Flutter Vertical viewport was given unbounded height颤振垂直视口被赋予了无限的高度
【发布时间】:2019-07-30 10:20:10
【问题描述】:

我需要基于日期选择构建一个动态列表视图,然后我将调用一个 api 来获取数据并相应地填充列表。然后在列表视图本身的最后我有一个向下按钮,我按下它应该打开一个扩展面板。所以要创建一个列表,我调用一个函数 Widget buildDynamicList(BuildContext context) 来根据新数据动态填充新列表.我收到了这个错误。

I/flutter ( 3438): The following assertion was thrown during performResize():
I/flutter ( 3438): Vertical viewport was given unbounded height.
I/flutter ( 3438): Viewports expand in the scrolling direction to fill their container.In this case, a vertical
I/flutter ( 3438): viewport was given an unlimited amount of vertical space in which to expand. This situation
I/flutter ( 3438): typically happens when a scrollable widget is nested inside another scrollable widget.

在下面的第一列中,我画了一张卡片,我将在其中选择日期,下面的下一列我将调用此函数buildDynamicList(context)

 new Column(
                      children: <Widget>[
                        Container(
                                margin: new EdgeInsets.fromLTRB(20, 10, 0, 0),
                                decoration: new BoxDecoration(
                                                           color:Color.fromRGBO(36, 46, 66, 1),
                                                          borderRadius: new BorderRadius.only(
                                                            topLeft: const Radius.circular(35),
                                                            bottomLeft: const Radius.circular(35)
                                                          ),

                                                          ),
                                width: double.infinity,
                                height: 55.0,

                                //child:Expanded(
                                child:Card(

                                color: Color.fromRGBO(36, 46, 66, 1),
                                clipBehavior: Clip.antiAlias,
                                shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(35) 
                                ),

                                child: Row(
                                    crossAxisAlignment: CrossAxisAlignment.center,
                                    children: <Widget>[
                                    Container(
                                      height: 40.0,
                                      width: 50.0,

                                      decoration: BoxDecoration(
                                        color: Colors.blueAccent,
                                        shape: BoxShape.circle,
                                      border: new Border.all(
                                        color: Colors.blue,
                                        width: 2.5,
                                      ),
                                      ),
                                      child: Icon(
                                                              Icons.calendar_today,
                                                              size: 25.0,
                                                              color: Colors.white,
                                                            ),
                                      ),
                                      Expanded(

                                        child:
                                        Column(
                                          //mainAxisAlignment: MainAxisAlignment.center,
                                          //mainAxisAlignment: MainAxisAlignment.center, 
                                          mainAxisAlignment: MainAxisAlignment.center, 
                                          crossAxisAlignment: CrossAxisAlignment.center, 
                                          children: [ 
                                          //new Row( 
                                          // mainAxisSize: MainAxisSize.max, 

                                          //children: <Widget>[ 
                                          new Text( 
                                          "From", style: TextStyle(color:Colors.white),
                                          ), 
                                          new Text( 
                                          "01 Jan 2019", style: TextStyle(color:Colors.white),
                                          ), 
                                        // new Icon(Icons.account_circle) 
                                          //style: Theme.of(context).textTheme.body2 

                                          ],
                                        ),
                                      ),
                                      Expanded(

                                        child:
                                        Column(
                                          //mainAxisAlignment: MainAxisAlignment.center,
                                          //mainAxisAlignment: MainAxisAlignment.center, 
                                          mainAxisAlignment: MainAxisAlignment.center, 
                                          crossAxisAlignment: CrossAxisAlignment.center, 
                                          children: [ 
                                          //new Row( 
                                          // mainAxisSize: MainAxisSize.max, 

                                          //children: <Widget>[ 
                                          new Text( 
                                          "To", style: TextStyle(color:Colors.white),
                                          ), 
                                          new Text( 
                                          "02 Jan 2019", style: TextStyle(color:Colors.white),
                                          ), 
                                        // new Icon(Icons.account_circle) 
                                          //style: Theme.of(context).textTheme.body2 

                                          ],
                                        ),
                                      ),
                                    ],

                                )
                                ),
                                //)

                        ),
                      ]

                  ),       
                  new Column(

                      mainAxisSize: MainAxisSize.min,

                      children: <Widget>[
                        buildDynamicList(context)

                      ],

                  )

这是我调用动态列表的函数。我尝试了很多选择,例如扩展、灵活等都给了我错误。

Widget buildDynamicList(BuildContext context) {
    return new Container(
                    //decoration: new BoxDecoration(border: new Border.all(width: 2.0)),
                    height:200,

                      //fit: FlexFit.loose ,
                      child: ListView.builder(
                        //  shrinkWrap: true,
                          itemCount: vehicles.length,                      
                          itemBuilder: (BuildContext ctxt, int index) {

                               return new ListView(
                                 children: <Widget>[
                               new Text("TEE"),
                                 ] 


                               );
                          }

                     ),
                    );

 }

【问题讨论】:

    标签: flutter flutter-layout


    【解决方案1】:

    删除嵌套的listview,因为它是不必要的:

       Widget buildDynamicList(BuildContext context) {
        return new Container(
                    //decoration: new BoxDecoration(border: new Border.all(width: 2.0)),
                    height:200,
                    //fit: FlexFit.loose ,
                    child: ListView.builder(
                        //shrinkWrap: true,
                          itemCount: vehicles.length,                      
                          itemBuilder: (BuildContext ctxt, int index) {
                               return Text("TEE"),
                          }
                       ),
                    );
                 }
    

    【讨论】:

    • 我删除它可以工作,但现在我不想将高度设置为 200。我希望它是动态的。实际上列表视图有什么问题
    • Listviews 是从其父小部件继承大小的小部件,嵌套的小部件无法为其直接父部件(Listview)获取 height。如果你想让它像父母一样用Container 包裹它会解决问题。
    • 如果您希望高度与屏幕尺寸成比例,您可以使用MediaQuery.of(context).size.height /2 例如。
    • 我确实删除了容器并放置扩展不起作用。但我试过这个 return new Flexible( 它有效。这是否有助于我的列表可能超出屏幕尺寸。那么 MediaQuery.of(context).size.height /2 将如何帮助?
    • Expandable 也从父级继承其大小,这与 Flexible 从其子小部件获取其大小不同。 MediaQuery 在某些情况下会根据屏幕大小和方向改变大小。
    猜你喜欢
    • 2019-11-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-04-04
    • 2019-01-15
    • 1970-01-01
    • 2020-06-06
    • 2022-01-25
    相关资源
    最近更新 更多