Flutter开发中点击图片如何跳转显示新页面？

实现逻辑非常简单，你只需要做三处调整即可：

• 给现有图片所在的组件包裹可点击交互组件，优先选InkWell（自带点击波纹反馈），也可以用GestureDetector实现无默认效果的点击监听
• 在可点击组件的onTap回调中调用Flutter内置路由API Navigator.push完成页面跳转
• 提前定义好你要跳转的目标页面组件

你提供的代码修改示例 #

InkWell(
  // 点击触发跳转逻辑
  onTap: () {
    Navigator.push(
      context,
      MaterialPageRoute(
        // TargetPage替换为你自己的目标页面组件即可
        builder: (context) => const TargetPage(),
      ),
    );
  },
  // 原来的Column直接作为InkWell的子组件
  child: Column(
    children: [
      Stack(children: [
        Center(
          child: Image.network(
            'https://exerciseright.com.au/wp-content/uploads/2020/05/image-from-rawpixel-id-2107431-jpeg-compressed.jpg',
            width: 350,
          ),
        ),
        const Padding(padding: EdgeInsets.fromLTRB(0, 150, 0, 150)),
        const Center(
          child: Text(
            'Best Routines',
            style: TextStyle(
              height: 4,
              fontSize: 40,
              color: Colors.white,
            ),
          ),
        ),
      ]),
//// 你原来的其余代码
    ],
  ),
)

目标页面示例代码 #

class TargetPage extends StatelessWidget {
  const TargetPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("新页面"),
      ),
      body: const Center(
        child: Text("这是点击图片跳转后的页面"),
      ),
    );
  }
}

注意：如果运行时出现context相关报错，请确认你当前的组件在MaterialApp的路由上下文树中，确保Navigator可以获取到有效的路由上下文

内容的提问来源于stack exchange，提问作者Yoel