Flutter技术咨询：如何在图片下方添加页面跳转按钮？

你的问题核心是误用了Stack（层叠布局）——它是用来重叠元素的，而要实现图片下方放按钮的垂直排列，应该用Column布局。另外要注意GetX路由的正确配置，否则页面跳转不会生效。

以下是修改后的完整代码：

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'Reminder/ui/home_reminder.dart';
import 'Reminder/ui/widgets/button.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    // 用GetMaterialApp替代MaterialApp，才能启用GetX路由功能
    return GetMaterialApp(
      debugShowCheckedModeBanner: false,
      home: const HomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Medicine Reminder App'),
      ),
      // 替换Stack为Column，实现图片与按钮的垂直排列
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch, // 让子元素铺满屏幕宽度
        children: [
          Image.asset(
            'images/MenuImg.jpg',
            width: double.infinity, // 适配不同屏幕宽度，替换固定值600
            height: 200,
            fit: BoxFit.cover,
          ),
          // 在图片下方添加跳转按钮
          Padding(
            padding: const EdgeInsets.all(16.0), // 给按钮加边距，避免贴边
            child: YourCustomButton( // 替换成你自定义的Button组件
              onPressed: () {
                // 触发GetX路由跳转
                Get.to(() => const HomeReminder());
              },
              text: '进入提醒页面', // 根据你的自定义按钮传入对应文字参数
            ),
            // 如果自定义Button未完善，可先用ElevatedButton测试：
            // child: ElevatedButton(
            //   onPressed: () => Get.to(() => const HomeReminder()),
            //   child: const Text('进入提醒页面'),
            // ),
          ),
        ],
      ),
    );
  }
}

关键修改说明： #

• 替换Stack为Column：Column是垂直方向的线性布局，完全适配图片+按钮的上下排列需求
• 图片宽度改为double.infinity：让图片自适应不同设备的屏幕宽度，避免固定值导致的显示异常
• 改用GetMaterialApp：这是使用GetX路由的必要前提，否则Get.to()无法触发页面跳转
• 配置按钮跳转逻辑：通过onPressed绑定Get.to()实现页面跳转，同时用Padding优化按钮的UI间距

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