【Flutter 1.5】Flutter的按鈕動作 - FloatingActionButton

May 14, 2019 · 2 min read · flutter dart button  ·
Share on:

接下來，我們要進入按鈕動作的世界了，先介紹FloatingActionButton，其實Android的也叫FloatingActionButton，想想這也沒錯，降低Android開發者的學習曲線。我們現在就來看看吧。

FloatingActionButton

說明

名稱 說明 重點
StatelessWidget 狀態不變的 (點了也沒有反應) Widget build(BuildContext context)
StatefulWidget 狀態可變的 (可以被點擊之類的) @override State createState()
State 點擊之類的反應 setState(fn)

程式碼

  • 請各位允許我使用比較不專業的術語解說吧，在程式中看得出來除了StatelessWidget(按了有反應) / StatefulWidget(按了沒反應)是Widget之外，State也是Widget，而State<MyHomePage>就是指針對MyHomePage的狀態，所以主要的重點就在『_incrementCounter()』這支函數身上，利用setState(fn)去產生點擊的反應。接下來，就請各位用心去體會Flutter的發明者為什麼要這樣分類呢？不就全部都用StatefulWidget就好了嗎？針對Widget的使用上的選擇，也許可以參考一下這篇文章才是。
// main.dart
import 'package:flutter/material.dart';

// 程式進入點 => void main() { return runApp(FloatingActionButtonDemoApp()); }
void main() => runApp(FloatingActionButtonDemoApp());

// Main Class => StatelessWidget (狀態不變的) => build() (建立Widget)
class FloatingActionButtonDemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FloatingActionButton範例',
      theme: ThemeData(primarySwatch: Colors.blue,),        // theme: MaterialApp的佈景主題
      home: MyHomePage(title: 'FloatingActionButton範例'),
      debugShowCheckedModeBanner: false,                    // debugShowCheckedModeBanner: 讓右上角的Debug圖示消失
    );
  }
}

// Sub Class => StatefulWidget (狀態可變的) => createState() (狀態的回傳值)
class MyHomePage extends StatefulWidget {
  final String title;

  MyHomePage({Key key, this.title}) : super(key: key);      // MyHomePage(): 初始化語法

  @override
  _MyHomePageState createState() => _MyHomePageState();     // 箭頭語法: _MyHomePageState createState() { return _MyHomePageState(); }      
}

// Sub Class => State (設定狀態) => setState(fn) (使用它來改變數值) => onPressed: _incrementCounter (函數名稱)
class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title),),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('看看你按了幾次：',),                        // 變數: $_counter / ${_counter}
            Text('$_counter',style: Theme.of(context).textTheme.display1,),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(           // FloatingActionButton: 浮動按鈕
        onPressed: _incrementCounter,                       // 按下觸發的方式名稱: void _incrementCounter()
        tooltip: '加1加1',                                   // 按住按鈕時出現的提示字
        child: Icon(Icons.add),
      ),
    );
  }

  // 按一下就加1
  void _incrementCounter() {
    setState(() { _counter+=1; });
  }
}

結果

範例程式碼下載