时间戳

首页 > 解决方案 > TabBarView 阻止导航

flutter - TabBarView 阻止导航

问题描述

我有以下问题：

我在 Flutter 中有一个带有 TapBarView 的页面。如果客户在另一个 Tap 上单击 TapBar，我想先显示一个对话框，例如“你真的要离开吗？” 带有是/否按钮。如果客户单击“否”，则所选的 Tap 不应更改。

可能吗？如果是...怎么办？

这是示例：

    import 'package:flutter/cupertino.dart';
    import 'package:flutter/material.dart';
     
    void main() => runApp(MyApp());
     
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
        primarySwatch: Colors.blue,
          ),
          home: MyHomePage(),
        );
      }
    }
     
    class MyHomePage extends StatefulWidget {
      @override
      _MyHomePageState createState() => _MyHomePageState();
    }
     
    class _MyHomePageState extends State<MyHomePage> {
      @override
      Widget build(BuildContext context) {
        return DefaultTabController(
          length: 2,
          child: Scaffold(
        appBar: AppBar(
          bottom: TabBar(
            tabs: [
              Tab(icon: Icon(Icons.android), text: "Tab 1",),
              Tab(icon: Icon(Icons.phone_iphone), text: "Tab 2"),
            ],
          ),
          title: Text('TutorialKart - TabBar & TabBarView'),
        ),
        body: TabBarView(
          children: [
            Center( child: Text("Page 1")),
            Center( child: Text("Page 2")),
          ],
        ),
          ),
        );
      }
    }

标签： flutterdart

解决方案

尝试这个。首先，TabBar您可以在其中添加任何小部件，因此您可以在其中放置一个按钮，并且在onPressed函数内部，您可以为用户添加 alertDialog：

 TabBar(
            labelColor: Colors.black,
            tabs: [
              ElevatedButton(
                child: Text('First Tab'),
                onPressed: () {
                        //logic for the AlertDialog and inside the AlertDialog you can Navigate to the other tab
                             },
              ),
              Tab(
                text: 'Second Tab',
              ),
            ],
          ),

请让我知道这对你有没有用。

推荐阅读