Flutter中调整带历史记录的DropdownButton与TextField尺寸

要保持文本框固定为IP地址宽度，同时让下拉历史项尺寸更小，可通过以下调整实现：

• 给DropdownButton设置menuMaxWidth属性，限制下拉菜单的最大宽度
• 调整下拉项文本样式（如字号），进一步缩小视觉尺寸
• 确保文本框始终保持指定宽度，不受下拉菜单影响

修改后的HistoryTextField代码：

import 'package:flutter/material.dart';

class HistoryTextField extends StatefulWidget {
  const HistoryTextField({super.key});

  @override
  State<HistoryTextField> createState() => _HistoryTextFieldState();
}

class _HistoryTextFieldState extends State<HistoryTextField> {
  final TextEditingController _controller = TextEditingController();
  final List<String> _history = [];
  String? _selectedHistory;

  @override
  void initState() {
    super.initState();
    // 从存储加载历史记录（如有需要）
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  void _addToHistory(String text) {
    if (text.isNotEmpty && !_history.contains(text)) {
      _history.insert(0, text);
      // 将历史记录保存到存储（如有需要）
    }
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          child: TextField(
            controller: _controller,
            onChanged: (value) {
              setState(() {
                _selectedHistory = null;
              });
            },
            onSubmitted: (value) {
              _addToHistory(value);
              _controller.clear();
            },
            // 可选：设置IP地址专用输入键盘
            keyboardType: TextInputType.numberWithOptions(decimal: true),
          ),
        ),
        const SizedBox(width: 4), // 文本框与下拉箭头间添加间距
        DropdownButton<String>(
          value: _selectedHistory,
          onChanged: (String? newValue) {
            setState(() {
              _selectedHistory = newValue;
              _controller.text = newValue!;
            });
          },
          // 核心：限制下拉菜单最大宽度
          menuMaxWidth: 180,
          // 可选：缩小下拉箭头尺寸
          iconSize: 18,
          items: _history.map<DropdownMenuItem<String>>((String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: SizedBox(
                width: 160, // 固定下拉项文本宽度
                child: Text(
                  value,
                  style: const TextStyle(fontSize: 14), // 缩小文本字号
                  overflow: TextOverflow.ellipsis, // 超长IP地址显示省略号
                ),
              ),
            );
          }).toList(),
        ),
      ],
    );
  }
}

关键修改说明： #

1. menuMaxWidth: 180：直接限制下拉菜单宽度，避免跟随父容器的200px宽度
2. 下拉项文本包裹SizedBox：固定文本区域宽度，配合省略号处理超长IP地址
3. 缩小字号与箭头尺寸：从视觉上压缩下拉项整体大小
4. 添加间距：优化文本框与下拉箭头的布局美观度

组件使用方式保持不变：

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Text("IP地址: "),
    SizedBox(width: 200, child: HistoryTextField())
  ],
)

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