如何让Flutter中DropdownMenu宽度与TextFormField保持一致？

要让DropdownMenu和TextFormField保持一致的宽度，无需固定宽度或使用MediaQuery，按以下步骤修改即可：

• 统一内边距：给DropdownMenu套上和TextFormField完全相同的Padding（水平15，垂直10），确保两者的外部间距一致。
• 自适应宽度：给DropdownMenu设置width: double.infinity，让它自动占满父容器的宽度，和TextFormField的自适应逻辑保持一致。
• 匹配输入框样式：可选添加inputDecorationTheme，让DropdownMenu的边框、标签等样式和TextFormField统一，视觉上更协调。

修改后的DropdownMenu代码片段 #

Padding(
  padding: EdgeInsets.symmetric(horizontal: 15, vertical: 10),
  child: DropdownMenu<String>(
    width: double.infinity, // 自适应父容器宽度
    initialSelection: list.first,
    onSelected: (String? value) {
      setState(() {
        dropdownValue = value!;
      });
    },
    dropdownMenuEntries:
        list.map<DropdownMenuEntry<String>>((String value) {
      return DropdownMenuEntry<String>(value: value, label: value);
    }).toList(),
    // 匹配TextFormField的边框样式
    inputDecorationTheme: const InputDecorationTheme(
      border: OutlineInputBorder(),
      labelText: "选择选项",
    ),
  ),
),

完整修改后代码 #

import 'package:flutter/material.dart';

const List<String> list = <String>['One', 'Two', 'Three', 'Four'];

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('报告问题'),
        ),
        body: MyCustomForm(),
      ),
    );
  }
}

// 自定义表单组件
class MyCustomForm extends StatefulWidget {
  const MyCustomForm({super.key});

  @override
  MyCustomFormState createState() {
    return MyCustomFormState();
  }
}

class MyCustomFormState extends State<MyCustomForm> {
  final _formKey = GlobalKey<FormState>();
  String dropdownValue = list.first;

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 10),
            child: TextFormField(
              validator: (value) {
                if (value == null || value.isEmpty) {
                  return '请输入内容';
                }
                return null;
              },
              decoration: const InputDecoration(
                labelText: '姓名',
                border: OutlineInputBorder(),
                hintText: '姓名',
              ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 10),
            child: TextFormField(
              validator: (value) {
                if (value == null || value.isEmpty) {
                  return '请输入邮箱地址。';
                } else if (!RegExp(
                        r"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9]+\.[a-zA-Z]+")
                    .hasMatch(value)) {
                  return '请输入有效的邮箱地址。';
                }
                return null;
              },
              decoration: const InputDecoration(
                labelText: '邮箱',
                border: OutlineInputBorder(),
                hintText: 'example@example.com',
              ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 10),
            child: DropdownMenu<String>(
              width: double.infinity,
              initialSelection: list.first,
              onSelected: (String? value) {
                setState(() {
                  dropdownValue = value!;
                });
              },
              dropdownMenuEntries:
                  list.map<DropdownMenuEntry<String>>((String value) {
                return DropdownMenuEntry<String>(value: value, label: value);
              }).toList(),
              inputDecorationTheme: const InputDecorationTheme(
                border: OutlineInputBorder(),
                labelText: '选择选项',
              ),
            ),
          ),
          ElevatedButton(
            onPressed: () {
              if (_formKey.currentState!.validate()) {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text('正在处理数据')),
                );
              }
            },
            child: const Text('提交'),
          ),
        ],
      ),
    );
  }
}

修改后，DropdownMenu会自动适配TextFormField的宽度，在任意设备上都能保持对齐，同时样式也会更统一。

内容的提问来源于stack exchange，提问作者Sebi Cioată