如何在TabBarView中实现SingleChildScrollView（带有水平列表视图和垂直gridview）

Posted 2021-05-03

我想要一个垂直滚动的小部件，上面有几个项目。在它的顶部应该有一个水平的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),
    );
  }