在Flutter中刷TabBarView()時如何改變Tabs()的形狀？

Question

我一直在嘗試更改TabBar()中Tabs()的形狀，並使用TabBar() () 中的onTap:(){}屬性進行了更改。

但問題是當我在TabBarView()中滑動頁面時我想要相同的功能，所以我也嘗試過這樣做，但我做不到。

當我在TabBarView()中滑動頁面時，我想更改Tabs()的形狀。

下面是我的代碼實現：

import 'package:flutter/material.dart';

class Demo extends StatefulWidget with PreferredSizeWidget {
  @override
  _DemoState createState() => _DemoState();

  @override
  Size get preferredSize => AppBar().preferredSize;
}

class _DemoState extends State<Demo> with SingleTickerProviderStateMixin {
  late TabController _tabController;
  late int _index;

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

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

  @override
  Widget build(BuildContext context) {
    _index = _tabController.index;

    return SafeArea(
      child: Scaffold(
        body: TabBarView(
          controller: _tabController,
          children: [
            Pages(pageName: "Page 0"),
            Pages(pageName: "Page 1"),
            Pages(pageName: "Page 2"),
          ],
        ),
        appBar: AppBar(
          elevation: 0.0,
          bottom: TabBar(
            onTap: (value) {
              setState(() {
                value = _index;
                print("TabIndex: $value");
              });
            },
            labelColor: Colors.black,
            indicator: BoxDecoration(
              color: Colors.white,
              borderRadius: _index == 0
                  ? BorderRadius.only(topRight: Radius.circular(10.0))
                  : _index == 1
                      ? BorderRadius.only(
                          topLeft: Radius.circular(10.0),
                          topRight: Radius.circular(10.0))
                      : BorderRadius.only(topLeft: Radius.circular(10.0)),
            ),
            controller: _tabController,
            tabs: [
              Tab(text: "Tab0"),
              Tab(text: "Tab1"),
              Tab(text: "Tab2"),
            ],
          ),
        ),
      ),
    );
  }
}

class Pages extends StatelessWidget {
  late final String pageName;
  Pages({required this.pageName});
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Text(
          pageName,
          style: TextStyle(
            color: Colors.black,
            fontWeight: FontWeight.bold,
            fontSize: 60.0,
          ),
        ),
      ),
    );
  }
}

我在這里想念什么？ 你能告訴我嗎！！

Answer 1

這種混淆可以通過添加addListners()和_tabController來解決。

以下是我的回答：

我從TabBar()中刪除了onTap:(){}屬性，因為它不是必需的，並且在initState(){}中我添加了帶有_tabController的addListener()方法。 這解決了所有問題，並且Tabs()樣式監聽來自TabBarView()的滑動功能

import 'package:flutter/material.dart';

class Demo extends StatefulWidget with PreferredSizeWidget {
  @override
  _DemoState createState() => _DemoState();

  @override
  Size get preferredSize => AppBar().preferredSize;
}

class _DemoState extends State<Demo> with SingleTickerProviderStateMixin {
  late TabController _tabController;
  int _selectedIndex = 1;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this, initialIndex: 1);

    _tabController.addListener(() {
      setState(() {
        _selectedIndex = _tabController.index;
      });
      print("Current Index: $_selectedIndex");
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: TabBarView(
          controller: _tabController,
          children: [
            Pages(pageName: "Page 0"),
            Pages(pageName: "Page 1"),
            Pages(pageName: "Page 2"),
          ],
        ),
        appBar: AppBar(
          elevation: 0.0,
          bottom: TabBar(
            labelColor: Colors.black,
            indicator: BoxDecoration(
              color: Colors.white,
              borderRadius: _selectedIndex == 0
                  ? BorderRadius.only(topRight: Radius.circular(10.0))
                  : _selectedIndex == 1
                      ? BorderRadius.only(
                          topLeft: Radius.circular(10.0),
                          topRight: Radius.circular(10.0))
                      : BorderRadius.only(topLeft: Radius.circular(10.0)),
            ),
            controller: _tabController,
            tabs: [
              Tab(text: "Tab0"),
              Tab(text: "Tab1"),
              Tab(text: "Tab2"),
            ],
          ),
        ),
      ),
    );
  }
}

class Pages extends StatelessWidget {
  late final String pageName;
  Pages({required this.pageName});
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Text(
          pageName,
          style: TextStyle(
            color: Colors.black,
            fontWeight: FontWeight.bold,
            fontSize: 60.0,
          ),
        ),
      ),
    );
  }
}