ListView 不在定位的小部件中滚动

Posted 2023-02-23

【中文标题】ListView 不在定位的小部件中滚动

【英文标题】：ListView not scrolling in positioned Widget

【发布时间】：2020-05-13 02:55:08

【问题描述】：

我目前有一个堆栈，其中包含我的 AppBar 和我的页面内容的背景。 我在页面的中心显示了一个Container，使用Positioned 小部件定位，其中包含一个网格/列表视图。

@override
  Widget build(BuildContext context) 
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: VehicleScreenAppBar(
        title: title,
        context: context,
      ),
      body: LayoutBuilder(
        builder: (contxt, vehicleListConstraints) 
          return Stack(
            overflow: Overflow.visible,
            children: <Widget>[
              AppBarBackDrop(constraints: vehicleListConstraints),
              Positioned(
                top: vehicleListConstraints.maxHeight * .15,
                left: (vehicleListConstraints.maxWidth - vehicleListConstraints.maxWidth * .9) / 2,
                child: Container(
                  color: Colors.red,
                  height: vehicleListConstraints.maxHeight * .6,
                  width: vehicleListConstraints.maxWidth * .9,
                  child: ListView.builder(
                    itemCount: 20,
                    itemBuilder: (context, i) 
                      return Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Container(
                          height: 50,
                          color: Colors.blue,
                          child: Text('text'),
                        ),
                      );
                    ,
                  ),
                ),
              )
            ],
          );
        ,
      ),
    );
  

我遇到的问题是当我有Positioned 小部件并且我明确命名了任何但不是所有的构造函数时，网格/列表视图不滚动，即top:、bottom:、@987654330 @，right:。 （我通过构建器懒惰地构建网格/列表视图）。

我有一个变通/破解方法，我删除了Positioned 并将其替换为PageView。然后PageView 有一个children: <Widget> [ Container() ]，然后我通过边距构造函数的top: 和left: 定位它。

这暂时可行，但不是我想在生产中实施的东西。如何在不命名所有构造函数的情况下让网格/列表视图在 Positioned 小部件内滚动？

【参考方案1】：

这会在页面中心显示Container

Positioned(
  top: 0.0,
  left: 0.0,
  right: 0.0,
  bottom: 0.0,
  child: //your code
)

【参考方案2】：

对于封装在定位小部件中的可滚动小部件，您应该为定位小部件的所有参数（left、right、top、bottom）赋予一个值，然后它将起作用。

 Positioned(
              top: 20.0,
              left: 20.0,
              right:0.0,
               bottom:0.0

              child: SizedBox(
              //what ever code is)),
                )
                  )