SliverGrid无法与CustomScrollView、SliverAppBar和TabBar/TabBarView一起工作

Question

我正在尝试实现一个带有选项卡的SliverAppBar。我想在一个选项卡中放置一个SliverGrid，在另一个选项卡中放置一个SliverList。获取SliverAppBar和TabBar的基本代码如下。选项卡内容只是Text()元素。我想要的是一个展开的应用程序栏，其中包含图像和一些其他控件。下面是选项卡栏，其中包含网格/列表等。当用户向上滚动时，标题栏应固定在顶部，选项卡栏应固定在其下方。

  Widget _buildUI(Device data) {
    return CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
          floating: true,
          snap: true,
          pinned: true,
          expandedHeight: 250,
          flexibleSpace: FlexibleSpaceBar(
            title: Text('Page Title'),
            background: Image.network(
              'http://img1.mukewang.com/5c18cf540001ac8206000338.jpg',
              fit: BoxFit.cover,
            ),
          ),
        ),
        SliverPersistentHeader(
          // TabBar with a ceiling)
          pinned: true,
          delegate: StickyTabBarDelegate(
            child: TabBar(
              labelColor: Colors.black,
              controller: this.tabController,
              tabs: <Widget>[
                Tab(text: 'Tab 1'),
                Tab(text: 'Tab 2'),
              ],
            ),
          ),
        ),
        SliverFillRemaining(
          // TabBarView, the remaining supplement)
          child: TabBarView(
            controller: this.tabController,
            children: <Widget>[
              Center(child: Text('Content of Tab 1')),
              Center(child: Text('Content of Tab 2')),
            ],
          ),
        ),
      ],
    );
  }

现在，当我尝试添加SliverGrid而不是Text()元素时，我会收到以下错误提示：

SliverFillRemaining(
          // TabBarView, the remaining supplement)
          child: TabBarView(
            controller: this.tabController,
            children: <Widget>[
              Center(
                  child: SliverGrid.count(
                crossAxisCount: 3,
                children:
                    colorList.map((color) => Container(color: color)).toList(),
              )),
              Center(child: Text('Content of Tab 2')),
            ],
          ),
        )

Flutter抛出的错误

════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
The following assertion was thrown building KeyedSubtree-[<0>]:
A RenderPositionedBox expected a child of type RenderBox but received a child of type RenderSliverGrid.

RenderObjects expect specific types of children because they coordinate with their children during layout and paint. For example, a RenderSliver cannot be the child of a RenderBox because a RenderSliver does not understand the RenderBox layout protocol.
The RenderPositionedBox that expected a RenderBox child was created by: Center ← KeyedSubtree-[<0>] ← RepaintBoundary ← IndexedSemantics ← NotificationListener<KeepAliveNotification> ← KeepAlive ← AutomaticKeepAlive ← KeyedSubtree-[Key <[<0>]>] ← _SliverFillViewportRenderObjectWidget ← _SliverFractionalPadding ← SliverFillViewport ← Viewport ← ⋯
The RenderSliverGrid that did not match the expected child type was created by: SliverGrid ← Center ← KeyedSubtree-[<0>] ← RepaintBoundary ← IndexedSemantics ← NotificationListener<KeepAliveNotification> ← KeepAlive ← AutomaticKeepAlive ← KeyedSubtree-[Key <[<0>]>] ← _SliverFillViewportRenderObjectWidget ← _SliverFractionalPadding ← SliverFillViewport ← ⋯
The relevant error-causing widget was: 
  TabBarView file:///E:/Aviraj/Projects/syl/repo/ampere-iot-framework/mobile/flutter/sylcloud/lib/screens/device/device_details_screen.dart:108:18
When the exception was thrown, this was the stack: 
#0      RenderObjectWithChildMixin.debugValidateChild.<anonymous closure> (package:flutter/src/rendering/object.dart:2866:9)
#1      RenderObjectWithChildMixin.debugValidateChild (package:flutter/src/rendering/object.dart:2893:6)
#2      SingleChildRenderObjectElement.insertChildRenderObject (package:flutter/src/widgets/framework.dart:5459:25)
#3      RenderObjectElement.attachRenderObject (package:flutter/src/widgets/framework.dart:5295:35)


#4      RenderObjectElement.mount (package:flutter/src/widgets/framework.dart:5058:5)

有没有办法在TabBarView上方添加SliverGrid？

- Avi

Answer 1

使用 GridView 代替。

SliverFillRemaining(
  // TabBarView, the remaining supplement)
  child: TabBarView(
    controller: this.tabController,
    children: <Widget>[
      Center(
        child: GridView.count( //TODO: Change here
          crossAxisCount: 3,
          children:
              colorList.map((color) => Container(color: color)).toList(),
        ),
      ),
      Center(child: Text('Content of Tab 2')),
    ],
  ),
)

- Crazy Lazy Cat

---

已经尝试过了。滚动存在问题。网格与滑块和选项卡独立滚动。我需要一个只使用SliverGrid的解决方案，因为它与SliveAppBar兼容。 - Avi

@Avi 后来找到解决方案了吗？ - Shanthakumar