Flutter：ListView 上方的容器可滚动

Question

我想显示一个带有文本的容器，后跟一个类别列表视图。在我当前的代码中，除了我无法弄清楚如何使 Text Container 也可滚动（因此它向上移动到框架之外）之外，它是可行的。

目前看起来是这样的：

蓝色容器是静态的并停留在其位置，而红色 ListView 可以完美滚动。

当前代码：

      body: Container(
    child: Column(
      mainAxisSize: MainAxisSize.max,
      children: [
        Container(
          padding: EdgeInsets.fromLTRB(15, 0, 0, 10),
          child: Align(
            alignment: Alignment.topLeft,
            child: const Text("Browse through the individual categories...", style: TextStyle(fontSize: 32, color: Colors.black, fontWeight: FontWeight.w900)),
          ),
        ),
        Expanded(
          child: ListView.builder(
            itemCount: 20,
            itemBuilder: (context, index){
              return Padding(
                padding: const EdgeInsets.all(8.0),
                child: Category(),
              );
            }
          ),
        ),
      ],
    ),

我尝试实施。

body: SingleChildScrollView(
    child: Column(
      mainAxisSize: MainAxisSize.max,
      children: [
        Container(
          padding: EdgeInsets.fromLTRB(15, 0, 0, 30),
          child: Align(
            alignment: Alignment.topLeft,
            child: const Text("Browse through the individual categories...", style: TextStyle(fontSize: 32, color: Colors.black, fontWeight: FontWeight.w900)),
          ),
        ),
        Expanded(
          child: ListView.builder(
            shrinkWrap: true,
              primary: false,
              itemCount: 20,
              itemBuilder: (context, index){
                return Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Category(),
                );
              }
          ),
        ),
      ],
    ),
  ),

我收到以下错误：

RenderFlex children have non-zero flex but incoming height constraints are unbounded.

RenderBox was not laid out: RenderFlex#12630 relayoutBoundary=up11 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE

Answer 1

在列表视图中添加这些行

shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),

您可以跳过此解决方案的扩展小部件。

Answer 2

刚刚删除 SingleChildScrollView 小部件，它会起作用。

Answer 3

用 SingleChildScrollView 小部件包装，然后将 physics : NeverScrollableScrollPhysics() 添加到 ListView 小部件。

Flutter：ListView 上方的容器可滚动

Flutter: Container above ListView scrollable

flutter

dart

listview

flutter-layout