Fatal编程技术网
  • flutter/
  • Flutter 底部导航点击时，颤振弹出至根部

Flutter 底部导航点击时，颤振弹出至根部

flutter

Flutter 底部导航点击时，颤振弹出至根部,flutter,Flutter,我想实现这样一个功能，当用户点击BottomNavigationBarItem时，如果当前页面索引等于点击的索引，就像普通的iOS应用程序一样，则弹出到根目录。 我试着像下面那样。我将MaterialApp中的所有根页面路由设置为index，popintil到根页面，如果currentIndex等于。 然而错误说 颤振：处理手势时抛出以下状态错误： 颤振：不良状态：未来已完成 我怎样才能做到这一点 代码： // MyApp class class MyApp extends State

我想实现这样一个功能，当用户点击
BottomNavigationBarItem
时，如果当前页面索引等于点击的索引，就像普通的iOS应用程序一样，则弹出到根目录。 我试着像下面那样。我将
MaterialApp
中的所有根页面路由设置为
index
，
popintil
到根页面，如果
currentIndex
等于
。
然而错误说

颤振：处理手势时抛出以下状态错误：

颤振：不良状态：未来已完成

我怎样才能做到这一点

代码：


// MyApp class 
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return new MaterialApp(
          routes: <String, WidgetBuilder>{
            '/Page1': (BuildContext context) => new Page1(),
            '/Page2': (BuildContext context) => new Page2(),
            '/Page3': (BuildContext context) => new Page3(),
            '/Page4': (BuildContext context) => new Page4(),
          },
          title: 'Flutter Example',
          home: new HomeScreen(),
        );
      }
    }


  // MyHome class
    class HomeScreen extends StatefulWidget {
      @override
      _HomeScreenState createState() => new _HomeScreenState();
    }

    class _HomeScreenState extends State<HomeScreen> {
      final List<StatelessWidget> pages = [
        new Page1(),
        new Page2(),
        new Page3(),
        new Page3(),
      ];
      final List<String> routes = [
        '/Page1',
        '/Page2',
        '/Page3',
        '/Page4',
      ];

      int currentIndex = 0;

      @override
      Widget build(BuildContext context) {
        return new WillPopScope(
          onWillPop: () => new Future<bool>.value(true),
          child: new CupertinoTabScaffold(
            tabBar: new CupertinoTabBar(
              onTap: (index) {
                if (index == currentIndex) {
                  Navigator.popUntil(context, ModalRoute.withName(routes[index]));
                }
                currentIndex = index;
              },
              backgroundColor: Colors.white,
              activeColor: Colors.blue,
              inactiveColor: Colors.grey,
              items: const <BottomNavigationBarItem>[
                BottomNavigationBarItem(
                  icon: Icon(Icons.looks_one),
                  title: Text('Page1'),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.looks_two),
                  title: Text('Page2'),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.looks_3),
                  title: Text('Page3'),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.looks_4),
                  title: Text('Page4'),
                ),
              ],
            ),
            tabBuilder: (BuildContext context, int index) {
              return new DefaultTextStyle(
                style: const TextStyle(
                  fontFamily: '.SF UI Text',
                  fontSize: 17.0,
                  color: CupertinoColors.black,
                ),
                child: new CupertinoTabView(
                  builder: (BuildContext context) {
                    return pages[index];
                  },
                ),
              );
            },
          ),
        );
      }
    }



