默認選項卡 controller flutter

Question

我想問一下如何在 DefaultTab 中導航選項卡，我有 DefaultTabController 頁面，我在 OrderList 中將其命名為 OrderList 我有 3 個不同的選項卡，當我單擊按鈕時，我想將其導航到顯示取消頁面的 OrderList . 下面是我的代碼。 如果我直接導航到 OrderList，它將顯示第一頁，這是進度，我希望它導航到第三頁，即取消頁面。

class _OrderListState extends State<OrderList> {


  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Container(
        decoration: BoxDecoration(
          color: Colors.teal[300],
        ),
        child: Scaffold(
          bottomNavigationBar: BottomNavigationBarForAppClient(indexNum: 1),
          backgroundColor: Colors.transparent,
          appBar: AppBar(
            title: const Text('Order List'),
            centerTitle: true,
            flexibleSpace: Container(
              decoration: BoxDecoration(
                color: Colors.teal[300],
              ),
            ),
          ),
          body: Column(
            children: [
              TabBar(tabs: [
                Tab(
                  text: 'In Progress',
                ),
                Tab(
                  text: 'Completed',
                ),
                Tab(
                  text: 'Cancelled',
                ),
              ]),
              Expanded(
                child: TabBarView(children: [
                  ProgressClient(),
                  CompletedClient(),
                  CancelledClient(),
                ]),
              )
            ],
          ),
        ),
      ),
    );
  }
}

這是其他頁面代碼。 正如你在這里看到的，我將它導航到 OrderList() 和 OrderList ProgressClient 中的默認選項卡，我希望它到 go 到 CancelledClient 選項卡

IconButton(
              onPressed: () {
                Navigator.pushReplacement(context,
                    MaterialPageRoute(builder: (context) => OrderList()));
              },
              icon: Icon(Icons.arrow_back, size: 40, color: Colors.white)),

Answer 1

嘗試像推送一樣使用路由參數

Navigator.pushReplacement(
    context,
    MaterialPageRoute(
        builder: (context) => OrderList(),
        settings: RouteSettings(arguments: 2)));

並在 orderList 上使用 TabController。

class OrderList extends StatefulWidget {
  const OrderList({super.key});

  @override
  State<OrderList> createState() => _OrderListState();
}

class _OrderListState extends State<OrderList>
    with SingleTickerProviderStateMixin {
  late final TabController controller = TabController(length: 3, vsync: this);
  @override
  Widget build(BuildContext context) {
    final int? callBackTabIndex =
        ModalRoute.of(context)?.settings.arguments as int?;
    if (callBackTabIndex != null && callBackTabIndex == 2) {
      WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
        controller.animateTo(2);
      });
    }
    return Container(
      decoration: BoxDecoration(
        color: Colors.teal[300],
      ),
      child: Scaffold(
        // bottomNavigationBar: BottomNavigationBarForAppClient(indexNum: 1),
        backgroundColor: Colors.transparent,
        appBar: AppBar(
          title: const Text('Order List'),
          centerTitle: true,
          flexibleSpace: Container(
            decoration: BoxDecoration(
              color: Colors.teal[300],
            ),
          ),
        ),
        body: Column(
          children: [
            TabBar(
              controller: controller,
              tabs: [
                Tab(
                  text: 'In Progress',
                ),
                Tab(
                  text: 'Completed',
                ),
                Tab(
                  text: 'Cancelled',
                ),
              ],
              onTap: (value) {},
            ),
            Expanded(
              child: TabBarView(controller: controller, children: [
                ElevatedButton(
                    onPressed: () {
                      Navigator.of(context).push(MaterialPageRoute(
                        builder: (context) => AnotherWidget(),
                      ));
                    },
                    child: Text("NA")),
                Text("CompletedClient"),
                Text("CancelledClient"),
              ]),
            )
          ],
        ),
      ),
    );
  }
}

對於測試用例

class AnotherWidget extends StatelessWidget {
  const AnotherWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        ElevatedButton(
          onPressed: () {
            Navigator.pushReplacement(
                context,
                MaterialPageRoute(
                    builder: (context) => OrderList(),
                    settings: RouteSettings(arguments: 2)));
          },
          child: Text("NV"),
        ),
      ],
    );
  }
}

Answer 2

class _OrderListState extends State<OrderList> with TickerProviderStateMixin {


    TabBar(
       controller: TabController(initialIndex: 3, vsync: this,length: 3)
       ..

添加controller並設置 initialInde（您想要的頁面索引）