TabBarView 因为高度而抛出 hasSize 错误？答案

【问题标题】：TabBarView throwing hasSize error because of height?TabBarView 因为高度而抛出 hasSize 错误？
【发布时间】：2021-09-22 06:55:42
【问题描述】：

所以基本上我正在尝试在 CustomScrollView 小部件中实现 TabBar and TabBarView 并引发此错误：

RenderBox 未布置：_RenderScrollSemantics#ab91d relayoutBoundary=up2 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 'package:flutter/src/rendering/box.dart': 断言失败：第 1930 行第 12 行：'hasSize'

问题肯定是 TabBarView 及其高度。

有效的小部件：

SliverToBoxAdapter(
            child: Container(
              height: size.height,
              child: TabBarView(
                controller: this._controller,
                children: [
                  Center(
                    child: Text("Hello"),
                  ),
                  Center(
                    child: Text("Hello"),
                  ),
                  Center(
                    child: Text("Hello"),
                  ),
                ],
              ),
            ),
          )

小部件不起作用

SliverToBoxAdapter(
            child: Container(
              child: TabBarView(
                controller: this._controller,
                children: [
                  Center(
                    child: Text("Hello"),
                  ),
                  Center(
                    child: Text("Hello"),
                  ),
                  Center(
                    child: Text("Hello"),
                  ),
                ],
              ),
            ),
          )

我不只使用工作小部件的原因是因为我不想固定高度。我希望它的孩子们需要它。这就是为什么我尝试使用 Expanded 但它会引发同样的错误。

我在这里做错了什么？

如果有帮助，这里是整个小部件树：

Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            expandedHeight: size.height * 0.45,
            pinned: true,
            flexibleSpace: FlexibleSpaceBar(
              background: MyImage(),
              centerTitle: true,
              title: Text("-_-");,
            ),
          ),
          SliverToBoxAdapter(
            child: Column(
              children: [
                SizedBox(height: 20),
                MyInfo(),
                SizedBox(height: 10),
              ],
            ),
          ),
          SliverToBoxAdapter(
            child: Container(
              child: TabBar(
                controller: this._controller,
                indicatorColor: primaryCScheme,
                tabs: [
                  Tab(
                    icon: Icon(CupertinoIcons.add),
                  ),
                  Tab(
                    icon: Icon(CupertinoIcons.scissors),
                  ),
                  Tab(
                    icon: Icon(CupertinoIcons.film),
                  ),
                ],
              ),
            ),
          ),
          SliverToBoxAdapter(
            child: Container(
              height: size.height,            // here is the issue
              color: Colors.red,
              child: TabBarView(
                controller: this._controller,
                children: [
                  Center(
                    child: Text("Hello"),
                  ),
                  Center(
                    child: Text("Hello"),
                  ),
                  Center(
                    child: Text("Hello"),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    )

【问题讨论】：

标签： flutter dart

【解决方案1】：

首先看一下Flutter关于理解约束的帖子which can be found here。这是一个很好的资源，可以帮助您了解为什么会首先出现此类错误。

根据定义，SliverToBoxAdapter 期望孩子是一个固定大小的盒子。

你可以试试SliverFillRemaining。默认情况下，它将扩展到全屏尺寸（向下滚动到可能的其他条子时），但您也可以将 hasScrollBody 设置为 false 以确保其功能类似于 expanded 小部件，并且不允许进一步滚动.

在最后一种情况下，请记住用户在横向模式下使用手机的可能性。

编辑

我看到还有SliverFillViewport。虽然我自己没有使用过它，但我想它可能是您问题的替代解决方案。

SliverFillViewport reference

SliverFillRemaining reference

【讨论】：