flutter图片点击跳转_Flutter：如何跳转页面？

1.Flutter 中的页面

前面提到过，在 Flutter 中万物皆 Widget，页面自然也是一个 Widget。

只不过是一个全屏的 Widget。

以下这个 Widget 就可以作为一个页面：class SplashPage extends StatelessWidget {

final splashUrl =

'https://raw.githubusercontent.com/chenBingX/img/master/其它/u=343452579,826911251&fm=26&gp=0.jpg';

@override

Widget build(BuildContext context) {

// TODO: implement build

return Stack(

alignment: Alignment(0, 0.75),

children: [

Container(

decoration: BoxDecoration(

image: DecorationImage(image: NetworkImage(splashUrl))),

),

GestureDetector(

// 设置点击事件

onTap: () {

// 使用 Navigator 跳转页面

Navigator.push(context, MaterialPageRoute(builder: (_) {

return HomePage();

}));

},

child: Container(

width: 100,

height: 40,

decoration: BoxDecoration(

borderRadius: BorderRadius.all(Radius.circular(6)),

gradient: LinearGradient(

colors: [Colors.red, Colors.green, Colors.blue],

),

),

child: Center(

child: Text(

"Next",

style: TextStyle(color: Colors.white, fontSize: 16),

))),

),

],

);

}

}

复制代码

应用页面：void main() => runApp(MaterialApp(

title: 'Flutter',

home: SplashPage(),

));

复制代码

看看效果：

2.使用 Navigator 跳转页面

在 Flutter 中，使用 Navigator 来进行页面跳转。

一个简单的跳转页面的例子：Navigator.push(context, MaterialPageRoute(builder: (_) {

// 目标页面，即一个 Widget

return DetailScreen();

复制代码

如果想要关闭一个页面，可以这样做：Navigator.pop(context);

复制代码

我们再构建一个 Scaffold 风格的页面，看看跳转的效果。class HomePage extends StatelessWidget {

@override

Widget build(BuildContext context) {

// TODO: implement build

return Scaffold(

appBar: AppBar(

title: Text('Home Page'),

),

body: Container(

color: Colors.white,

child: Center(

child: Text('This Home Pahe'),

),

),

);

}

}

复制代码

看看效果：

3.通过页面名称跳转

Navigator 支持通过页面名称跳转到指定页面。

当然，你需要先注册页面，在 MaterialApp 的 routes 中。MaterialApp(

// 设置第一个页面，即启动页

initialRoute: '/',

routes: {

// 注册一个页面

'/': (context) => FirstScreen(),

// 注册第二个页面

'/second': (context) => SecondScreen(),

},

);

复制代码

现在，你可以通过刚刚注册的页面名称来跳转一个页面，就像这样：Navigator.pushNamed(context, '/second');复制代码

如何找到我？