flutter筆記匯總

Switch

先看一下Switch的constructor

const Switch({
  Key key,
  @required bool value,
  @required ValueChanged<bool> onChanged,
  Color activeColor,
  Color activeTrackColor,
  Color inactiveThumbColor,
  Color inactiveTrackColor,
  ImageProvider activeThumbImage,
  ImageProvider inactiveThumbImage,
  MaterialTapTargetSize materialTapTargetSize,
  DragStartBehavior dragStartBehavior: DragStartBehavior.start
})

怎么用看demo

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: Scaffold(
        body: SwitchDemo()
      )
    );
  }
}

class SwitchDemo extends StatefulWidget {
  @override
  _SwitchDemoState createState() => new _SwitchDemoState();
}

class _SwitchDemoState extends State<SwitchDemo> {
  bool _switchSelected = false;

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      child: Switch(
        value: _switchSelected,
        onChanged: (value) {
          setState(() {
            _switchSelected = value;
          });
        }
      )
    );
  }
}

可以看見模擬器中心有個(gè)藍(lán)色的小開關(guān)，點(diǎn)擊可以改變狀態(tài)，這是最基礎(chǔ)的用法 。
這里需要注意的是value只能是bool類型，并且寫死之后點(diǎn)擊開關(guān)是沒有效果的。

activeColor & activeTrackColor & inactiveThumbColor & inactiveTrackColor

先看一下這幾個(gè)顏色，active對(duì)應(yīng)開關(guān)打開，也就是value為true的狀態(tài)，inactive對(duì)應(yīng)開關(guān)關(guān)閉，value為false的狀態(tài)。

Switch(
  value: _switchSelected,
  activeColor: Colors.red,
  activeTrackColor: Colors.yellow,
  inactiveThumbColor: Colors.green,
  inactiveTrackColor: Colors.purple,
  onChanged: (value) {
  setState(() {
    _switchSelected = value;
  });
  }
)

image.png

image.png

activeThumbImage & inactiveThumbImage

這兩個(gè)放一起，開關(guān)圓點(diǎn)的圖片，和顏色一樣active、inactive對(duì)應(yīng)開關(guān)的兩種狀態(tài)。

Switch(
  value: _switchSelected,
  activeThumbImage: AssetImage('./images/logo.png'),
  inactiveThumbImage: AssetImage('./images/logo.png'),
  onChanged: (value) {
    setState(() {
      _switchSelected = value;
    });
  }
)

同一張圖片，為啥不放兩個(gè)不同的圖片，因?yàn)槲覒小?/p>

image.png

image.png

materialTapTargetSize

有效點(diǎn)擊區(qū)域的大小，在flutter筆記（六）-----按鈕 各種Button介紹過

dragStartBehavior

這個(gè)需要注意一下，直接寫會(huì)報(bào)錯(cuò)undefind，需要import 'package:flutter/gestures.dart';。
看一下完整demo

import 'package:flutter/material.dart';
import 'package:flutter/gestures.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: Scaffold(
        body: SwitchDemo()
      )
    );
  }
}

class SwitchDemo extends StatefulWidget {
  @override
  _SwitchDemoState createState() => new _SwitchDemoState();
}

class _SwitchDemoState extends State<SwitchDemo> {
  bool _switchSelected = false;

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      child: Switch(
        value: _switchSelected,
        dragStartBehavior: DragStartBehavior.down,
        onChanged: (value) {
          setState(() {
            _switchSelected = value;
          });
        }
      )
    );
  }
}

可以設(shè)置成start或者down。
源碼里邊對(duì)這個(gè)的解釋是設(shè)置為start的時(shí)候拖拽會(huì)在開始拖動(dòng)時(shí)開始觸發(fā)，設(shè)置為down則在手指按下時(shí)開始觸發(fā)，區(qū)別是start動(dòng)畫更平滑，down反應(yīng)更靈敏。
試了一下，start和down并沒有看出有什么區(qū)別。。。

SwitchListTile

先看一下constructor

const Switch({
  Key key,
  @required bool value,
  @required ValueChanged<bool> onChanged,
  Color activeColor,
  Color activeTrackColor,
  Color inactiveThumbColor,
  Color inactiveTrackColor,
  ImageProvider activeThumbImage,
  ImageProvider inactiveThumbImage,
  Widget title,
  Widget subtitle,  
  bool isThreeLine: false, 
  bool dense,   
  Widget secondary,  
  bool selected: false, 
})

SwitchListTile一部分和Switch是重合的，另一部分和CheckboxList是重合的（忘了的話看這里：flutter筆記（七）-----復(fù)選框CheckBox、CheckboxListTile
）。。。這里就不重復(fù)了。