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

抖动引起的错误，

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

SliverGrid无法与CustomScrollView，SliverAppBar和TabBar / TabBarView一起使用

1 个答案: