DropDownButton：调整项目的高度

Question

我有下拉按钮：

DropdownButtonHideUnderline(
    child: DropdownButton(
      isExpanded: true,
      value: value,
      items: widget.items.map((item) {
        return DropdownMenuItem(
          value: item, 
          child: Container(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start, 
              children: [
                Text(
                  item.toString(),
                ),
                Container(
                  child: Text(
                    item.subtitle.toString(),
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                  ),
                  padding: EdgeInsets.only(left: 10.0)
                ),
              ]),
              padding: EdgeInsets.only(bottom: 10),
            )
      }).toList(),
      onChanged: widget.onChanged,
      selectedItemBuilder: (context) {
        return widget.items.map((item) {
          return Align(
            child: Text(
              item.toString(),
            ),
            alignment: Alignment.centerLeft,
          );
        }).toList();
      }
    )
  )

我正在尝试实现一个标题和一个副标题（更小的描述）。标题正在生成“按钮溢出”，字幕溢出到下一项。

是否有机会根据其内容所需的空间调整高度？

编辑：

Example: DartPad

编辑：

为了更清楚：我的目标是允许：

• 至少一行标题，可以允许两行标题
• 可选最多两行字幕

每个项目制作 1-4 行。列表中项目的高度应根据其内容进行调整。

Answer 1

您可以使用DropdownButton2 更改下拉项目的高度。使用 itemHeight 属性来做到这一点。

Answer 2

请检查：

import 'package:flutter/material.dart';

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

class Nav2App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
    home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  String? sid;
  List data = [{"nome":"Acura Acura Acura Acura ","codigo":"1 2 3 4 5 6 7 8 9 10 11 12 1"},
               {"nome":"Agrale Agrale","codigo":" 8 9 10 11 12 1 2 3 4 5 6 7 8 9 10 11 12 1 2 3 4 5 6 "}
              ];
  
  
  PageController _scrollController = PageController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
    children: <Widget>[
      Expanded(
        child: Container(
          width: 200,
          child: InputDecorator(
            decoration: InputDecoration(
              border: OutlineInputBorder(),
            ),
            child: DropdownButtonHideUnderline(
              child: DropdownButton(
                isDense: true,
                isExpanded: true,
                value: sid,
                hint: Text("Select Data",
                    style: TextStyle(color: Colors.black)),
                items: data.map((item) {
                  return DropdownMenuItem(
                    child: Container(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start, 
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Text(
                            item['nome'].toString(),
                          ),
                          Flexible( child:Container(
                            child:  Text(
                              item['codigo'].toString(),
                              maxLines: 2,
                              overflow: TextOverflow.ellipsis,
                            ),
                            padding: EdgeInsets.only(left: 10.0)
                          ),),
                        ]),
                        padding: EdgeInsets.only(bottom: 10),
                      ),
                    value: item['codigo'].toString(),
                  );
                }).toList(),
                onChanged: (value) {
                  setState(() {
                    sid = value as String?;
                  });
                },
              ),
            ),
          ),
        ),
      ),
    ],
  ),
      
    );
  }
}

只需将 Column 中的第二个 Container 包装为带有 Flexible 小部件的字幕。

编辑： 对于多行标题和副标题：

import 'package:flutter/material.dart';

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

class Nav2App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  String? sid;
  List data = [
    {
      "nome": "Acura Acura Acura Acura Acura Acura Acura",
      "codigo": "1 2 3 4 5 7 8 9 10 12 76 7 8 9 22 23 34 45"
    },
    {
      "nome": "Agrale Agrale",
      "codigo": " 8 9 10 11 12 2 23 34 56 78 90 11 12 34"
    }
  ];

  PageController _scrollController = PageController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          Container(
            width: 250,
            child: InputDecorator(
              decoration: InputDecoration(
                border: OutlineInputBorder(),
              ),
              child: DropdownButtonHideUnderline(
                child: DropdownButton(
                  itemHeight: 70,
                  isExpanded: true,
                  isDense: true,
                  value: sid,
                  hint: Text("Select Data",
                      style: TextStyle(color: Colors.black)),
                  items: data.map((item) {
                    return DropdownMenuItem(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Flexible(
                            child: Text(
                              item['nome'].toString(),
                              maxLines: 2,
                              overflow: TextOverflow.ellipsis,
                            ),
                          ),
                          Flexible(
                            child: Text(
                              item['codigo'].toString(),
                              maxLines: 2,
                              overflow: TextOverflow.ellipsis,
                            ),
                          ),
                        ],
                      ),
                      value: item['codigo'].toString(),
                    );
                  }).toList(),
                  onChanged: (value) {
                    setState(() {
                      sid = value as String?;
                    });
                  },
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

让我知道它是否适合你。

Answer 3

试试下面的代码希望它对你有帮助。参考 ListTile here

String? sid;
  List data = [];
  var urls = "https://parallelum.com.br/fipe/api/v1/carros/marcas";

您的 API 调用函数：

Future fetchData() async {
    var result = await http.get(Uri.parse(urls), headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json',
    });
    var jsonData = json.decode(result.body);

    setState(() {
      data = jsonData;
    });
    return jsonData;
  }

在 initState() 中调用您的 API fetchData()

@override
  void initState() {
    fetchData();
    super.initState();
  }

您的下拉小部件：

Container(
    margin: EdgeInsets.all(20),
    width: 200,
    height: 70,
    decoration: BoxDecoration(
      border: Border.all(),
      borderRadius: BorderRadius.circular(
        20,
      ),
    ),
    child: DropdownButtonHideUnderline(
      child: DropdownButton(
        isDense: true,
        isExpanded: true,
        value: sid,
        hint: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text(
            "Select Data",
            style: TextStyle(
              color: Colors.black,
            ),
          ),
        ),
        items: data.map((list) {
          return DropdownMenuItem(
            child: ListTile(
              title: Text(list['nome']),
              subtitle: Text(list['nome']),
            ),  
            value: list['codigo'].toString(),
          );
        }).toList(),
        onChanged: (value) {
          setState(() {
            sid = value as String?;
          });
        },
      ),
    ),
  ),

下拉按钮的结果屏幕 ->

下拉列表的结果屏幕->

选择下拉项后的结果屏幕->