dart 如何在Flutter中直接导航到兄弟部件而不返回?

csbfibhn  于 2023-07-31  发布在  Flutter
关注(0)|答案(1)|浏览(204)

我有一个根部件和3兄弟部件。

  • FooTab1
  • FooTab2
  • FooTab3

用户可以直接从FooTab1导航到FooTab2或FooTab3,而无需返回根部件。为此,我使用pushReplacement
我的目标是,我希望导航未来从根到火,只有当用户去的三个FooTabRoot(后退按钮)
但是,当我从FooTab1切换到Tab2Tab3时,它会立即触发

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch:
            Colors.blue, // This is the primary color of your application.
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Demo Home Page'),
      ),
      body: ElevatedButton(
        onPressed: () async {
          final result = await Navigator.of(context).push(
            MaterialPageRoute(
              builder: (context) => FooTab1(),
            ),
          );
          print(
              "This should be printed only if going back from FooTab1, FooTab2, FooTab3");
          print(
              "But instead it is printed immediately when going back from FooTab1 to FooTab2");
        },
        child: const Text("Go to FooTab1"),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('FooTab1'),
      ),
      
      body: ElevatedButton(
        onPressed: () {
          Navigator.of(context).pushReplacement(
            MaterialPageRoute(
              builder: (context) => FooTab2(),
            ),
          );
        },
        child: const Text("Go to FooTab2"),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('FooTab2'),
      ),
      body: ElevatedButton(
        onPressed: () {
          Navigator.of(context).pushReplacement(
            MaterialPageRoute(
              builder: (context) => FooTab3(),
            ),
          );
        },
        child: const Text("Go to FooTab3"),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('FooTab3'),
      ),
      body: ElevatedButton(
        onPressed: () {
          Navigator.of(context).pushReplacement(
            MaterialPageRoute(
              builder: (context) => FooTab1(),
            ),
          );
        },
        child: const Text("Go to FooTab1"),
      ),
    );
  }
}

字符串


的数据



我发现了一个临时的工作解决方案,在RootTabs之间使用一个虚拟的代理小部件,但是当用户返回到Root时,它会通过一个空白屏幕创建一个不好看的过渡

z31licg0

z31licg01#

我不确定我能弄清楚你的目的。
但你可以试试这个

  • 使用IndexedStack来 Package 你的标签小部件.
  • 在孩子的时候引导他们
  • 您可以在子节点之间导航,而无需返回到根节点
  • 根上的打印消息,只有当我们按下返回按钮并返回到根屏幕时才打印

代码:

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch:
            Colors.blue, // This is the primary color of your application.
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Demo Home Page'),
      ),
      body: ElevatedButton(
        onPressed: () async {
          final result = await Navigator.of(context).push(
            MaterialPageRoute(
              builder: (context) => BuilderChildTab(),
            ),
          );
          print(
              "This should be printed only if going back from FooTab1, FooTab2, FooTab3");
          print(
              "But instead it is printed immediately when going back from FooTab1 to FooTab2");
        },
        child: const Text("Go to FooTab1"),
      ),
    );
  }
}

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

  @override
  State<BuilderChildTab> createState() => _BuilderChildTabrState();
}

class _BuilderChildTabrState extends State<BuilderChildTab> {
  int _selectedIdx = 0;
  @override
  @override
  Widget build(BuildContext context) {
    return IndexedStack(index: _selectedIdx, children: [
      FooTab1(
        onTap: () {
          _selectedIdx = 1; // go to FooTab2
          setState(() {});
        },
      ),
      FooTab2(
        onTap: () {
          _selectedIdx = 2; // go to FooTab3
          setState(() {});
        },
      ),
      FooTab3(
        onTap: () {
          _selectedIdx = 0; // go to FooTab1
          setState(() {});
        },
      ),
    ]);
  }
}

class FooTab1 extends StatelessWidget {
  const FooTab1({super.key, this.onTap});
  final VoidCallback? onTap;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('FooTab1'),
      ),
      body: ElevatedButton(
        onPressed: onTap,
        child: const Text("Go to FooTab2"),
      ),
    );
  }
}

class FooTab2 extends StatelessWidget {
  const FooTab2({super.key, this.onTap});
  final VoidCallback? onTap;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('FooTab2'),
      ),
      body: ElevatedButton(
        onPressed: onTap,
        child: const Text("Go to FooTab3"),
      ),
    );
  }
}

class FooTab3 extends StatelessWidget {
  const FooTab3({super.key, this.onTap});
  final VoidCallback? onTap;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('FooTab3'),
      ),
      body: ElevatedButton(
        onPressed: onTap,
        child: const Text("Go to FooTab1"),
      ),
    );
  }
}

字符串
我使用新的小部件BuilderChildTab是因为你的FooTab小部件有自己的Appbar。如果它们有相同的Appbar实际上你可以把它们 Package 成body小部件

相关问题