我想有一个垂直滚动的小部件，上面没有几个项目。它的顶部应该有一个水平的ListView，然后是gridview。所有这些都在TabBarView中。
我已经尝试使用SingleChildScrollView包装水平ListView和垂直gridview，如其他人的StackOverflow问题所建议的那样，但这没有用。
Widget build(BuildContext context) {
List tabs = <Tab>[
Tab(text: "Home"),
Tab(text: "Store"),
Tab(text: "Favourite")
];
return DefaultTabController(
length: 3,
child: Scaffold(
key: _scaffoldKey,
drawer: drawerSidebar(),
backgroundColor: Colors.grey[100],
appBar: AppBar(
actions: <Widget>[
IconButton(
icon: Icon(Icons.notifications),
),
IconButton(
icon: Icon(Icons.message),
),
],
title: TextField(
controller: _filter,
decoration: new InputDecoration(
fillColor: Colors.white, filled: true, hintText: 'Search'),
),
bottom: TabBar(
// indicatorSize: TabBarIndicatorSize.tab,
tabs: tabs,
controller: _tabController,
),
),
body: TabBarView(
children: <Widget>[
SingleChildScrollView(
child:
Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Explore(), //horizontal listview
Expanded(
child: FreshFinds(), //vertical gridview.builder
),
],
)),
PageTwo(),
],
)));
}
这是我在使用
SingleChildScrollView时遇到的错误:I/flutter (18049): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (18049): The following assertion was thrown during performLayout():
I/flutter (18049): RenderFlex children have non-zero flex but incoming height constraints are unbounded.
I/flutter (18049): When a column is in a parent that does not provide a finite height constraint, for example if it is
I/flutter (18049): in a vertical scrollable, it will try to shrink-wrap its children along the vertical axis. Setting a
I/flutter (18049): flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining
I/flutter (18049): space in the vertical direction.
I/flutter (18049): These two directives are mutually exclusive. If a parent is to shrink-wrap its child, the child
I/flutter (18049): cannot simultaneously expand to fit its parent.
I/flutter (18049): Consider setting mainAxisSize to MainAxisSize.min and using FlexFit.loose fits for the flexible
I/flutter (18049): children (using Flexible rather than Expanded). This will allow the flexible children to size
I/flutter (18049): themselves to less than the infinite remaining space they would otherwise be forced to take, and
I/flutter (18049): then will cause the RenderFlex to shrink-wrap the children rather than expanding to fit the maximum
I/flutter (18049): constraints provided by the parent.
I/flutter (18049): The affected RenderFlex is:
I/flutter (18049): RenderFlex#46825 relayoutBoundary=up1 NEEDS-LAYOUT NEEDS-PAINT
I/flutter (18049): The creator information is set to:
I/flutter (18049): Column ← _SingleChildViewport ← IgnorePointer-[GlobalKey#653c5] ← Semantics ← Listener ←
I/flutter (18049): _GestureSemantics ← RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#61b8a] ←
I/flutter (18049): _ScrollableScope ← _ScrollSemantics-[GlobalKey#7275d] ← RepaintBoundary ← CustomPaint ←
I/flutter (18049): RepaintBoundary ← ⋯
I/flutter (18049): The nearest ancestor providing an unbounded width constraint is:
I/flutter (18049): _RenderSingleChildViewport#72ad5 NEEDS-LAYOUT NEEDS-PAINT
I/flutter (18049): creator: _SingleChildViewport ← IgnorePointer-[GlobalKey#653c5] ← Semantics ← Listener ←
I/flutter (18049): _GestureSemantics ← RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#61b8a] ←
I/flutter (18049): _ScrollableScope ← _ScrollSemantics-[GlobalKey#7275d] ← RepaintBoundary ← CustomPaint ←
I/flutter (18049): RepaintBoundary ← NotificationListener<ScrollNotification> ← ⋯
I/flutter (18049): parentData: <none> (can use size)
I/flutter (18049): constraints: BoxConstraints(w=454.7, h=680.4)
I/flutter (18049): size: MISSING
I/flutter (18049): See also: https://flutter.io/layout/
I/flutter (18049): If this message did not help you determine the problem, consider using debugDumpRenderTree():
I/flutter (18049): https://flutter.io/debugging/#rendering-layer
I/flutter (18049): http://docs.flutter.io/flutter/rendering/debugDumpRenderTree.html
I/flutter (18049): If none of the above helps enough to fix this problem, please don't hesitate to file a bug:
I/flutter (18049): https://github.com/flutter/flutter/issues/new?template=BUG.md
I/flutter (18049):
My result without using SingleChildScrollView
what I want
最佳答案
所以我用CustomScrollView和Slivers解决了
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
title: new Text("Settings"),
),
body: Container(
child: CustomScrollView(
slivers: <Widget>[
SliverList(
delegate: SliverChildListDelegate(<Widget>[
Container(
child: new Image.asset(
"images/product.jpg",
fit: BoxFit.fitWidth,
),
),
])),
FreshFinds()
],
),
),
);
}
//Freshfinds.dart
Widget build(BuildContext context) {
return SliverGrid(
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
delegate: SliverChildBuilderDelegate((BuildContext context, int index) {
return FutureBuilder(
future: fetchdata(index),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (!snapshot.hasData)
return buildfake(index);
else
return buildcard(snapshot.data, index);
},
);
}, childCount: 20),
);
}
关于dart - 如何在TabBarView内实现SingleChildScrollView(具有水平listview和垂直gridview)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55770908/