主页 / coding / 问题 / 79340769
Accepted
Geo
Asked: 2025-01-09 05:12:25 +0800 CST

在 Flutter 中调整 DropdownButton 的大小

  • 772

我的目标是实现一个带有下拉箭头的文本框，其中包含历史记录，以便用户可以选择以前的输入。但是……我遇到了一个问题，我想缩小该文本框，因为它占用了不必要的空间。问题是，当出现历史值时，它会占用文本框的所有空间，并且下拉列表中的项目看起来太大了。 带有历史记录的下拉菜单

在历史数据中有值之前它看起来是这样的： 没有历史数据下拉列表

我想要实现的是，让文本字段的宽度与 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())
                  ],
                )
flutter

2 个回答

  1. Best Answer

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

    SizeBox(
width: 150,
child: DropdownButton<String>(
isExpanded: true
value: _selectedHistory,
onChanged: (String? newValue) {
            setState(() {
--
--
   });
      }
    • 1

  2. 在 SizedBox 内部，您可以使用 TextAlign.left 在下拉菜单中正确对齐文本。

    DropdownButton<String>(
  value: selectItem,
  items: items.map((String value) {
     return DropdownMenuItem<String>(
      value: value,
       width: 200, // MATCH THIS WIDTH TO THE TEXTFIELD
         child: Text (
           value,
                  textAlign: TextAlign.left,
),
),
    • 0

相关问题