【问题标题】: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"),

                )


              ],
            ),
           )


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

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

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

【问题讨论】:

    标签: flutter listview flutter-listview


    【解决方案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
    • 解决了这个问题,这是因为父容器中的高度限制
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2021-11-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多