Flutter

Question

我正在尝试在我的 Flutter 应用程序中添加 TabBar。我将使用 5 个长名称的选项卡。现在，我是这样添加的；

DefaultTabController(
                  length: 5, // length of tabs
                  initialIndex: 0,
                  child: Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: <Widget>[
                    Container(
                      child: TabBar(
                        labelColor: Color(0xffd17842),
                        unselectedLabelColor: Color(0xff52555a),
                        indicator: DotIndicator(
                          color: Color(0xffd17842),
                          distanceFromCenter: 16,
                          radius: 3,
                          paintingStyle: PaintingStyle.fill,
                        ),
                        indicatorColor: Colors.transparent,
                        tabs: [
                          Tab(text: 'Cappuccino'),
                          Tab(text: 'Espresso'),
                          Tab(text: 'Latte'),
                          Tab(text: 'Espresso'),
                          Tab(text: 'Cappuccino'),
                        ],
                      ),
                    ),
                    Container(
                        height: 250, //height of TabBarView
                        decoration: BoxDecoration(
                            border: Border(top: BorderSide(color: Colors.grey, width: 0.5))
                        ),
                        child: TabBarView(children: <Widget>[
                          Container(
                            child: Center(
                              child: Text('Display Tab 1', style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold)),
                            ),
                          ),
                          Container(
                            child: Center(
                              child: Text('Display Tab 2', style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold)),
                            ),
                          ),
                          Container(
                            child: Center(
                              child: Text('Display Tab 3', style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold)),
                            ),
                          ),
                          Container(
                            child: Center(
                              child: Text('Display Tab 4', style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold)),
                            ),
                          ),
                          Container(
                            child: Center(
                              child: Text('Display Tab 5', style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold)),
                            ),
                          ),
                        ])
                    )
                  ])
              )

但是输出是这样的；

我希望它表现得像带有完整长名称的 BouncingScrollPhysics 的 Horizontal SingleChildScrollView。我无法修复...你能帮我吗？

Answer 1

在你的 TabBar 上设置 isScrollable: true,

child: TabBar(
  labelColor: Color(0xffd17842),
  unselectedLabelColor: Color(0xff52555a),
  indicatorColor: Colors.transparent,
  isScrollable: true, // this
  tabs: [

Answer 2

我通过减少选项卡之间的 space 解决了这个问题。 enter image description here

Answer 3

将 isScrollable 属性设置为 true isScrollable: true

Flutter - 选项卡名称不适合 TabBar

Flutter - Tab Names Are Not Fitting In TabBar

tabs