Flutter樣式未選中的選項卡指示器

我正在嘗試創建一個帶有右上角和左上角邊框半徑的顫動選項卡指示器，并設法將其應用于活動選項卡，但無法弄清楚如何將其應用于未選擇的選項卡指示器。

在我想要實作的下面

這是我的退出代碼

setColor(int tabIndex) {
    if (tabIndex == 0) {
      return const Color(0xFFFBD59E);
    } else if (tabIndex == 1) {
      return const Color(0xFFC8E0DA);
    } else if (tabIndex == 2) {
      return Colors.yellow;
    }
  }

    TabBar(
          labelStyle: const TextStyle(
             fontSize: 18.0, fontWeight: FontWeight.w600),
               onTap: (index) {
                 setState(() {
                          tabIndex = index;
                          setInactiveColor(index);
                        });
                      },
                      controller: _controller,
                      tabs: const [
                        Tab(
                          text: 'Tab 1',
                        ),
                        Tab(
                          text: 'Tab 2',
                        ),
                      ],
                      indicator: ShapeDecoration(
                        shape: const RoundedRectangleBorder(
                          borderRadius: BorderRadius.only(
                            topRight: Radius.circular(50),
                            topLeft: Radius.circular(50),
                          ),
                        ),
                        color: setColor(tabIndex),
                      ),
                    ),

這就是我得到的，無論如何要設定未選擇的選項卡指示器的樣式？

uj5u.com熱心網友回復：

我不認為有一種方法可以Tab僅使用TabBar. 相反，您可以使用另一個小部件而不是TextforTab的孩子。

TabBar(
      labelStyle: const TextStyle(fontSize: 18.0, fontWeight: FontWeight.w600),
      onTap: (index) {
        setState(() {
          tabIndex = index;
        });
      },
      controller: _controller,
      labelPadding: EdgeInsets.zero,
      tabs: [
        Tab(
          child: _buildTab(text: 'Tab 1', color: Colors.red),
        ),
        Tab(
          child: _buildTab(text: 'Tab 2', color: Colors.blue),
        ),
      ],
    ),

_buidTab 方法如下：

_buildTab({required String text, required Color color}) {
    return Container(
      alignment: Alignment.center,
      width: double.infinity,
      decoration: ShapeDecoration(
        shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
            topRight: Radius.circular(50),
            topLeft: Radius.circular(50),
          ),
        ),
        color: color,
      ),
      child: Text(text),
    );
  }

uj5u.com熱心網友回復：

您可以使用 TabController 來了解當前選定的選項卡 這就是您可以更改選項卡顏色的方法

 void initState() {
    super.initState();
    controller = TabController(
      length: 2,
      initialIndex: 1,
      vsync: this,
    );
    controller.addListener(() {
      setState(() {
        activeTabIndex = controller.index;
      });
    });
  }

查看完整代碼：-

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class StudentScreen extends StatefulWidget {
  @override
  _StudentScreenState createState() => _StudentScreenState();
}

class _StudentScreenState extends State<StudentScreen>
    with SingleTickerProviderStateMixin {
  late TabController controller;
  int activeTabIndex = 1;

  @override
  void initState() {
    super.initState();
    controller = TabController(
      length: 2,
      initialIndex: 1,
      vsync: this,
    );
    controller.addListener(() {
      setState(() {
        activeTabIndex = controller.index;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
        length: 2,
        child: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.white,
            elevation: 0,
            bottom: TabBar(
                controller: controller,
                padding: const EdgeInsets.all(0.0),
                isScrollable: false,
                unselectedLabelColor: Colors.black,
                // indicatorPadding: EdgeInsets.zero,
                // indicatorSize: TabBarIndicatorSize.label,
                indicator: const BoxDecoration(
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(30),
                      topRight: Radius.circular(30)),
                  // color: Color(0xFFFBD59E)
                ),
                tabs: [
                  Tab(
                    child: Container(
                      decoration: BoxDecoration(
                        color: activeTabIndex == 0
                            ? const Color(0xFFFBD59E)
                            : const Color(0xFFC8E0DA),
                        // color: Color(0xFFC8E0DA),
                        borderRadius: const BorderRadius.only(
                            topLeft: Radius.circular(30),
                            topRight: Radius.circular(30)),
                        // border:
                        //     Border.all(color: Colors.redAccent, width: 1)
                      ),
                      child: const Align(
                        alignment: Alignment.center,
                        child: Text("Tab one"),
                      ),
                    ),
                  ),
                  Tab(
                    child: Container(
                      decoration: BoxDecoration(
                        color: activeTabIndex == 1
                            ? const Color(0xFFFBD59E)
                            : const Color(0xFFC8E0DA),
                        borderRadius: const BorderRadius.only(
                            topLeft: Radius.circular(30),
                            topRight: Radius.circular(30)),
                        // border:
                        //     Border.all(color: Colors.redAccent, width: 1)
                      ),
                      child: const Align(
                        alignment: Alignment.center,
                        child: Text("Tab two"),
                      ),
                    ),
                  ),
                ]),
          ),
          body: const TabBarView(children: [
            Icon(Icons.apps),
            Icon(Icons.movie),
          ]),
        ));
  }
}

輸出

已選擇第一個選項卡

選擇了第二個選項卡

標籤：扑

上一篇：從JSON轉換時，“String”型別不是“double”型別的子型別

下一篇：如何使用List制作List<List>？