Flutter布局调整需求：图片居顶，按钮与文本居中

要实现图片居顶、文本和按钮垂直居中的效果，你需要拆分布局结构，让图片独立占据顶部区域，剩余空间留给文本和按钮并让它们居中。修改后的代码如下：

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:velneoapp/dialogos/exit_dialog.dart';
import 'package:velneoapp/routes/constants.dart';

class EntradaView extends StatelessWidget {
  const EntradaView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Página de Entrada'),
        actions: [
          Tooltip(
            message: "Salir de la aplicación",
            child: IconButton(
                onPressed: () async {
                  final shouldExit = await showExitDialog(context);
                  if (shouldExit) {
                    SystemNavigator.pop();
                    exit(0); //TODO Peligroso, por si las dudas, que al parecer a Apple no le gusta.
                  }
                },
                icon: const Icon(Icons.exit_to_app)),
          )
        ],
      ),
      body: Column(
        children: [
          // 图片居顶
          SizedBox(
              width: MediaQuery.of(context).size.width * 0.8,
              child: Image.asset("assets/images/placeholder.png")),
          // 用Expanded让子Column在剩余空间内垂直居中
          Expanded(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const Text(
                  'Bienvenido/a',
                  style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
                ),
                const SizedBox(height: 32),
                ElevatedButton.icon(
                  icon: const Icon(Icons.login),
                  onPressed: () {
                    Navigator.pushNamedAndRemoveUntil(
                      context,
                      eleccionRoute,
                      (route) => false,
                    );
                  },
                  style: ElevatedButton.styleFrom(
                    padding:
                        const EdgeInsets.symmetric(horizontal: 32, vertical: 16),
                  ),
                  label: const Text(
                    'Entrar',
                    style: TextStyle(fontSize: 18),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

关键改动说明 #

• 移除外层Center组件，让根Column默认占满整个屏幕高度
• 将图片放在根Column最顶部，自然实现居顶效果
• 使用Expanded包裹文本和按钮的子Column，使其自动填充图片下方的剩余空间，并通过mainAxisAlignment: MainAxisAlignment.center让内部元素垂直居中

你也可以用Spacer组件替代Expanded，效果一致：

body: Column(
  children: [
    SizedBox(
        width: MediaQuery.of(context).size.width * 0.8,
        child: Image.asset("assets/images/placeholder.png")),
    const Spacer(), // 占据图片到文本之间的空间
    const Text(
      'Bienvenido/a',
      style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
    ),
    const SizedBox(height: 32),
    ElevatedButton.icon(
      icon: const Icon(Icons.login),
      onPressed: () {
        Navigator.pushNamedAndRemoveUntil(
          context,
          eleccionRoute,
          (route) => false,
        );
      },
      style: ElevatedButton.styleFrom(
        padding:
            const EdgeInsets.symmetric(horizontal: 32, vertical: 16),
      ),
      label: const Text(
        'Entrar',
        style: TextStyle(fontSize: 18),
      ),
    ),
    const Spacer(), // 占据按钮到屏幕底部的空间
  ],
),

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