美文网首页
flutter路由

flutter路由

作者: wrootlflvl | 来源:发表于2019-06-19 09:17 被阅读0次

    在Flutter中,导航器管理应用程序的路由栈。将路由推入(push)到导航器的栈中,将会显示更新为该路由页面。 从导航器的栈中弹出(pop)路由,将显示返回到前一个路由。
    在main.dart中一般home属性设置的部件为路由的根。如果不通过home属性设置,可以通过initialRoute来设置根路由,initialRoute设置的页面就是app默认显示的页面。

    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'TestApp',
          debugShowCheckedModeBanner: false, // 是否显示debug状态标签
          theme: ThemeData(
            primarySwatch: Colors.yellow, // 设置主题颜色
            highlightColor: Color.fromRGBO(255, 255, 255, 0.5), // 设置主题高亮颜色
            splashColor: Colors.white70, // 设置按钮点击水波纹颜色
            accentColor: Colors.blue,
          ),
    //      home: Home(), // home属性设置的部件为路由的根
          // 如果不用home设置可以直接设置根路由,然后在routes里面定义根路由
          initialRoute: '/form', // 如果这里initialRoute设置初始路由为'/form',那么默认就显示form页面
          // 事先定义好带名字带路由,然后在push的时候可以使用Navigator.pushNamed方法进行跳转
          routes: {
            // '/'表示路由的根,即初始路由,默认要显示的页面
            '/' : (context) => Home(),
            '/form' : (context) => FormDemo(),
          },
        );
      }
    }
    

    页面跳转的方法:

    class ListViewDemo extends StatelessWidget {
      // 定义列表项
      Widget _listItemBuilder(BuildContext context, int index) {
        return Container(
          color: Colors.white,
          margin: EdgeInsets.all(8.0),
          child: Stack(
            children: <Widget>[
              Column(
                children: <Widget>[
                  AspectRatio(aspectRatio: 1/1, child: Image.network(items[index].imageUrl, fit: BoxFit.cover,),),
                  SizedBox(height: 16.0,),
                  Text(
                    items[index].title,
                    style: Theme.of(context).textTheme.title,
                  ),
                  Text(
                    items[index].subTitle,
                    style: Theme.of(context).textTheme.subhead,
                  ),
                  SizedBox(height: 16.0,)
                ],
              ),
              // 添加溅墨渐变效果
              Positioned.fill(
                 child: Material(
                color: Colors.transparent,
                   child: InkWell(
                     splashColor: Colors.white.withOpacity(0.3),
                     highlightColor: Colors.white.withOpacity(0.1),
                     onTap: () {
                       // 使用Navigator.pushNamed方法跳转页面,需要提前在路由中定义好
    //                   Navigator.pushNamed(context, '/home_list_detail');
                       Navigator.of(context).push(
                         MaterialPageRoute(builder: (context) => ListItemDetail(item: items[index]))
                       );
                     },
                   ),
                ),
              ),
            ],
          ),
        );
      }
    
      @override
      Widget build(BuildContext context) {
        // 构造list View
        return ListView.builder(itemCount: items.length, itemBuilder: _listItemBuilder);
      }
    }
    

    相关文章

      网友评论

          本文标题:flutter路由

          本文链接:https://www.haomeiwen.com/subject/opthqctx.html