在 TabBar 中更改圖像顏色 Flutter

Question

單擊圖像時它們會改變顏色，如果用手指拖動它就不會改變，當用戶也想用手指拖動時，有人可以幫我改變圖標的顏色，下面是代碼。

                SliverOverlapAbsorber(
                        handle: NestedScrollView.sliverOverlapAbsorberHandleFor(
                            context),
                        sliver: SliverAppBar(
                          pinned: true,
                          floating: true,
                          automaticallyImplyLeading: false,
                          forceElevated: innerBoxIsScrolled,
                          bottom: TabBar(
                            onTap: (value) {
                              WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
                                setState(() {
                                  index=value;
                                });
                              });
                            },
                            tabs: [
                              Tab(
                                icon: SizedBox(
                                  height: 25,
                                  child: Image.asset(
                                    AppImages.fix,
                                    color:
                                        index == 0 ? Colors.white : Colors.blue,
                                  ),
                                ),
                              ),
                              Tab(
                                icon: SizedBox(
                                  height: 25,
                                  child: Image.asset(
                                    AppImages.home,
                                    color:
                                        index == 1 ? Colors.white : Colors.blue,
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),

Answer 1

請查看有關如何實現TabBar的官方文檔：

https://api.flutter.dev/flutter/material/TabBar-class.html

Answer 2

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
 
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: DefaultTabController(
        length: 2,
        child: Builder(
          builder: (context) {
            final TabController tabController =
                DefaultTabController.of(context)!;
            tabController.addListener(() {
              if (!tabController.indexIsChanging) {
                setState(() {});
              }
            });
            return NestedScrollView(
              headerSliverBuilder: (context, innerBoxIsScrolled) {
                return [
                  SliverOverlapAbsorber(
                    handle: NestedScrollView.sliverOverlapAbsorberHandleFor(
                        context),
                    sliver: SliverAppBar(
                      pinned: true,
                      floating: true,
                      automaticallyImplyLeading: false,
                      forceElevated: innerBoxIsScrolled,
                      bottom: TabBar(tabs: [
                        Tab(
                          icon: Icon(
                            Icons.home,
                            color: tabController.index == 0
                                ? Colors.red
                                : Colors.white,
                          ),
                        ),
                        Tab(
                          icon: Icon(
                            Icons.light,
                            color: tabController.index == 1
                                ? Colors.red
                                : Colors.white,
                          ),
                        ),
                      ]),
                    ),
                  )
                ];
              },
              body: TabBarView(
                controller: tabController,
                children: const [
                  Center(
                    child: Text('page 1'),
                  ),
                  Center(
                    child: Text('page 2'),
                  ),
                ],
              ),
            );
          },
        ),
      ),
    );
  }
}

我的一個朋友幫助了我