Flutter Button(按鈕)

在 Flutter 里有很多的 Button,包括了:MaterialButton、RaisedButton、FloatingActionButton、FlatButton、IconButton、ButtonBar、DropdownButton 等。

一般常用的 Button 是 MaterialButton、IconButton、FloatingActionButton。

MaterialButton 是一個 Materia 風格的按鈕。

new MaterialButton(
    color: Colors.blue,
    textColor: Colors.white,
    child: new Text('點我'),
    onPressed: () {
        // ...
    },
)

一般來說,如果需要點擊事件,就要嵌套一個 Button,因為 Container、Text 等組件都沒有點擊事件。

RaisedButton

RaisedButtonMaterialButton 類似。

new RaisedButton(
    child: new Text('點我'),
    onPressed: () {},
)

FlatButton

FlatButtonMaterialButton 類似,不同的是它是透明背景的。如果一個 Container 想要點擊事件時,可以使用 FlatButton 包裹,而不是 MaterialButton。因為 MaterialButton 默認帶背景,而 FlatButton 默認不帶背景。

new FlatButton(
    child: new Text('點我'),
    onPressed: () {},
)

IconButton

IconButton 顧名思義就是 Icon + Button 的復合體,當某個 Icon 需要點擊事件時,使用 IconButton 最好不過。

new IconButton(
    icon: new Icon(Icons.volume_up),
    tooltip: 'Increase volume by 10%',
    onPressed: () {
        // ...
    },
)

其外,還有已經定義好的 Icon Button:CloseButton、BackButton。他們都有導航返回的能力。

FloatingActionButton

FloatingActionButton 是一個浮動在頁面右下角的浮動按鈕。

new Scaffold(
    // ...
    floatingActionButton: new FloatingActionButton(
        onPressed: () {},
        child: new Icon(Icons.add_a_photo),
        elevation: 3.0,
        highlightElevation: 2.0,
        backgroundColor: Colors.red,        // 紅色
    ),
)

在 Scaffold 里使用的時候,它是一個浮動狀態的按鈕,在其他地方使用,就不會浮動了。

ButtonBar

ButtonBar 是一個布局組件,可以讓 Button 排列在一行。

new ButtonBar(
    children: <Widget>[
        new CloseButton(),
        new BackButton(),
    ],
)
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 1、通過CocoaPods安裝項目名稱項目信息 AFNetworking網絡請求組件 FMDB本地數據庫組件 SD...
    陽明AGI閱讀 16,018評論 3 119
  • 內容 抽屜菜單 ListView WebView SwitchButton 按鈕 點贊按鈕 進度條 TabLayo...
    小狼W閱讀 1,618評論 0 10
  • 如果沒有遇見你 我不知道愛的真諦 如果沒有嫁給你 我不知道什么是婚姻 如果沒有孕育生命 我不懂得母親的不易 如果沒...
    其樂絨絨閱讀 305評論 3 4
  • 云貴高原的秋天好似是來的要早一些,但也難講。 悶熱無風的晴天里,滾燙燙的陽光總照的人渾身發麻,放眼望去找不見不打傘...
    一尾羊閱讀 281評論 0 1
  • 1. 引言 2. "商業周期"為什么是消費者住房周期 觀點: 從長遠來看,典型的經濟衰退都與新的住房開支密切相關。...
    若血閱讀 364評論 0 0