如何让Flutter ElevatedButton文本适配按钮且字体统一支持换行？

算力阿峰

2026-7-1

解决方案

问题根源

你的代码里设置了fixedSize: const Size.fromHeight(20)，但同时给按钮加了vertical:10的内边距，这导致按钮内部留给文本的空间被严重压缩，文本根本没有换行的空间，所以之前的换行设置无效。

修改步骤

移除fixedSize限制，让按钮高度自适应文本内容；如果需要统一的最小高度，改用minimumSize来设置。
给Text组件明确开启自动换行，设置softWrap: true和maxLines: null（允许无限换行）。
调整内边距，保证文本有足够的显示空间。

修改后的代码

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

class AnswerButton extends StatelessWidget {
  const AnswerButton({
    super.key,
    required this.answerText,
    required this.onTap,
  });

  final String answerText;
  final void Function() onTap;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(2.0),
      child: ElevatedButton(
        onPressed: onTap,
        style: ElevatedButton.styleFrom(
          // 改用minimumSize保证按钮有最小高度，同时允许自适应内容高度
          minimumSize: const Size.fromHeight(44), // Material Design推荐的按钮最小高度
          backgroundColor: Colors.white,
          foregroundColor: Colors.black,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadiusDirectional.circular(12),
          ),
          padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 20),
        ),
        child: Text(
          answerText,
          style: GoogleFonts.rubik(fontSize: 15),
          softWrap: true,
          maxLines: null,
          textAlign: TextAlign.center, // 可选：让文本居中对齐，优化视觉效果
        ),
      ),
    );
  }
}