Flutter开发：如何在图片的上方和下方各添加一个按钮

这个需求可以通过 Flutter 原生的Column垂直布局组件快速实现，完全不需要引入第三方依赖。

效果预览 #

实现思路 #

• 外层使用Column组件承载所有子元素，Column默认会按垂直方向排列所有子组件
• 按「顶部按钮 -> 图片 -> 底部按钮」的顺序放入Column的子元素列表即可
• 可通过Padding组件控制元素之间的间距，通过crossAxisAlignment控制子元素的对齐规则

完整可运行示例代码 #

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '图片按钮布局示例',
      home: Scaffold(
        appBar: AppBar(title: const Text('布局示例')),
        body: Center(
          child: Column(
            // 让Column高度适配内容，不撑满全屏
            mainAxisSize: MainAxisSize.min,
            // 子元素水平居中对齐
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              // 顶部按钮
              ElevatedButton(
                onPressed: () {
                  // 此处添加顶部按钮点击逻辑
                },
                child: const Text('顶部操作按钮'),
              ),
              // 图片区域，上下各加20dp间距
              Padding(
                padding: const EdgeInsets.symmetric(vertical: 20),
                child: Image.network(
                  'https://i.sstatic.net/rXRVI.png',
                  height: 300,
                  fit: BoxFit.contain,
                ),
              ),
              // 底部按钮
              ElevatedButton(
                onPressed: () {
                  // 此处添加底部按钮点击逻辑
                },
                child: const Text('底部操作按钮'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

常用自定义调整项 #

• 调整按钮和图片的间距：修改Padding的edgeInsets参数即可
• 修改按钮样式：通过ElevatedButton.styleFrom方法调整背景色、圆角、字体大小、内边距等属性
• 适配不同屏幕尺寸：可以使用MediaQuery获取屏幕尺寸，动态设置图片的宽高
• 如果需要布局撑满全屏：把Column的mainAxisSize改为MainAxisSize.max即可

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