处理标签栏颤动中的后退按钮

Question

我有一个TabBar，它总共显示 16 个动态显示的类别，

用例：当我点击类别时，假设我点击类别 5，然后如果我按下手机中的后退按钮，我需要转到类别 1，默认情况下我可以显示类别 1另外，如果我按后退按钮 2 次，我也需要关闭应用程序

但是当我按下返回按钮时我需要显示类别 1 我该怎么做，我已经尝试使用 willpopScope 但没有任何反应，这是我到目前为止尝试过的

WillPopScope(
        onWillPop: _onWillPop,
        child: category_list.length != 0
              ? DefaultTabController(
                  length: category_list.length,
                  initialIndex: 1,
                  child: Column(
                    children: <Widget>[
                      Column(
                        children: [
                          Container(
                            constraints: BoxConstraints.expand(height: 40),
                            child: TabBar(
                              controller: _tabController,
                              isScrollable: true,
                              indicatorColor: Color(0xff00ADEE),
                              labelColor: Color(0xff00ADEE),
                              unselectedLabelColor: Colors.black,
                              tabs: getTab(),
                            ),
                          ),
                        ],
                      ),
                      Expanded(
                        child: Container(
                          child: TabBarView(
                              controller: _tabController,
                              children: createDynamicslugWIdget()),
                        ),
                      )
                    ],
                  ),
                )
              : Center(
                  child: CircularProgressIndicator(),
                ),
      )

试图返回索引 1

Future<bool> _onWillPop() async {
    return  _tabController.index==1;
  }

Answer 1

您可以在下面复制粘贴运行完整代码
我用官方的例子来模拟这个案例
您可以设置_tabController.index
代码sn-p

Future<bool> _onWillPop() async {
    print("on will pop");
    if (_tabController.index == 0) {
      await SystemNavigator.pop();
    }

    Future.delayed(Duration(milliseconds: 200), () {
      print("set index");
      _tabController.index = 0;
    });

    print("return");
    return _tabController.index == 0;
  }

工作演示

完整代码

import 'dart:io';

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

class MyTabbedPage extends StatefulWidget {
  const MyTabbedPage({Key key}) : super(key: key);
  @override
  _MyTabbedPageState createState() => _MyTabbedPageState();
}

class _MyTabbedPageState extends State<MyTabbedPage>
    with SingleTickerProviderStateMixin {
  final List<Tab> myTabs = <Tab>[
    Tab(text: '0'),
    Tab(text: '1'),
    Tab(text: '2'),
    Tab(text: '3'),
    Tab(text: '4'),
  ];

  TabController _tabController;

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

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

  Future<bool> _onWillPop() async {
    print("on will pop");
    if (_tabController.index == 0) {
      await SystemNavigator.pop();
    }

    Future.delayed(Duration(milliseconds: 200), () {
      print("set index");
      _tabController.index = 0;
    });

    print("return");
    return _tabController.index == 0;
  }

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: _onWillPop,
      child: Scaffold(
        appBar: AppBar(
          bottom: TabBar(
            controller: _tabController,
            tabs: myTabs,
          ),
        ),
        body: TabBarView(
          controller: _tabController,
          children: myTabs.map((Tab tab) {
            final String label = tab.text.toLowerCase();
            return Center(
              child: Text(
                'This is the $label tab',
                style: const TextStyle(fontSize: 36),
              ),
            );
          }).toList(),
        ),
      ),
    );
  }
}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyTabbedPage(),
    );
  }
}