1. 概念介紹

我們?cè)诒菊禄刂薪榻B的DropdownButton組件和上一章回中介紹的DropdownMenu組件類似，主要用來(lái)實(shí)現(xiàn)下拉菜單，不過(guò)該組件在外觀上像一個(gè)帶圖標(biāo)的按鈕，
點(diǎn)擊按鈕后會(huì)彈出下拉菜單，下面是該組件的外觀效果圖。本章回中將詳細(xì)介紹該組件的使用方法。033

2. 使用方法

下拉菜單通過(guò)DropdownButton組件和DropdownMenuItem組件一起配合實(shí)現(xiàn)，DropdownButton組件主要控制菜單的圖標(biāo)和響應(yīng)點(diǎn)擊事件，DropdownMenuItem
組件主要控制菜單中顯示的內(nèi)容。接下來(lái)我們分別介紹這兩種組件的用法。

2.1 DropdownButton

該組件提供了相關(guān)的屬性來(lái)控制下拉菜單的圖標(biāo)和功能，下面是常用的屬性：

• value屬性：主要用來(lái)控制按鈕上顯示的內(nèi)容，該內(nèi)容也是下拉菜單中被選擇的內(nèi)容；
• dropdownColor屬性：主要用來(lái)控制下拉菜單的背景顏色；
• style屬性：主要用來(lái)控制下拉菜單中文字的顏色，value屬性中的顏色也受該屬性控制；
• icon屬性：主要用來(lái)控制按鈕上顯示的圖標(biāo)；
• iconSize屬性：主要用來(lái)控制按鈕上圖標(biāo)的大?。?/li>
• items屬性：主要用來(lái)控制下拉菜單中的內(nèi)容，它是一個(gè)List,可以存放多個(gè)內(nèi)容；
• onChanged屬性：主要用來(lái)響應(yīng)按鈕的點(diǎn)擊事件，它是方法類型，點(diǎn)擊按鈕時(shí)回調(diào)此屬性對(duì)應(yīng)的方法；
  上面介紹的這些屬性中幾乎都會(huì)用到，此外該組件還提供了其它的屬性，大家可以參考官方文檔的介紹；我們重點(diǎn)介紹一下items屬性，它的類型是DropdownMenuItem，
  而且是List類型，也就是說(shuō)它可以存放多個(gè)菜單項(xiàng)。此外，style屬性是TextStyle類型，開(kāi)始我以為該屬性可以控制按鈕的外觀風(fēng)格，使用后才發(fā)現(xiàn)它只能控制按鈕
  上顯示文字的風(fēng)格。那么如何修改按鈕的外觀風(fēng)格？沒(méi)有辦法修改，至少我沒(méi)有找到修改的方法，這也算是該組件的缺點(diǎn)吧。

2.2 DropdownMenuItem

該組件提供了相關(guān)的屬性來(lái)控制菜單項(xiàng)的相關(guān)內(nèi)容與風(fēng)格，下面是常用的屬性：

• vlaue屬性：類似map中的key，它不會(huì)顯示在菜單中，主要用來(lái)識(shí)別某個(gè)菜單項(xiàng)；
• child屬性：主要用來(lái)控制菜單項(xiàng)中顯示的內(nèi)容，可以是文本或者圖片；
  該組件還提供了其它的屬性，主要用來(lái)修改菜單項(xiàng)的風(fēng)格，比較顏色等。我們?cè)谶@里就不詳細(xì)介紹了，我重點(diǎn)說(shuō)一下value屬性，它和DropdownButton中的value屬性
  相同，這兩個(gè)value屬性的值必須保持一致。該屬性還會(huì)出現(xiàn)在onChanged屬性對(duì)應(yīng)的方法參數(shù)中，我們可以從參數(shù)中獲取到當(dāng)前被選擇的菜單項(xiàng)的value。

3. 示例代碼

List<DropdownMenuItem<String>> itemList = [
  ///value和onChanged中的value一致，child是菜單項(xiàng)中顯示的內(nèi)容
  const DropdownMenuItem(value: "one",child:Text("niceDay"), ),
  const DropdownMenuItem(value: "two",child: Text("today"),),
  const DropdownMenuItem(value: "three",child: Text("yesterday"),),
];

String itemSelectedValue = "two";

DropdownButton(
  ///這個(gè)顯示的是被選擇菜單項(xiàng)的值，它的類型與DropdownMenuItem中的泛型一致
  value: itemSelectedValue,
  ///下拉菜單的背景顏色
  dropdownColor: Colors.yellow,
  ///下拉菜單中文字的顏色
  style: const TextStyle(color: Colors.blue),
  iconSize: 32,
  icon: const Icon(Icons.schedule),
  items: itemList,
  onChanged: (value){
    debugPrint("it is : $value");
    setState(() {
      itemSelectedValue = value.toString();
    });
  },
),

上面的示例代碼演示了DropdownButton和DropdownMenuItem組件的用法，我們創(chuàng)建了一個(gè)包含三個(gè)菜單項(xiàng)的下拉菜單按鈕，點(diǎn)擊按鈕上的圖標(biāo)就會(huì)彈出菜單項(xiàng)供我
們選擇，選擇某個(gè)菜單項(xiàng)目后菜單消失，同時(shí)把被選擇的菜單項(xiàng)顯示在按鈕上面。下面是該程序的運(yùn)行效果圖。034

4. 內(nèi)容總結(jié)

最后，我們對(duì)本章回的內(nèi)容做一個(gè)全面的總結(jié)：

• 下拉菜單按鈕通過(guò)DropdownButton和DropdownMenuItem組件一起實(shí)現(xiàn)；
• DropdownButton組件主要控制按鈕顯示的內(nèi)容和響應(yīng)點(diǎn)擊按鈕事件；
• DropdownMenuItem組件主要控制菜單項(xiàng)的內(nèi)容和風(fēng)格；
• DropdownButton和DropdownMenuItem組件都提供了相關(guān)的屬性來(lái)控制下拉菜單；

5. 經(jīng)驗(yàn)分享

我們通過(guò)四種不同的組件實(shí)現(xiàn)了下拉菜單功能，我感覺(jué)使用DropdownMenu組件的場(chǎng)景更加多一些，因?yàn)樗耐庥^是一個(gè)輸入框，在輸入框中顯示被選擇菜單的內(nèi)容，而
使用DropdownButton的場(chǎng)景比較少，它的外觀是一個(gè)帶圖標(biāo)的按鈕，菜單中被選擇的內(nèi)容顯示在按鈕上，和普通的按鈕十分相似，但是不能修改按鈕的外觀。大家可以
結(jié)合自己項(xiàng)目的需求選擇不同的組件來(lái)實(shí)現(xiàn)下拉菜單功能。
看官們，與"DropdownButton組件"相關(guān)的內(nèi)容就介紹到這里，歡迎大家在評(píng)論區(qū)交流與討論!文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-810562.html

到了這里，關(guān)于第二百七十七回的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！