flutter - 带有我自己的控制器的 Scaffold 中的 TabBar 不起作用

问题描述

我正在使用 Scaffold，在 Body 中我想使用 TabBar 小部件，在 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。如何解决这个问题？

标签： flutterflutter-layoutflutter-navigation

TabBarView用小部件包装Expanded。

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

我还建议您TabBar放入bottom.AppBar

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

flutter - 带有我自己的控制器的 Scaffold 中的 TabBar 不起作用

问题描述

解决方案

推荐阅读