Flutter：如何根据选择的选项卡在滑动时更改 TabBar 之外的文本

Question

我想更改 TabBar 和 TabBarView 之外的文本。如下图所示，如果选项卡选择“转账”选项卡，则选项卡栏上方的文本应为“转账”，如果选项卡选择“请求资金”，则文本应为“请求资金”。我尝试使用TabController，但它只会在滑动时更改 TabBarView 内的文本。

我只能使用 onTap 更改按 TAB 时的文本，但无法通过滑动来实现。

Transfer Tab ImageRequest Tab Image

总结：如何根据 SWIPE 上选择的标签更改标题文本。

class _TransferPageState extends State<TransferPage> with SingleTickerProviderStateMixin {
  List<String> _tabNameList = ["Transfer", "Request Money"];
  String _selectedTabName = "Transfer";

  final List<Tab> transferTabs = <Tab>[
    Tab(text: "Transfer"),
    Tab(text: "Request Money",)
  ];

  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(vsync: this, length: transferTabs.length);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        body: ResponsiveSafeArea(
          builder: (context, size) {
            return Column(
              children: <Widget>[
                TopBarWithText(title: _selectedTabName,),
                SizedBox(height: 20.0,),
                TabBar(
                  onTap: (value) {
                    setState(() {
                      _selectedTabName = _tabNameList[value];
                    });
                  },
                  controller: _tabController,
                  tabs: transferTabs.map((Tab tab) {
                    final String label = tab.text;
                    return Container(
                      height: 30.0,
                      child: Text(
                          label,
                          style: TextStyle(fontSize: 14.0, color: Colors.black)
                      ),
                    );
                  }).toList(),
                ),
                Expanded(
                  flex: 1,
                  child: TabBarView(
                    controller: _tabController,
                    children: transferTabs.map((Tab tab) {
                      final String label = tab.text;
                      return label == "Transfer"
                      ? _transferTabContent()
                      : _requestFundTabContent();
                    }).toList(),
                  ),
                )
              ],
            );
          },
        ),
      ),
    );
  }
}

提前非常感谢=D。

Answer 1

你有一个非常复杂的代码，让我们让它变得简单。将 Tabbar 包装在 Appbar 中而不是 Column 中。这是一个简单的入门代码：

@override
Widget build(BuildContext context) {
  return DefaultTabController(
    length: 2,
    child: Scaffold(
    appBar: AppBar(
      bottom: TabBar(tabs: [
        Tab(
          child: Text('Tab 1')),
        Tab(
         child: Text('Tab 2'),),
      ]),
     ),
    body: TabBarView(
     children: <Widget>[
       Text('first tab items'),
       Text('second tab items'),
      ],),
    ));

我想你会做到的。如果缩进或括号有任何错位，我很抱歉。 编码愉快！