如何让Flutter中DropdownButtonFormField的提示文本居中？

要实现下拉框提示文本的垂直居中，你可以通过以下调整解决：

• 替换InputDecoration的hintText为hint，用Center包裹提示文本，强制居中显示
• 配置contentPadding为对称边距，确保输入框内容垂直方向有足够空间，配合居中布局
• 同步设置下拉选项文本居中，保持UI一致性

修改后的完整代码 #

import 'package:clearcommish/utils/constant/app_style.dart';
import 'package:flutter/material.dart';

class CustomDropdown extends StatelessWidget {
  final String labelText;
  final String hintText;
  final List<String> items;
  final String? selectedItem;
  final ValueChanged<String?> onChanged;

  const CustomDropdown({
    super.key,
    required this.labelText,
    required this.hintText,
    required this.items,
    required this.onChanged,
    this.selectedItem,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Padding(
          padding: AppStyle.padding(context, vertical: 10),
          child: Text(
            labelText,
            style: AppStyle.darkSlateGrayGilroy(fontSize: AppStyle.fontSize14),
          ),
        ),
        DropdownButtonFormField<String>(
          value: selectedItem,
          decoration: InputDecoration(
            // 用hint替代hintText，包裹Center实现居中
            hint: Center(
              child: Text(
                hintText,
                style: AppStyle.lightSilverGilroy(fontSize: AppStyle.fontSize14),
              ),
            ),
            // 设置对称内边距，确保垂直方向居中空间
            contentPadding: const EdgeInsets.symmetric(vertical: 16, horizontal: 16),
            enabledBorder: OutlineInputBorder(
              borderSide: const BorderSide(color: AppStyle.lightSilver),
              borderRadius: BorderRadius.circular(15),
            ),
            errorBorder: OutlineInputBorder(
              borderSide: const BorderSide(color: AppStyle.lightSilver),
              borderRadius: BorderRadius.circular(15),
            ),
            focusedErrorBorder: OutlineInputBorder(
              borderSide: const BorderSide(color: AppStyle.lightSilver),
              borderRadius: BorderRadius.circular(15),
            ),
            focusedBorder: OutlineInputBorder(
              borderSide: const BorderSide(color: AppStyle.lightSilver),
              borderRadius: BorderRadius.circular(15),
            ),
          ),
          style: AppStyle.darkSlateGrayGilroy(fontSize: AppStyle.fontSize14),
          dropdownColor: Colors.white,
          items: items.map((String value) {
            return DropdownMenuItem<String>(
              value: value,
              // 下拉选项文本居中，保持UI一致
              child: Center(child: Text(value)),
            );
          }).toList(),
          onChanged: onChanged,
        ),
      ],
    );
  }
}

关键说明 #

1. 提示文本居中：通过Center包裹hint内的文本，直接强制水平垂直居中，不受默认布局约束影响
2. 内边距调整：contentPadding设置对称垂直边距，让输入框内容有足够的垂直空间，避免文本挤压在底部
3. 选项文本同步：下拉选项也用Center包裹，确保选中后显示的文本和提示文本布局一致，整体UI更统一

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