flutter路由

2019-06-19  本文已影响0人  wrootlflvl

在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);
  }
}
上一篇下一篇

猜你喜欢

热点阅读