我有一个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.
}`
1条答案
按热度按时间oxcyiej71#
好吧,在研究了一些选项之后,似乎只有在网格列表中直接使用ListTile时才会出现这个问题。如果我将ListTile嵌入到Card小部件中,这个问题就消失了。