繁体   English   中英

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

[英]How to set indicator in the middle of TabBar linear unselected tabs?

如图所示,如何在选项卡下的行中间显示一个指示器? 我尝试了很多方法,但我只得到了线上的指示器。 我希望它位于中间,如图所示。 我想在没有包的情况下以原生方式进行。

tabBar的图像

经过一段时间的努力,我找到了一个解决方案并且它运行良好。 这是我所做的:

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 有一天能让它变得更容易。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM