Question

我需要实现以下标签：https://i.stack.imgur.com/12iVI.png

我已经完成了tabBar使用此代码，我没有像所附图片那样获得透明背景

     Column(
      children: <Widget>[
        Material(
          color: Colors.transparent,
          child: TabBar(
            indicatorSize: TabBarIndicatorSize.label,
            unselectedLabelColor: Colors.black,
            indicator: UnderlineTabIndicator(
                borderSide: BorderSide(width: 2.0, color: Color(0xffD65A32)),
                insets: EdgeInsets.symmetric(horizontal: 10.0)),
            isScrollable: true,
            controller: _tabController,
            tabs: [
              Tab(
                child: Text("Maps", style: tabStyle),
              ),
              Tab(
                child: Text("Sections", style: tabStyle),
              ),
              Tab(
                child: Text("Events", style: tabStyle),
              ),
              Tab(
                child: Text("Gallery", style: tabStyle),
              ),
              Tab(
                child: Text("Archives", style: tabStyle),
              )
            ],
          ),
        ),
        Expanded(
          child: TabBarView(
            controller: _tabController,
            children: [
              MyHomePage(),
              Icon(Icons.directions_transit),
              Icon(Icons.directions_bike),
              Icon(Icons.directions_transit),
              Icon(Icons.directions_bike),
            ],
          ),
        ),
      ],
    );

这是我的标签代码

Answer 1

因此，您真正想要的是Stack的行为，而不是Column的行为，因为您希望TabBar位于内容的前面而不是上方。

简单地将Column更改为Stack并将TabBar推到children数组末尾以使其位于最前面应该是技巧。 / p>

这是我建议的代码：

  @override
  Widget build(BuildContext context) {

    TabController controller = TabController(
      initialIndex: 0,
      length: 5,
      vsync: this
    );

    return Stack(
      alignment: Alignment.topCenter,
      children: <Widget>[
        TabBarView(
          controller: controller,
          children: [
            Container(color: Colors.red),
            Container(color: Colors.blue),
            Container(color: Colors.yellow),
            Container(color: Colors.green),
            Container(color: Colors.purple),
          ],
        ),
        Material(
          color: Colors.transparent,
          child: TabBar(
            indicatorSize: TabBarIndicatorSize.label,
            unselectedLabelColor: Colors.black,
            indicator: UnderlineTabIndicator(
                borderSide: BorderSide(width: 2.0, color: Color(0xffD65A32)),
                insets: EdgeInsets.symmetric(horizontal: 10.0)),
            isScrollable: true,
            controller: controller,
            tabs: [
              Tab(
                child: Text("Maps",),
              ),
              Tab(
                child: Text("Sections",),
              ),
              Tab(
                child: Text("Events",),
              ),
              Tab(
                child: Text("Gallery",),
              ),
              Tab(
                child: Text("Archives",),
              )
            ],
          ),
        ),
      ],
    );
  }

在tab中重叠tabbarview与选项卡

1 个答案: