flutter 没有应用栏的选项卡

dfuffjeb 于 2023-03-13 发布在 Flutter

关注(0)|答案(1)|浏览(160)

我正在寻找一些帮助在我的flutter应用程序中创建标签指示器。具体来说，我想创建一个当一个标签被选中时跨越标签的指示器-例如，如果我选择标签3，该指示器应该跨越前两个标签。有什么方法可以实现这一点吗？如下所示-

我试过了。标签和内容都很好，我没有得到我想要的指标。我得到的是-

代码：

DefaultTabController(
  length: 5, // length of tabs
  initialIndex: 0,
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: [
      Padding(
        padding: const EdgeInsets.only(top: 5),
        child: Container(
          child: TabBar(
            isScrollable: true,
            labelColor: Color(0xff5f2dea),
            labelPadding: EdgeInsets.only(left: 8, right: 5),
            indicatorColor: Color(0xff5f2dea),
            indicatorPadding: EdgeInsets.only(left: 8, right: 5),
            unselectedLabelColor: Colors.black,
            tabs: [
              Tab(),
              Tab(),
              Tab(),
              Tab(),
              Tab(),
            ],
          ),
        ),
      ),
      Padding(
        padding: const EdgeInsets.only(left: 10, right: 10),
        child: Container(
          height: 1250,
          decoration: const BoxDecoration(
              border: Border(
                  top: BorderSide(color: Color(0xffababab), width: 0.4))),
          child: TabBarView(children: [
            Container(),
            Container(),
            Container(),
            Container(),
            Container(),
          ]),
        ),
      ),
    ],
  ),
);

flutter

来源：https://stackoverflow.com/questions/75703760/tabs-without-appbar

1条答案

按热度按时间

v8wbuo2f1#

我使用的是Custom indicator，它是在Decoration的帮助下创建的，装饰需要BoxPainter。

class CustomIndicator extends Decoration {
  const CustomIndicator();

  @override
  BoxPainter createBoxPainter([VoidCallback? onChanged]) {
    return MyTabBarPainter();
  }
}

class MyTabBarPainter extends BoxPainter {
  @override
  void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
    final rect = Rect.fromLTRB(
      0,
      configuration.size!.height - 10, //thickens of tabBar
      offset.dx + configuration.size!.width,
      configuration.size!.height,
    );
    canvas.drawRect(rect, Paint()..color = Colors.deepPurple);
  }
}

并提供给

TabBar(
  indicator: CustomIndicator(),

赞(0）回复(0）举报 2023-03-13

我来回答

flutter 没有应用栏的选项卡

1条答案

相关问题

热门标签

最新问答