//MyApp类
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回新材料PP(
路线：{
“/Page1”：（BuildContext上下文）=>new Page1（），
“/Page2”：（BuildContext上下文）=>new Page2（），
“/Page3”：（BuildContext上下文）=>new Page3（），
“/Page4”：（BuildContext上下文）=>new Page4（），
},
标题：“颤振示例”，
主页：新的主屏幕（），
);
}
}
//我的家庭课
类主屏幕扩展StatefulWidget{
@凌驾
_HomeScreenState createState（）=>新的_HomeScreenState（）；
}
类_homescrenstate扩展状态{
最终列表页=[
新建页面1（），
新建页面2（），
新建第3页（），
新建第3页（），
];
最终列表路线=[
“/Page1”，
“/Page2”，
“/Page3”，
“/Page4”，
];
int currentIndex=0；
@凌驾
小部件构建（构建上下文）{
返回新的Willposcope(
onWillPop:（）=>新的未来值（true），
孩子：新杯子(
tabBar：新的CupertinoTabBar(
onTap：（索引）{
如果（索引==当前索引）{
Navigator.popintil（context，ModalRoute.withName（routes[index]））；
}
currentIndex=索引；
},
背景颜色：Colors.white，
activeColor:Colors.blue，
不活动颜色：颜色。灰色，
项目：常数[
底部导航气压计(
图标：图标（图标。看起来像一个图标），
标题：文本（“第1页”），
),
底部导航气压计(
图标：图标（图标。看起来像两个），
标题：文本（“第2页”），
),
底部导航气压计(
图标：图标（图标3），
标题：文本（“第3页”），
),
底部导航气压计(
图标：图标（图标外观4），
标题：文本（“第4页”），
),
],
),
tabBuilder：（BuildContext，int-index）{
返回新的DefaultTextStyle(
样式：consttextstyle(
fontFamily:“.SF UI文本”，
字体大小：17.0，
颜色：铜色。黑色，
),
孩子：新Cupertinobview(
生成器：（BuildContext上下文）{
返回页[索引]；
},
),
);
},
),
);
}
}

如果我正确理解您的需求，您可以使用
按钮和移动按钮来达到相同的效果


final PageRouteBuilder\u homeRoute=new PageRouteBuilder(
pageBuilder:（构建上下文上下文，u，u）{
返回主屏幕（）；
}, 
);
void_goHome（）{
Navigator.pushandremoveintil（上下文，_homeRoute，（Route r）=>false）；
}



这还可以利用PageRouteBuilder的其他属性。
现在可以实现此功能，因为Flatter v1.1.1将navigatorKey添加到CupertinobView中
（）

首先，必须为每个选项卡声明一个
GlobalKey
，然后将其传递给相应的
cupertinobview
构造函数。
然后，在
cupertinotabar
的
onTap
方法中，如果用户在同一选项卡中点击，则可以使用
firstTabNavKey.currentState.popUntil（（r）=>r.isFirst）
，并弹出到root

完整示例如下：


void main() {
  runApp(MyApp());
}
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
  int currentIndex = 0;

  final GlobalKey<NavigatorState> firstTabNavKey = GlobalKey<NavigatorState>();
  final GlobalKey<NavigatorState> secondTabNavKey = GlobalKey<NavigatorState>();
  final GlobalKey<NavigatorState> thirdTabNavKey = GlobalKey<NavigatorState>();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      home: CupertinoTabScaffold(
        tabBuilder: (BuildContext context, int index) {
          switch (index) {
            case 0:
              return CupertinoTabView(
                navigatorKey: firstTabNavKey,
                builder: (BuildContext context) => FirstTab(),
              );
              break;
            case 1:
              return CupertinoTabView(
                navigatorKey: secondTabNavKey,
                builder: (BuildContext context) => SecondTab(),
              );
              break;
            case 2:
              return CupertinoTabView(
                navigatorKey: thirdTabNavKey,
                builder: (BuildContext context) => ThirdTab(),
              );
              break;
          }
          return null;
        },
        tabBar: CupertinoTabBar(
          items: <BottomNavigationBarItem> [
            BottomNavigationBarItem(
              title: Text('Tab 1'),
            ),
            BottomNavigationBarItem(
              title: Text('Tab 2'),
            ),
            BottomNavigationBarItem(
              title: Text('Tab 3'),
            ),
          ],
          onTap: (index){
            // back home only if not switching tab
            if(currentIndex == index) {
              switch (index) {
                case 0:
                  firstTabNavKey.currentState.popUntil((r) => r.isFirst);
                  break;
                case 1:
                  secondTabNavKey.currentState.popUntil((r) => r.isFirst);
                  break;
                case 2:
                  thirdTabNavKey.currentState.popUntil((r) => r.isFirst);
                  break;
              }
            }
            currentIndex = index;
          },
        ),
      ),
    );
  }
}



