Flutter GridView ListTiles 出现在滚动容器下方

Question

我有一个 Flutter 滚动 GridView 构建器，它看起来像在放置 GridView 的容器下方呈现 ListTiles。它似乎呈现占位符网格列表图块，即使它们不在容器边界内。

出于某种原因，GridView ListTiles 似乎出现在父容器的外部（下方）。

在这个例子中，GridView 被放置在一个 Container 中，然后作为 Column 中的子 widget 的父 Scrollbar 的子项放置。 GridView 似乎在其父容器外部呈现网格 ListTiles（呈现背景 Tile 颜色但不呈现 Tile 内容），在父 Column 小部件的其他子小部件下显示为 Tiles。请参阅下面的屏幕截图。

容器下的网格列表磁贴

当我向上滚动列表时，阴影 Tiles 出现在带有 Tile 内容的 GridView 中。

当我向后滚动时，GridView 下方的 Tiles 出现在下方？/下方？父列中的其他小部件。请先查看“再见”文本小部件下方的彩色区域图像。 `

import 'package:flutter/material.dart';
import 'package:scroll5/models/task_model.dart';

/// This is the stateful widget that the main application instantiates.
class ScrollListWidget extends StatefulWidget {
  final List<TaskCard> _list;

  ScrollListWidget({Key? key})
      : _list = [],
        super(key: key);
  const ScrollListWidget.withList(
    List<TaskCard> list, {
    Key? key,
  })  : _list = list,
        super(key: key);

  @override
  State<ScrollListWidget> createState() => _ScrollListStatefulWidgetState();
}

/// This is the private State class that goes with MyStatefulWidget.
class _ScrollListStatefulWidgetState extends State<ScrollListWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(height: 240, child: GridView.builder(
     shrinkWrap: true,
      physics: ScrollPhysics(),
      itemCount: widget._list.length,
          itemBuilder: (context, index) => WordTile(
              widget._list[index].taskName(), widget._list[index].daysEffort()),
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            childAspectRatio: 4,
         ),
    ));
  }
}

class WordTile extends StatelessWidget {
  final String word;
  final int score;

  const WordTile(this.word, this.score, {super.key});

  @override
  Widget build(BuildContext context) {
    return ListTile(
        tileColor: Colors.green.withOpacity(.4), title: Text(word));
  }
}`

滚动条和列中包含的容器内的 GridView

@override
Widget build(BuildContext context) {
  // This method is rerun every time setState is called, for instance as done
  // by the _incrementCounter method above.
  //
  // The Flutter framework has been optimized to make rerunning build methods
  // fast, so that you can just rebuild anything that needs updating rather
  // than having to individually change instances of widgets.
  return Scaffold(
    appBar: AppBar(
      // Here we take the value from the MyHomePage object that was created by
      // the App.build method, and use it to set our appbar title.
      title: Text(widget.title),
    ),
    body: Center(
      // Center is a layout widget. It takes a single child and positions it
      // in the middle of the parent.
      child:
      Column(children: [
      Scrollbar(
        controller: _scrollController,
        thickness: 8,
        interactive: true,
        thumbVisibility: true,
        child:ScrollListWidget.withList(_taskList)
      ),
      Text("Bye",style: TextStyle())])),
      floatingActionButton: FloatingActionButton(
      onPressed: _incrementCounter,
      tooltip: 'Increment',
      child: const Icon(Icons.add)));
  // This trailing comma makes auto-formatting nicer for build methods.
}`

Answer 1

好的，在探索了一些选项之后，似乎问题只出现在直接在网格列表中使用 ListTile 时。如果我将 ListTile 嵌入到 Card 小部件中，问题就会消失。