Flutter – DropDownButton 小部件

在本文中，我们将学习如何使用 DropDownButton 并了解它在flutter中的各种属性。我们将使用Flutter DropDownButton 小部件在我们的应用程序中显示一个下拉列表。那么首先让我们看看什么是 DropDownButton。

DropDownButton：在Flutter中，DropDownButton 是一个 Material Design 按钮。 DropDownButton 是一个小部件，我们可以使用它从一组值中选择一个唯一值。它允许用户从多个项目中选择一个值。默认值显示当前选择的值。我们甚至可以在列表中包含一个向下箭头图标。单击 DropDownButton 时，它会打开一个项目列表，用户可以从中选择所需的选项。

Flutter DropDownButton 构造函数：

句法：

DropdownButton(
{Key key, 
@required List> items, 
DropdownButtonBuilder selectedItemBuilder, 
T value, 
Widget hint, 
Widget disabledHint, 
@required ValueChanged onChanged, 
VoidCallback onTap, 
int elevation: 8, 
TextStyle style, 
Widget underline, 
Widget icon, 
Color iconDisabledColor, 
Color iconEnabledColor, 
double iconSize: 24.0, 
bool isDense: false, 
bool isExpanded: false, 
double itemHeight: kMinInteractiveDimension,
Color focusColor, 
FocusNode focusNode, 
bool autofocus: false, 
Color dropdownColor
}
)

Flutter下拉按钮代码：

这是主要的。dart文件

Dart

import 'package:flutter/material.dart';
  
void main() {
  runApp(const MyApp());
}
  
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter DropDownButton',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: const MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}
  
class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);
  
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
  
class _MyHomePageState extends State {
    
  // Initial Selected Value
  String dropdownvalue = 'Item 1';   
  
  // List of items in our dropdown menu
  var items = [    
    'Item 1',
    'Item 2',
    'Item 3',
    'Item 4',
    'Item 5',
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Geeksforgeeks"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            DropdownButton(
                
              // Initial Value
              value: dropdownvalue,
                
              // Down Arrow Icon
              icon: const Icon(Icons.keyboard_arrow_down),    
                
              // Array list of items
              items: items.map((String items) {
                return DropdownMenuItem(
                  value: items,
                  child: Text(items),
                );
              }).toList(),
              // After selecting the desired option,it will
              // change button value to selected value
              onChanged: (String? newValue) { 
                setState(() {
                  dropdownvalue = newValue!;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

输出：

在单击下拉按钮之前：

单击下拉按钮时：用户可以看到从多个项目中选择一个独特的选项。

DropDownButton 的属性：

项目：我们使用此属性来定义要在下拉菜单/列表中定义的各种项目。这是用户可以选择的项目列表
value：值是当前选择的项目。
style：我们使用 style 属性来设置下拉菜单/列表中的文本样式，如颜色、字体大小、字体粗细等。
对齐：对齐定义了提示或所选项目在按钮内的定位方式。
海拔：我们使用海拔属性来提升下拉菜单/列表。
icon：此属性用于向下拉按钮显示图标。
iconSize：该属性用于定义图标的大小。
iconDisabledColor：该属性用于设置下拉按钮禁用时的图标颜色。
iconEnabledColor：该属性用于设置下拉按钮启用时的图标颜色。
dropdownColor：该属性用于显示下拉菜单的背景颜色。
isDense：这个属性降低了按钮的高度。
isExpanded：此属性用于将下拉按钮扩展到全宽。
selectedItemBuilder：当用户从下拉列表中选择一个选项时，它会在按钮上显示该选项。如果我们想显示一些其他文本而不是按钮上的选定选项，我们将使用 selectedItemBuilder。
提示：我们可以显示按钮下拉列表中的选项之一，或者我们可以使用提示默认设置所需的文本。
disabledHint：此属性用于在禁用下拉按钮时显示所需的文本。

想要一个更快节奏和更具竞争力的环境来学习 Android 的基础知识吗？单击此处前往由我们的专家精心策划的指南，旨在让您立即为行业做好准备！