使用我自己的控制器的脚手架中的 TabBar 不起作用

Question

我正在使用 Scaffold，在 Body 中我想使用 TabBar Widget，在 Info、Adress 和 Delivery 之间切换。但是使用此代码

import 'package:flutter/material.dart';
import 'package:lieferantenapp/components/myBestellungText.dart';
import 'package:lieferantenapp/components/myLieferbuttons.dart';
import 'package:lieferantenapp/route/route.dart';
import 'package:lieferantenapp/variables.dart' as variables;

class CurrentDetail extends StatefulWidget {
  @override
  _CurrentDetailState createState() => _CurrentDetailState();
}

class _CurrentDetailState extends State<CurrentDetail>
    with TickerProviderStateMixin {
  TabController _tabController;
  @override
  initState() {
    super.initState();
    _tabController = new TabController(
      vsync: this,
      length: 3,
    );
  }

  @override
  void dispose() {
    super.dispose();
    _tabController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(20.0),
            child: Column(
              children: [
                MyBestellungText(),
                MyLieferbuttons(),
              ],
            ),
          ),
          TabBar(
            controller: _tabController,
            labelColor: Colors.black,
            unselectedLabelColor: Colors.black12,
            indicatorColor: variables.red,
            tabs: const <Widget>[
              Tab(
                text: "Hey",
                icon: Icon(
                  Icons.info_outline,
                  color: Colors.black,
                ),
              ),
              Tab(
                text: "Hey",
                icon: Icon(
                  Icons.info_outline,
                  color: Colors.black,
                ),
              ),
              Tab(
                text: "Hey",
                icon: Icon(
                  Icons.info_outline,
                  color: Colors.black,
                ),
              ),
            ],
          ),
          TabBarView(
            controller: _tabController,
            children: <Widget>[
              Text("Test 1"),
              Text("Test 2"),
              Text("Test 3"),
            ],
          ),
        ],
      ),
    );
  }
}

我收到以下错误 10 次。

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderCustomPaint#d08ff relayoutBoundary=up3 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1930 pos 12: 'hasSize'

The relevant error-causing widget was
TabBarView
lib\screens\currentDetail.dart:73
════════════════════════════════════════════════════════════════════════════════

我尝试在 Scaffold 中使用 DefaultTabController，还尝试将 Scaffold 包装在 DefaultTabController 中，但它都无法识别。现在我运行它有一个定制的控制器，但我不太确定这是否是最好的方法，而且它无论如何都不起作用 xD。如何解决这个问题？

Answer 1

用 Expanded 小部件包裹 TabBarView。

Expanded(
  child: TabBarView(
    controller: _tabController,
    children: <Widget>[
      Text("Test 1"),
      Text("Test 2"),
      Text("Test 3"),
    ],
  ),
),

我还建议您将 TabBar 放在 AppBar 的 bottom 属性中。

Scaffold(
  appBar: AppBar(
    bottom: TabBar(...),
  ),
  ...
),

使用我自己的控制器的脚手架中的 TabBar 不起作用

TabBar within Scaffold with my own controller doesn't work

flutter

flutter-layout

flutter-navigation