概念介紹

我們?cè)陧?xiàng)目中的使用Button大部分是文字形式的按鈕，就是在按鈕上面顯示文字，通過(guò)文字來(lái)了解按鈕的功能。也有一部分是圖標(biāo)形式的按鈕，就是在按鈕上面顯示圖標(biāo)，通過(guò)圖標(biāo)來(lái)了解按鈕的功能，這兩種形式的按鈕分別可以用ElevatedButton和IconButton這兩種組件來(lái)實(shí)現(xiàn)。

有時(shí)候需要在按鈕上面同時(shí)顯示文字和圖標(biāo)，怎么辦？看官莫急，我們可以使用TextButton組件來(lái)實(shí)現(xiàn)。本章回中將介紹詳細(xì)的實(shí)現(xiàn)方法。

實(shí)現(xiàn)方法

我們可以通過(guò)TextButton的icon()方法在按鈕上面同時(shí)顯示文字和圖標(biāo)，下面是該組件提供的屬性：

• icon屬性：主要用來(lái)顯示按鈕上的圖標(biāo)；
• label屬性：主要用來(lái)顯示按鈕上的文字；
• onPressed屬性：主要用來(lái)響應(yīng)按鈕的事件；

我們只需要給前兩個(gè)屬性賦值就可以在按鈕上同時(shí)顯示文字和圖標(biāo),不過(guò)圖標(biāo)只能放在文字前面，不能調(diào)整圖標(biāo)和文字和前后順序，這也算是一個(gè)缺點(diǎn)吧。

此外，我們可以通過(guò)icon屬性來(lái)控制圖標(biāo)的大小和顏色（默認(rèn)的圖標(biāo)顏色和文字顏色相同）。給icon屬性賦值時(shí)需要使用Icon類的對(duì)象，該類提供了相關(guān)的屬性來(lái)控制圖標(biāo)的風(fēng)格，下面是Icon類中常用的屬性：

• size屬性：主要用來(lái)控制圖標(biāo)的大?。?/li>
• color屬性：主要用來(lái)控制圖標(biāo)的顏色；

示例代碼

TextButton.icon(
  icon: Icon(
    Icons.add,
    size: 36.0,
    color: Colors.lightGreen,
  ),
  onPressed: () {},
  label: Text("TextButton"),
),

在上面的代碼中，我們實(shí)現(xiàn)了一個(gè)帶有加號(hào)圖標(biāo)的按鈕，加號(hào)的右側(cè)是文字，圖標(biāo)的顏色是綠色，文字的顏色是默認(rèn)的藍(lán)色。這就是我們想要的"同時(shí)帶有文字和圖標(biāo)的按鈕"。我在這里就不演示程序的運(yùn)行結(jié)果了，建議大家參考Github上ex007文件中的代碼自己動(dòng)手去實(shí)踐。

同類按鈕

在Flutter中除了TextButton可以實(shí)現(xiàn)"同時(shí)顯示文字和圖標(biāo)"的功能外，其它的按鈕組件也可以實(shí)現(xiàn)該功能，它們的用法十分相似，都是借助組件自帶的icon方法來(lái)實(shí)現(xiàn)此功能，我在這里就不一一介紹了，下面是示例代碼，請(qǐng)大家參考：

OutlinedButton.icon(
    onPressed: (){},
    icon: Icon(Icons.delete),
    label:Text("Delete"),
),
ElevatedButton.icon(
    onPressed: (){},
    icon: Icon(Icons.search_rounded),
    label: Text('search'),
),

看官們，關(guān)于"如何在Button中同時(shí)顯示文字和圖標(biāo)"相關(guān)的內(nèi)容就介紹到這里，歡迎大家在評(píng)論區(qū)交流與討論!文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-491214.html

到了這里，關(guān)于第五十六回：如何在Button中同時(shí)顯示文字和圖標(biāo)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！