调整Flutter中DropdownButton的大小

Question

我的目标是实现一个文本框，它有一个下拉箭头，带有历史记录，以便用户可以选择以前的输入..但是..我已经达到了一个点，我想缩小该文本框，因为它占用了不必要的空间。问题是，当历史值发生时，它会占用文本框的所有空间，并且下拉列表中的项目显得太大。

这是在历史数据中具有值之前的显示方式：

我想要实现的是，具有 IP 地址的文本字段宽度，第二张照片上的文本字段可以工作，下拉列表可以包含先前输入的较小元素，以便用户可以选择它们..

这是

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();
    // Load history from storage (if applicable)
  }

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

  void _addToHistory(String text) {
    if (text.isNotEmpty && !_history.contains(text)) {
      _history.insert(0, text);
      // Save history to storage (if applicable)
    }
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          child: TextField(
            controller: _controller,
            onChanged: (value) {
              setState(() {
                _selectedHistory = null;
              });
            },
            onSubmitted: (value) {
              _addToHistory(value);
              _controller.clear();
            },
          ),
        ),
        DropdownButton<String>(
          value: _selectedHistory,
          onChanged: (String? newValue) {
            setState(() {
              _selectedHistory = newValue;
              _controller.text = newValue!;
            });
          },
          items: _history.map<DropdownMenuItem<String>>((String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Text(value),
            );
          }).toList(),
        ),
      ],
    );
  }
}

以及我如何使用小部件本身：

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

Answer 1

如果您希望 DropdownButton 具有固定大小，可以使用 SizedBox 来定义其宽度并避免放置问题。

@override

小部件构建（BuildContext上下文）{ 返回行（ 孩子们： [ 展开（ 孩子：文本字段（ 控制器：_控制器， onChanged：（值）{ 设置状态（（）{ _selectedHistory = null; }); }, 已提交：（值）{ _addToHistory(值); _controller.clear(); }, ), ), 大小框( width: 150, // 根据需要调整宽度 子项：下拉按钮（ isExpanded: true, // 使用 DropdownButton 进行锚定 值：_selectedHistory， onChanged: (字符串? newValue) { 设置状态（（）{ _selectedHistory = newValue; _controller.text = newValue!; }); }, 项目：_history.map（（字符串值）{ 返回下拉菜单项（ 值： 值， 孩子：文本（值）， ）； }).toList(), ), ), ], ）； }