SliverGrid 不适用于 CustomScrollView、SliverAppBar 和 TabBar/TabBarView

Question

我正在尝试使用 TabBar 实现 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？

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')),
    ],
  ),
)