Question

我试图在容器内的正文中添加TabBar，但似乎出现错误。

错误： RenderFlex children have non-zero flex but incoming width constraints are unbounded.

代码：

 Container(
              margin: EdgeInsets.only(top: 20),
              child: DefaultTabController(
                  length: 3,
                  child: Row(children: [
                    TabBar(
                        unselectedLabelColor: Colors.redAccent,
                        indicatorSize: TabBarIndicatorSize.label,
                        indicator: BoxDecoration(
                            borderRadius: BorderRadius.circular(50),
                            color: Colors.redAccent),
                        tabs: [
                          Tab(
                            child: Container(
                              decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(50),
                                  border: Border.all(
                                      color: Colors.redAccent, width: 1)),
                              child: Align(
                                alignment: Alignment.center,
                                child: Text("APPS"),
                              ),
                            ),
                          ),
                          Tab(
                            child: Container(
                              decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(50),
                                  border: Border.all(
                                      color: Colors.redAccent, width: 1)),
                              child: Align(
                                alignment: Alignment.center,
                                child: Text("MOVIES"),
                              ),
                            ),
                          ),
                          Tab(
                            child: Container(
                              decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(50),
                                  border: Border.all(
                                      color: Colors.redAccent, width: 1)),
                              child: Align(
                                alignment: Alignment.center,
                                child: Text("GAMES"),
                              ),
                            ),
                          ),
                        ]),
                    TabBarView(children: [
                      Icon(Icons.apps),
                      Icon(Icons.movie),
                      Icon(Icons.games),
                    ])
                  ])),
            )

作为，您可以看到我在容器子容器中有DefaultTabController，其中第一行是TabBar，第二行是TabBarView。

那么，我在这里做什么错了？

此外，我知道通常的惯例是在应用程序栏中添加标签栏。但这对我的设计不起作用。即使必须在appbar中添加标签栏，也必须根据我的设计增加appbar的高度，这就是为什么选择这种方法。

谢谢

Answer 1

用列替换行

DefaultTabController(
          length: 3,
          child: Column(children: [ // Column Here

用展开式包装TabBarView

Expanded(
  child: TabBarView(children: [
    Icon(Icons.apps),
    Icon(Icons.movie),
    Icon(Icons.games),
  ]),
)

Answer 2

我认为您应该将TabBar添加到Scaffold中的appbar字段中，如下所示：

Scaffold(
          appBar: AppBar(
            title: const Text('Tabbed AppBar'),
            bottom: TabBar(
                        unselectedLabelColor: Colors.redAccent,
                        indicatorSize: TabBarIndicatorSize.label,
                        indicator: BoxDecoration(
                            borderRadius: BorderRadius.circular(50),
                            color: Colors.redAccent),
                        tabs: [
                          Tab(
                            child: Container(
                              decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(50),
                                  border: Border.all(
                                      color: Colors.redAccent, width: 1)),
                              child: Align(
                                alignment: Alignment.center,
                                child: Text("APPS"),
                              ),
                            ),
                          ),
                          Tab(
                            child: Container(
                              decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(50),
                                  border: Border.all(
                                      color: Colors.redAccent, width: 1)),
                              child: Align(
                                alignment: Alignment.center,
                                child: Text("MOVIES"),
                              ),
                            ),
                          ),
                          Tab(
                            child: Container(
                              decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(50),
                                  border: Border.all(
                                      color: Colors.redAccent, width: 1)),
                              child: Align(
                                alignment: Alignment.center,
                                child: Text("GAMES"),
                              ),
                            ),
                          ),
          ),

为什么将整个TabBar添加到脚手架后无法正常工作？

2 个答案: