如何在堆栈内设置 TabBar 的 position 而不会在 Flutter 中出错？

Question

我试图在这里阅读Flutter 中的一些解决方案：“RenderFlex 子项具有非零弹性，但传入的高度约束是无界的”但我仍然有错误

我正在尝试将我的 TabBar 从绿色容器的顶部移动到底部。 像这样

如您所见，我有一个堆栈。 蓝绿色渐变背景将作为基础，除此之外我还有 TabBar。 上图 TabBar 的代码是这样的

        Positioned(
          child: TabBar( 
            unselectedLabelColor: Colors.white,
            labelColor: Colors.white,
            tabs: [
              Tab(text: 'Tab 1'),
              Tab(text: 'Tab 2'),
            ],
            controller: _tabController,
            indicatorSize: TabBarIndicatorSize.tab,
          ),
        ),

因为我想将该标签栏移动到绿色基础容器的底部，所以我将 Positioned 的底部设置为零，就像这样

        Positioned(
          bottom: 0, // <--- like this
          child: TabBar( 
            unselectedLabelColor: Colors.white,
            labelColor: Colors.white,
            tabs: [
              Tab(text: 'Tab 1'),
              Tab(text: 'Tab 2'),
            ],
            controller: _tabController,
            indicatorSize: TabBarIndicatorSize.tab,
          ),
        ),

但我有错误

RenderFlex 子项具有非零 flex，但传入的宽度约束是无界的。

当一行位于不提供有限宽度约束的父行中时，例如，如果它在水平可滚动中，它将尝试沿水平轴收缩其子代。 在子节点上设置 flex（例如使用 Expanded）表示子节点将展开以填充水平方向上的剩余空间。 这两个指令是互斥的。 如果父级要收缩包裹其子级，则子级不能同时扩展以适应其父级。

我曾尝试使用 Expanded 包装该 TabBar，但我仍然有错误。 我没有一行，但错误说'当一行......'。 我很困惑。 请帮忙

这是我来自 DartPad 的完整代码。

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> with SingleTickerProviderStateMixin {
  
  
  late TabController _tabController;

  @override
  void initState() {
    _tabController = new TabController(length: 2, vsync: this);
    super.initState();
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }
  
  
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Stack(
          children: [
            BaseWithGradientColor(),
            Positioned(
              child: TabBar( // <---- My Problem is in here
                unselectedLabelColor: Colors.white,
                labelColor: Colors.white,
                tabs: [
                  Tab(text: 'Tab 1'),
                  Tab(text: 'Tab 2'),
                ],
                controller: _tabController,
                indicatorSize: TabBarIndicatorSize.tab,
              ),
            ),
          ],
        ),
      ],
    );
  }
}

class BaseWithGradientColor extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final themeData = Theme.of(context);
    return Container(
      width: double.infinity,
      height: MediaQuery.of(context).size.width * 0.75,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [Colors.blue, Colors.green],
        ),
      ),
    );
  }
}

Answer 1

我认为您也可以通过仅使用列来实现它

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> with SingleTickerProviderStateMixin {
  
  
  late TabController _tabController;

  @override
  void initState() {
    _tabController = new TabController(length: 2, vsync: this);
    super.initState();
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }
  
  
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
    
// First child (also minus the  size of tabbar)
            BaseWithGradientColor(), 

// Second Child
             TabBar( // <---- My Problem is in here
                unselectedLabelColor: Colors.white,
                labelColor: Colors.white,
                tabs: [
                  Tab(text: 'Tab 1'),
                  Tab(text: 'Tab 2'),
                ],
                controller: _tabController,
                indicatorSize: TabBarIndicatorSize.tab,
            ),
/// Thir child and so on .. 
          ],
      
    );
  }
}

class BaseWithGradientColor extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final themeData = Theme.of(context);
    return Container(
      width: double.infinity,
      height: MediaQuery.of(context).size.width * 0.75,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [Colors.blue, Colors.green],
        ),
      ),
    );
  }
}