Flutter 使用Navigator进行局部跳转页面

移动开发 作者: 2024-08-24 22:45:01
老孟导读:Navigator组件使用的频率不是很高,但在一些场景下非常适用,比如局部表单多页填写、底部导航一直存在,每个tab各自导航场景。 Navigator 是管理路由的控件,通常情况下直接使用N
Navigator(
  initialRoute: '/',onGenerateRoute: (RouteSettings settings) {
    WidgetBuilder builder;
    switch (settings.name) {
      case 'home':
        builder = (context) => PageA();
        break;
      case 'user':
        builder = (context) => PageB();
        break;
    }
    return MaterialPageRoute(builder: builder,settings: settings);
  },)
@override
Widget build(BuildContext context) {
  return Center(
    child: Container(
      height: 350,width: 300,child: Navigator(
        initialRoute: '/',onGenerateRoute: (RouteSettings settins) {
          WidgetBuilder builder;
          switch (settins.name) {
            case '/':
              builder = (context) => PageC();
              break;
          }
          return MaterialPageRoute(builder: builder);
        },),);
}
class PageC extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Card(
        child: Column(
          children: <Widget>[
            _buildItem(Icons.clear,'不感兴趣','减少这类内容'),Divider(),_buildItem(Icons.access_alarm,'举报','标题夸张,内容质量差 等',showArrow: true,onPress: () {
              Navigator.of(context).push(MaterialPageRoute(builder: (context) {
                return PageD();
              }));
            }),_buildItem(Icons.perm_identity,'拉黑作者:新华网客户端',''),_buildItem(Icons.account_circle,'屏蔽','军事视频、驾驶员等'),],);
  }

  _buildItem(IconData iconData,String title,String content,{bool showArrow = false,Function onPress}) {
    return Row(
      children: <Widget>[
        Icon(iconData),SizedBox(
          width: 20,Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,children: <Widget>[
              Text(
                title,style: TextStyle(fontSize: 18),Text(
                content,style: TextStyle(
                    color: Colors.black.withOpacity(.5),fontSize: 14),)
            ],!showArrow
            ? Container()
            : IconButton(
                icon: Icon(Icons.arrow_forward_ios),iconSize: 16,onPressed: onPress,);
  }
}
class PageD extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,width: 250,color: Colors.grey.withOpacity(.5),child: Column(
        children: <Widget>[
          Row(
            children: <Widget>[
              IconButton(
                icon: Icon(Icons.arrow_back_ios),onPressed: () {
                  Navigator.of(context).pop();
                },Text('返回'),SizedBox(
                width: 30,Text('举报'),);
  }
}
class TabMain extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _TabMainState();
}

class _TabMainState extends State<TabMain> {
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: _currentIndex,children: <Widget>[
          TabNavigator(0),TabNavigator(1),TabNavigator(2),bottomNavigationBar: BottomNavigationBar(
        onTap: (int index) {
          setState(() {
            _currentIndex = index;
          });
        },currentIndex: _currentIndex,items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(title: Text('首页'),icon: Icon(Icons.home)),BottomNavigationBarItem(title: Text('书籍'),icon: Icon(Icons.book)),BottomNavigationBarItem(
              title: Text('我的'),icon: Icon(Icons.perm_identity)),);
  }
}
class TabNavigator extends StatelessWidget {
  TabNavigator(this.index);

  final int index;

  @override
  Widget build(BuildContext context) {
    return Navigator(
      initialRoute: '/',onGenerateRoute: (RouteSettings settins) {
        WidgetBuilder builder;
        switch (settins.name) {
          case '/':
            builder = (context) => ListPage(index);
            break;
        }
        return MaterialPageRoute(builder: builder);
      },);
  }
}
class ListPage extends StatelessWidget {
  ListPage(this.index);

  final int index;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),body: Center(
        child: RaisedButton(
          child: Text('$index'),onPressed: () {
            Navigator.of(context).push(MaterialPageRoute(builder: (context) {
              return DetailPage();
            }));
          },);
  }
}
class DetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),body: Center(
        child: Text('DetailPage'),);
  }
}
原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_68063.html