Flutter 開關 Switch、複選框 Checkbox、進度條 Indicator 使用例子

開關 Switch

通過 Switch組件可以實現如下圖中開關的打卡和關閉。當Switch被點擊時，會觸發onChanged回調。

複選框 Checkbox

當Checkbox被點擊時，會觸發的onChanged回調

Switch、Checkbox 例子僞代碼實現

class _MyHomePageState extends State<MyHomePage> {
  bool _switchSelected = true; //維護單選開關狀態
  bool _checkboxSelected = true; //維護複選框狀態
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Switch(
                  value: _switchSelected, //當前狀態
                  onChanged: (value) {
                    //重新構建頁面
                    setState(() {
                      _switchSelected = value;
                    });
                  },
                )
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  _switchSelected ? "打開" : "關閉",
                  style: TextStyle(fontSize: 14.0, color: Colors.grey),
                )
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Checkbox(
                  value: _checkboxSelected,
                  activeColor: Colors.red, //選中時的顏色
                  onChanged: (value) {
                    setState(() {
                      _checkboxSelected = value;
                    });
                  },
                )
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  _checkboxSelected ? "勾選" : "未勾選",
                  style: TextStyle(fontSize: 14.0, color: Colors.grey),
                )
              ],
            ),
          ],
        ),
      ),
    );
  }
}

進度條 Indicator

水平進度條LinearProgressIndicator和圓形進度條CircularProgressIndicator，刷新進度條RefreshIndicator。

水平進度條 LinearProgressIndicator

查看源碼可發現LinearProgressIndicator有以下屬性：

  const LinearProgressIndicator({
    Key key,
    // 表示當前的進度，取值範圍爲[0,1]，如 value:null 則表示是加載中的進度條
    double value,
    // 進度條的背景色
    Color backgroundColor,
    // 進度條的顏色
    Animation<Color> valueColor,
    // 後兩個字段，暫時還未理解，字面意思是語意相關
    String semanticsLabel,
    String semanticsValue,
  }) 

加載中進度條

LinearProgressIndicator(
  backgroundColor: Colors.grey[200],
  valueColor: AlwaysStoppedAnimation(Colors.blue),
),

進度條顯示50%

LinearProgressIndicator(
  backgroundColor: Colors.grey[200],
  valueColor: AlwaysStoppedAnimation(Colors.blue),
  value: .5, 
)

圓形進度條 CircularProgressIndicator

查看源碼可發現CircularProgressIndicator有以下屬性：其他屬性和LinearProgressIndicator相同，默認設置了this.strokeWidth = 4.0,表示進度條的粗細。

  const CircularProgressIndicator({
    Key key,
    double value,
    Color backgroundColor,
    Animation<Color> valueColor,
    this.strokeWidth = 4.0,
    String semanticsLabel,
    String semanticsValue,
  }) 

加載中圓形進度條

CircularProgressIndicator(
  backgroundColor: Colors.grey[200],
  valueColor: AlwaysStoppedAnimation(Colors.blue),
),

進度條顯示50%，會顯示一個半圓

CircularProgressIndicator(
  backgroundColor: Colors.grey[200],
  valueColor: AlwaysStoppedAnimation(Colors.blue),
  value: .5,
),

刷新進度條 RefreshIndicator

查閱資料瞭解到RefreshIndicator有如下屬性：

  const RefreshIndicator({
    Key key,
    @required this.child,// 佈局
    this.displacement = 40.0,// 指示器顯示時距頂部位置
    @required this.onRefresh,// 下拉刷新回調
    this.color,// 指示器顏色
    this.backgroundColor,// 指示器背景顏色
    this.notificationPredicate = defaultScrollNotificationPredicate,
    // 語意化字段
    this.semanticsLabel,
    this.semanticsValue,
  })

下拉刷新例子

僞代碼如下：

class _MyHomePageState extends State<MyHomePage> {
  
  var listData = List<String>.generate(30, (i) => "$i");

  Future<Null> _pullToRefresh() async {
    print("下拉刷新");
    return null;
  }
  
  Widget _buildListView(BuildContext context){
    return ListView.builder(
      itemCount: listData.length,
      itemBuilder: (context, i) {
        return Container(
          height: 45.0,
          child: Text(
            "$i",
            style: TextStyle(fontSize: 18.0),
          ),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: RefreshIndicator(child: _buildListView(context), onRefresh: _pullToRefresh)
    );
  }
}

完~