Flutter GridView ListTiles显示在滚动容器下方

ffscu2ro  于 2023-03-31  发布在  Flutter
关注(0)|答案(1)|浏览(142)

我有一个Flutter滚动GridView构建器,它看起来像是在放置GridView的容器下面渲染ListTiles。它似乎渲染占位符网格列表块,即使它们不在容器边界内。
由于某种原因,GridViewListTiles看起来似乎出现在父容器的外部(下面)。
在本例中,GridView放置在一个容器中,然后将容器作为一个子项放置在一个列中的子小部件父滚动条下。GridView显示为在其父容器外呈现网格ListTiles(呈现背景Tile颜色,但不呈现Tile内容),在父列小部件的其他子小部件下显示为Tile。请参见下面的屏幕截图。
容器下的网格列表图块

当我向上滚动列表时,阴影瓷砖出现在GridView中,其中包含瓷砖内容。

当我向后滚动时,GridView下面的Tiles出现在父列中其他小部件的下面。请参见第一个图像“Bye”文本小部件下面的彩色区域。`

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.
}`
oxcyiej7

oxcyiej71#

好吧,在研究了一些选项之后,似乎只有在网格列表中直接使用ListTile时才会出现这个问题。如果我将ListTile嵌入到Card小部件中,这个问题就消失了。

相关问题