void main（）{
runApp（MyApp（））；
}
类MyApp扩展了StatefulWidget{
@凌驾
_MyAppState createState（）=>\u MyAppState（）；
}
类MyAppState扩展了状态{
int currentIndex=0；
final GlobalKey firstTabNavKey=GlobalKey（）；
最终GlobalKey secondTabNavKey=GlobalKey（）；
最终GlobalKey thirdTabNavKey=GlobalKey（）；
@凌驾
小部件构建（构建上下文）{
返回材料PP(
标题：“我的应用程序”，
住家：库珀蒂诺巴塞弗德(
tabBuilder：（BuildContext，int-index）{
开关（索引）{
案例0：
返回CupertinoTabView(
navigatorKey:firstTabNavKey，
生成器：（BuildContext上下文）=>FirstTab（），
);
打破
案例1：
返回CupertinoTabView(
导航工作：第二个TabNavKey，
生成器：（BuildContext上下文）=>SecondTab（），
);
打破
案例2：
返回CupertinoTabView(
导航工作：第三个ABNAVKEY，
生成器：（BuildContext上下文）=>ThirdTab（），
);
打破
}
返回null；
},
tabBar:CupertinoTabBar(
项目：[
底部导航气压计(
标题：文本（“表1”），
),
底部导航气压计(
标题：文本（“表2”），
),
底部导航气压计(
标题：文本（“表3”），
),
],
onTap：（索引）{
//仅当不切换选项卡时返回主页

void main() {
  runApp(MyApp());
}
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
  int currentIndex = 0;

  final GlobalKey<NavigatorState> firstTabNavKey = GlobalKey<NavigatorState>();
  final GlobalKey<NavigatorState> secondTabNavKey = GlobalKey<NavigatorState>();
  final GlobalKey<NavigatorState> thirdTabNavKey = GlobalKey<NavigatorState>();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      home: CupertinoTabScaffold(
        tabBuilder: (BuildContext context, int index) {
          switch (index) {
            case 0:
              return CupertinoTabView(
                navigatorKey: firstTabNavKey,
                builder: (BuildContext context) => FirstTab(),
              );
              break;
            case 1:
              return CupertinoTabView(
                navigatorKey: secondTabNavKey,
                builder: (BuildContext context) => SecondTab(),
              );
              break;
            case 2:
              return CupertinoTabView(
                navigatorKey: thirdTabNavKey,
                builder: (BuildContext context) => ThirdTab(),
              );
              break;
          }
          return null;
        },
        tabBar: CupertinoTabBar(
          items: <BottomNavigationBarItem> [
            BottomNavigationBarItem(
              title: Text('Tab 1'),
            ),
            BottomNavigationBarItem(
              title: Text('Tab 2'),
            ),
            BottomNavigationBarItem(
              title: Text('Tab 3'),
            ),
          ],
          onTap: (index){
            // back home only if not switching tab
            if(currentIndex == index) {
              switch (index) {
                case 0:
                  firstTabNavKey.currentState.popUntil((r) => r.isFirst);
                  break;
                case 1:
                  secondTabNavKey.currentState.popUntil((r) => r.isFirst);
                  break;
                case 2:
                  thirdTabNavKey.currentState.popUntil((r) => r.isFirst);
                  break;
              }
            }
            currentIndex = index;
          },
        ),
      ),
    );
  }
}



onPressed: () {
     Navigator.of(context).pushNamedAndRemoveUntil('/', ModalRoute.withName('/'));
            }