如何在Flutter中创建圆角Tab Bar？

Question

我想创建这个选项卡栏。 我尝试将整个容器变成圆角，但不知道如何根据所选的选项卡来设置指示器的圆角。 目前我拥有这个选项卡栏。

import 'package:flutter/material.dart';

class AppTabBar extends StatefulWidget {
  final TabController? tabController;
  const AppTabBar({Key? key, required this.tabController}) : super(key: key);

  @override
  _AppTabBarState createState() => _AppTabBarState();
}

class _AppTabBarState extends State<AppTabBar> {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 40,
      decoration: BoxDecoration(
          borderRadius: BorderRadius.vertical(bottom: Radius.circular(10.0)),
          border: Border.all(color: Color.fromRGBO(27, 189, 198, 1))),
      child: TabBar(
        controller: widget.tabController,
        indicator: BoxDecoration(
          color: Color.fromRGBO(27, 189, 198, 1),
        ),
        labelColor: Color.fromRGBO(238, 248, 254, 1),
        unselectedLabelColor: Color.fromRGBO(238, 248, 254, 1),
        tabs: [
          Tab(
            text: 'first',
          ),
          Tab(
            text: 'second',
          ),
        ],
      ),
    );
  }
}

但是这就是它的样子

- LimitedAsm

Answer 1

您应该仅对底部两侧(右、左)进行圆角处理，并对选项卡进行圆角处理。

 @override
  Widget build(BuildContext context) {
    return Container(
      height: 40,
      decoration: BoxDecoration(
        borderRadius:  BorderRadius.only(
          bottomLeft: Radius.circular(10.0),
          bottomRight: Radius.circular(10.0),
        ),
        border: Border.all(
          color:  Color.fromRGBO(27, 189, 198, 1),
        ),
      ),
      child: ClipRRect(
        borderRadius:  BorderRadius.only(
          bottomLeft: Radius.circular(10.0),
          bottomRight: Radius.circular(10.0),
        ),
        child: TabBar(
          controller: tabController,
          indicator:  BoxDecoration(
            color: Color.fromRGBO(27, 189, 198, 1),
          ),
          labelColor:  Color.fromRGBO(238, 248, 254, 1),
          unselectedLabelColor:  Color.fromRGBO(238, 248, 254, 1),
          tabs:  [
            Tab(
              text: 'first',
            ),
            Tab(
              text: 'second',
            ),
          ],
        ),
      ),
    );
  }

- Amir

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - Community