如何在Flutter中创建单选的下拉列表？

huangapple
go评论95阅读模式
英文:

How to Create a Single Selected Dropdown List in Flutter?

问题

我是一个Flutter初学者。如何在Flutter中创建一个单选的下拉列表？像这样。我尝试过，但没有得到我想要的结果。

  1. String dropdownvalue = 'Bahrain';
  3. Container(
  4.   width: 308,
  5.   child: DropdownButton(
  6.     // 初始值
  7.     value: dropdownvalue,
  9.     // 下箭头图标
  10.     icon: const Icon(Icons.keyboard_arrow_down),
  12.     // 项目列表数组
  13.     items: ['Bahrain', 'Option 2', 'Option 3', 'Option 4']
  14.         .map((String item) {
  15.       return DropdownMenuItem(
  16.         value: item,
  17.         child: Text(item),
  18.       );
  19.     }).toList(),
  21.     // 选择所需选项后，它会将按钮的值更改为所选值
  22.     onChanged: (String? newValue) {
  23.       setState(() {
  24.         dropdownvalue = newValue!;
  25.       });
  26.     },
  27.   ),
  28. );
英文:

I am a flutter beginner. How to Create a Single Selected Dropdown List in Flutter?
Like This.<br>
I tried, but I didn't get what I wanted.

String dropdownvalue = 'Bahrain';

  1.             Container(
  2.               width: 308,
  3.               child: DropdownButton(
  4.                 // Initial Value
  5.                 value: dropdownvalue,
  7.                 // Down Arrow Icon
  8.                 icon: const Icon(Icons.keyboard_arrow_down),
  10.                 // Array list of items
  11.                 items: dropdownvalue.map((String dropdownvalue) {
  12.                   return DropdownMenuItem(
  13.                     value: dropdownvalue,
  14.                     child: Text(dropdownvalue),
  15.                   );
  16.                 }).toList(),
  17.                 // After selecting the desired option,it will
  18.                 // change button value to selected value
  19.                 onChanged: (String? newValue) {
  20.                   setState(() {
  21.                     dropdownvalue = newValue!;
  22.                   });
  23.                 },
  24.               ),
  25.             ),

答案1

得分: 1

以下是代码部分的中文翻译：

  1. class _YourState extends State<MyHomePage> {
  2.   List<String> countries = [
  3.     '巴林',
  4.     '印度',
  5.     '伊拉克',
  6.     '美国',
  7.   ];
  9.   String? dropdownvalue;
  11.   @override
  12.   Widget build(BuildContext context) {
  13.     return Scaffold(
  14.       body: Center(
  15.         child: DropdownButton(
  16.           // 初始值
  17.           value: dropdownvalue,
  18.           icon: const Icon(Icons.keyboard_arrow_down),
  19.           isExpanded: true,
  20.           items: countries.map((String dropdownvalue) {
  21.             return DropdownMenuItem(
  22.               value: dropdownvalue,
  23.               child: Text(dropdownvalue),
  24.             );
  25.           }).toList(),
  26.           hint: Text('国家'),
  27.           onChanged: (String? newValue) {
  28.             setState(() {
  29.               dropdownvalue = newValue!;
  30.             });
  31.           },
  32.         ),
  33.       ),
  34.     );
  35.   }
  36. }
英文:

You should have list of items and selectedItem to manage the list and selection state.

  1. class _YourState extends State&lt;MyHomePage&gt; {
  2.   List&lt;String&gt; countries = [
  3.     &#39;Bahrain&#39;,
  4.     &#39;India&#39;,
  5.     &#39;Iraq&#39;,
  6.     &#39;America&#39;,
  7.   ];
  9.   String? dropdownvalue ;
  11.   @override
  12.   Widget build(BuildContext context) {
  13.     return  Scaffold(
  14.       body: Center(
  15.         child: DropdownButton(
  16.           // Initial Value
  17.           value: dropdownvalue,
  18.           icon: const Icon(Icons.keyboard_arrow_down),
  19.           isExpanded: true,
  20.           items: countries.map((String dropdownvalue) {
  21.             return DropdownMenuItem(
  22.               value: dropdownvalue,
  23.               child: Text(dropdownvalue),
  24.             );
  25.           }).toList(),
  26.           hint: Text(&#39;Country&#39;),
  27.           onChanged: (String? newValue) {
  28.             setState(() {
  29.               dropdownvalue = newValue!;
  30.             });
  31.           },
  32.         ),
  33.       ),
  34.     );
  35.   }
  36. }

huangapple
  • 本文由 发表于 2023年2月18日 15:20:15
  • 转载请务必保留本文链接：https://go.coder-hub.com/75491799.html
  • dropdownlistview
  • flutter
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定