如何在 flutter 標簽欄中為未選擇的標簽添加背景顏色？

Question

我正在制作一個帶有多個選項卡的頁面的應用程序。 我希望它看起來像這樣：

我希望未選擇的選項卡具有帶有黑色字體的白色背景。 我設法做到了這一點：

但我找不到更改未選中標簽的背景顏色的選項。 我已使用unselectedLabelColor屬性將未選定選項卡的文本顏色更改為黑色。 我嘗試將標簽欄小部件包裝在一個容器中並為其着色，但它只是填充了它周圍的整個區域，而不僅僅是標簽。 關於如何在不使用任何外部軟件包的情況下獲得它的任何想法？

Answer 1

設置 Scaffold backgroundColor類似於backgroundColor: Colors.grey.shade100,並使用 TabController

class _TabBarDemoState extends State<TabBarDemo>
    with SingleTickerProviderStateMixin {
  late TabController controller = TabController(length: 10, vsync: this)
    ..addListener(() {
      setState(() {});
    });

和

TabBar(
    isScrollable: true,
    controller: controller,
    tabs: List.generate(
      10,
      (index) => AnimatedContainer(
        duration: Duration(milliseconds: 100),
        width: 34,//do as you like
        height: 34,//do as you like
        alignment: Alignment.center,
        decoration: ShapeDecoration(
          color: controller.index == index
              ? Colors.deepPurple
              : Colors.white,
          shape: CircleBorder(),
        ),
        child: Text(
          "$index",
          style: controller.index == index
              ? TextStyle()
              : TextStyle(color: Colors.black),
        ),
      ),
    )),

Answer 2

ListView.separated(
  itemCount: 10,
  scrollDirection: Axis.horizontal,
  shrinkWrap: true,
  separatorBuilder: (BuildContext context, int index) => const SizedBox(width: 5,),
  itemBuilder: (context, index) {
    return GestureDetector(
      onTap: () {
        setState(() {
          isSelected = index;
        });
      },
      child: Container(
        height: 40,
        width: 40,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(25),
          color: isSelected == index ? Colors.pink : Colors.white
        ),
        child: Padding(
          padding: const EdgeInsets.all(10),
          child: Center(child: Text("${index.toString()}", style: TextStyle(color: isSelected == index ? Colors.white : Colors.black),)),
        ),
      ),
    );
  }
),