Flutter中TabBar中的自定义指示器

mlmc2os5  于 2023-04-07  发布在  Flutter
关注(0)|答案(2)|浏览(201)

我想改变我当前的tabBar指示器(蓝线)的愿望UI(圆角只在顶部)-图像附加。我尝试了很多,但无法做到这一点。是否有可能实现它,谁能指导我如何实现这一结果。以下是我的代码:

TabBar(
    controller: _controller,
    isScrollable: true,
    labelColor: Theme.of(context).colorScheme.secondaryContainer,
    unselectedLabelColor: Colors.black,
    indicatorColor: Theme.of(context).colorScheme.secondaryContainer,
    indicatorSize: TabBarIndicatorSize.label,
    indicatorWeight: 5.0,)

当前用户界面:x1c 0d1x
目标UI:

bhmjp9jg

bhmjp9jg1#

这个应该能用

使用插件:

tab_indicator_styler: ^2.0.0参考插件Here

import 'package:tab_indicator_styler/tab_indicator_styler.dart'

Row(
      children: [
        Expanded(
          child: TabBar(
            controller: _controller,
            isScrollable: true,
            labelColor: Colors.white,
            unselectedLabelColor: Colors.grey,
            indicatorColor: Colors.green,
            indicator: MaterialIndicator(
              color: Colors.blue,
              height: 5,
              topLeftRadius: 10,
              topRightRadius: 10,
              bottomLeftRadius: 0,
              bottomRightRadius: 0,
              tabPosition: TabPosition.bottom,
            ),
            indicatorSize: TabBarIndicatorSize.tab,
            indicatorWeight: 5.0,
            tabs: const [
              Tab(
                child: Text('Tab 1'),
              ),
              Tab(
                child: Text('Tab 2'),
              ),
              Tab(
                child: Text('Tab 3'),
              ),
              Tab(
                child: Text('Tab 4'),
              ),
            ],
          ),
        ),
      ],
    ),

输出

bnlyeluc

bnlyeluc2#

尝试添加indicator参数:

indicator: UnderlineTabIndicator(
          borderSide: BorderSide(width: 5.0),
          insets: EdgeInsets.symmetric(horizontal:16.0)
        ),

或者,您可以将选项卡放置在具有底部边框的Container小部件中。

相关问题