Question

我需要一个带有TabBarView小部件的Expanded。 TabBarView在小部件之间。高度与Sizedbox一起使用。

类似错误

断言失败：行1651位置12：'！_ debugDoingThisLayout'：不正确

RenderBox尚未布置：RenderFlex＃3caee relayoutBoundary = up6 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE

断言失败：行1687位置12：'hasSize'

TabBarView在代码结尾：

class TabBarNavigation extends StatefulWidget {
  TabBarNavigation({this.posts});
  final List<Post> posts;

  @override
  _TabBarNavigationState createState() => _TabBarNavigationState();
}

class _TabBarNavigationState extends State<TabBarNavigation>
    with SingleTickerProviderStateMixin {
  TabController _tabController;
  @override
  void initState() {
    super.initState();
    _tabController = TabController(
      length: 2,
      vsync: this,
    );
  }

  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      initialIndex: 0,
      child: Padding(
        padding: kPaddingTabBar,
        child: Column(
          children: <Widget>[
            Container(
              padding: EdgeInsets.all(5.0),
              decoration: BoxDecoration(
                color: kLightGrey,
                borderRadius: BorderRadius.all(
                  Radius.circular(50),
                ),
              ),
              child: TabBar(
                tabs: <Tab>[Tab(text: kArtwork), Tab(text: kPastJobs)],
                unselectedLabelColor: Colors.black54,
                labelColor: Colors.black,
                unselectedLabelStyle: kBoldText,
                labelStyle: kBoldText,
                indicatorSize: TabBarIndicatorSize.tab,
                indicator: BoxDecoration(
                  shape: BoxShape.rectangle,
                  borderRadius: BorderRadius.circular(50),
                  color: Colors.white,
                ),
              ),
            ),
            const SizedBox(height: kCommonSeparation),
            Expanded(
              child: TabBarView(
                controller: _tabController,
                children: [ArtworkTab(widget.posts), PastJobsTab()]
              )
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

异常说：“断言失败：第1687行pos 12：'hasSize”。我认为这就是为什么TabBarView需要const大小的原因，我建议您使用具有固定高度而不是Expanded的Container标签包装。对不起我的英语。

这种类型的异常会在某些assert方法失败时发生，因此，我认为了解异常可能会很有用：https://www.w3adda.com/dart-tutorial/dart-assert-statement

我建议您将代码更改为以下内容：

Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      initialIndex: 0,
      child: Padding(
        padding: kPaddingTabBar,
        child: Column(
          children: <Widget>[
            Container(
              padding: EdgeInsets.all(5.0),
              decoration: BoxDecoration(
                color: kLightGrey,
                borderRadius: BorderRadius.all(
                  Radius.circular(50),
                ),
              ),
              child: TabBar(
                tabs: <Tab>[Tab(text: kArtwork), Tab(text: kPastJobs)],
                unselectedLabelColor: Colors.black54,
                labelColor: Colors.black,
                unselectedLabelStyle: kBoldText,
                labelStyle: kBoldText,
                indicatorSize: TabBarIndicatorSize.tab,
                indicator: BoxDecoration(
                  shape: BoxShape.rectangle,
                  borderRadius: BorderRadius.circular(50),
                  color: Colors.white,
                ),
              ),
            ),
            const SizedBox(height: kCommonSeparation),
            Container(
              height: 200,
              child: TabBarView(
                controller: _tabController,
                children: [ArtworkTab(widget.posts), PastJobsTab()]
              )
            ),
          ],
        ),
      ),
    );
  }

因此，我制作了一个快速小部件来解决此问题，可以免费使用：

import 'package:flutter/material.dart';

class CustomEasyTabBar extends StatefulWidget {
  final List<Tab> tabs;
  final List<Widget> pages;
  CustomEasyTabBar({
    @required this.tabs,
    @required this.pages,
  }) {
    assert(tabs != null && pages != null);
    assert(tabs.length == pages.length);
  }
  @override
  _CustomEasyTabBarState createState() => _CustomEasyTabBarState();
}

class _CustomEasyTabBarState extends State<CustomEasyTabBar>
    with TickerProviderStateMixin {
  TabController tabController;
  int currentTabIndex = 0;

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

  @override
  void initState() {
    super.initState();
    this.tabController = TabController(
      initialIndex: 0,
      length: this.widget.tabs.length,
      vsync: this,
    );
    this.tabController.addListener(() {
      setState(() {
        this.currentTabIndex = this.tabController.index;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        _builderTabs(this.widget.tabs),
        _builderPages(this.currentTabIndex, this.widget.pages),
      ],
    );
  }

  Widget _builderPages(int currentIndex, List<Widget> pages) {
    int localIndex = 0;
    return Column(
      children: pages.map<Widget>((e) {
        if (localIndex == currentIndex) {
          localIndex++;
          return e;
        }
        localIndex++;
        return Container();
      }).toList(),
    );
  }

  Widget _builderTabs(List<Tab> tabs) {
    double width = MediaQuery.of(context).size.width;
    return Container(
      width: width,
      decoration: BoxDecoration(color: CustomColors.primary),
      child: Center(
        child: TabBar(
          controller: tabController,
          indicatorWeight: 4,
          labelColor: Colors.white,
          unselectedLabelColor: Colors.white30,
          indicatorColor: CustomColors.secondary,
          isScrollable: true,
          tabs: tabs,
        ),
      ),
    );
  }
}

需要在TabBarView中展开，但高度错误

1 个答案: