无法滚动嵌套列表视图

Posted 2023-02-23

【中文标题】无法滚动嵌套列表视图

【英文标题】：Not able to scroll nested listview

【发布时间】：2020-11-20 21:27:58

【问题描述】：

嵌套列表视图滚动不正确，当我滚动时它会自行回滚到顶部位置，不保留实际位置

Container(
  width:screenSize.width,
  child: ListView(

    scrollDirection:Axis.vertical,
    children: <Widget>[new Container(
      padding: EdgeInsets.fromLTRB(10, 20,10, 0),
      // color: Colors.red,
      width: screenSize.width,
  height: screenSize.height,
      child:  Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        // mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment:CrossAxisAlignment.center,
            children: <Widget>[

            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment:CrossAxisAlignment.center,
              children: <Widget>[
              Text('Text1'),
              Text('Text1'),
            ],),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment:CrossAxisAlignment.center,
              children: <Widget>[
              Text('Text1'),
              Text('Text1'),
            ],),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment:CrossAxisAlignment.center,
              children: <Widget>[
              Text('Text1'),
              Text('Text1'),
            ],),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment:CrossAxisAlignment.center,
              children: <Widget>[
              Text('Text1'),
              Text('Text1'),
            ],),
            Row
              (
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment:CrossAxisAlignment.center,
              children: <Widget>[
              Text('Text1'),
              Text('Text1'),
            ],),
          ],),
          // ListView()
          SizedBox(height: 25,),
           SizedBox(
             width: 300,
            child: new ListView(
              scrollDirection: Axis.vertical,
              shrinkWrap: true,
              children: <Widget>[

            Container(

            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[

                Text('Item Details' + "1/2"),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment:CrossAxisAlignment.center,
                  children: <Widget>[
                    Text('Text1'),
                    Text('Text1'),
                  ],),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment:CrossAxisAlignment.center,
                  children: <Widget>[
                    Text('Text1'),
                    Text('Text1'),
                  ],),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment:CrossAxisAlignment.center,
                  children: <Widget>[
                    Text('Text1'),
                    Text('Text1'),
                  ],),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment:CrossAxisAlignment.center,
                  children: <Widget>[
                    Text('Text1'),
                    Text('Text1'),
                  ],),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment:CrossAxisAlignment.center,
                  children: <Widget>[
                    Text('Text1'),
                    Text('Text1'),
                  ],),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment:CrossAxisAlignment.center,
                  children: <Widget>[
                    Text('Text1'),
                    Text('Text1'),
                  ],),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment:CrossAxisAlignment.center,
                  children: <Widget>[
                    Text('Text1'),
                    Text('Text1'),
                  ],),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment:CrossAxisAlignment.center,
                  children: <Widget>[
                    Text('Text1'),
                    Text('Text1'),
                  ],),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment:CrossAxisAlignment.center,
                  children: <Widget>[
                    Text('Text1'),
                    Text('Text1'),
                  ],),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment:CrossAxisAlignment.center,
                  children: <Widget>[
                    Text('Text1'),
                    Text('Text1'),
                  ],),
                RaisedButton(

                  color: Colors.greenAccent,  onPressed: () 


                  Fluttertoast.showToast(msg: "Approved Item");
                ,
                  child:  Text("APPROVE"),

                )


              ],
            ),
           )


              ],
            ),
          )
        ],
      ),
    ),],
  ),
),

我试图确定问题出在哪里，但目前无法解决，尝试了各种方法但无法理解当我们滚动嵌套列表视图时，为什么它铰接在顶部位置并且不保留或显示新的滚动上下文。

请告知此问题的解决方案。

【参考方案1】：

如果您使用嵌套的ListViews，则必须为每个ListViews 指定滚动物理特性（即处理ListView 的滚动行为）。

默认情况下，ListView 在 android 上具有 ClampingScrollPhysics，在 ios 平台上具有 BouncingScrollPhysics。这意味着在 android 平台上，滚动夹在ListView 的边界上，而在 ios 上，ListView 上下弹跳。 所以，如果我们使用嵌套的ListViews，父列表会限制它的限制。它可能不知道它的孩子是什么样的小部件。为了避免这个问题，我们需要创建一个始终滚动的ListView，为此我们必须使用AlwaysScrollableScrollPhysics。

这是您的示例代码的固定版本。

ListView(
    physics: AlwaysScrollableScrollPhysics(),
    scrollDirection: Axis.vertical,
    children: <Widget>[
      new Container(
        padding: EdgeInsets.fromLTRB(10, 20, 10, 0),
        width: MediaQuery.of(context).size.width,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          // mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    Text('Text1'),
                    Text('Text1'),
                  ],
                ),
              ],
            ),
            // ListView()
            SizedBox(
              height: 25,
            ),
            SizedBox(
              width: 300,
              child: new ListView.builder(
                scrollDirection: Axis.vertical,
                shrinkWrap: true,
                itemCount: 100,
                physics: ClampingScrollPhysics(),
                itemBuilder: (context, int index) => RaisedButton(
                  color: Colors.greenAccent,
                  onPressed: () ,
                  child: Text("APPROVE $index"),
                ),
              ),
            ),
          ],
        ),
      ),
    ],
  ),

这是一个有效的demo

【讨论】：

我按照你的建议做了，但同样的问题仍然存在

什么平台？网络、桌面还是移动设备？

我正在使用 ios 模拟器，但请确保它也适用于 android

解决了这个问题，这是因为父容器中的高度限制