android - 如何在 TabBar 线性未选中选项卡中间设置指示器？

Question

如图所示，如何在选项卡下的行中间显示一个指示器？我尝试了很多方法，但我只得到了在线指标。我希望它在它的中间，如图所示。我想在没有包的情况下用本机来做。

标签： androidflutterdarthybrid-mobile-apptabbar

Answer 1

经过一段时间的努力，我找到了解决方案，并且效果很好。这是我所做的：

Stack(
                  fit: StackFit.passthrough,
                  alignment: Alignment.bottomCenter,
                  children: [
                    Padding(
                      padding: const EdgeInsets.only(left: 16, right: 16, bottom: 1),
                      child: Container(
                        decoration: BoxDecoration(
                          border: Border(
                            bottom: BorderSide(color: Color(0xffc4c4c4), width: 1.0),
                          ),
                        ),
                      ),
                    ),
                    TabBar(
                      isScrollable: true,
                      indicatorWeight: 3,
                      labelPadding: EdgeInsets.only(left: 32, right: 32, bottom: 16, top: 24),
                      indicatorPadding: EdgeInsets.only(left: 16, right: 16),
                      indicatorColor: Color(0xff00C7D1),
                      labelColor: Color(0xff767899),
                      labelStyle: TextStyle(fontFamily: 'Montserrat', fontWeight: FontWeight.bold),
                      unselectedLabelStyle: TextStyle(fontFamily: 'Montserrat'),
                      tabs: [
                        Text("A pagar"),
                        Text("Acordos"),
                        Text('Pagos'),
                        Text('Inativos'),
                      ],
                    ),
                  ],
                )

我希望 Flutter 有朝一日能让它变得更容易。