Flutter基礎-050-SwitchListTile

構造方法

const SwitchListTile({
    Key key,
    @required this.value,// 當前switch的值  true  or  false
    @required this.onChanged,// switch開關變化時回撥
    this.activeColor,// 設定該Tile的主色，預設title  subtitle   icon等都顯示該顏色
    this.activeTrackColor,// 開啟時，switch左邊尾部的顏色
    this.inactiveThumbColor,// 關閉時，圓的顏色
    this.inactiveTrackColor,// 關閉時 switch右邊的顏色
    this.activeThumbImage,// 開啟時，也可以給圓設定一個image
    this.inactiveThumbImage,// 關閉時，可以給圓設定一個image
     this.title,  // 主標題   第一行
    this.subtitle,  // 副標題   第二行
    this.isThreeLine = false,   // 是否空出第三行
    this.dense,
    this.secondary, // 左側頂部的widget   一般是個icon，也可以定義成其他
    this.selected = false,// title subtitle secondary是否也採用activeColor的顏色，如果是true預設是activeColor的顏色，但優先順序比較低，各widget也可以設定自己的顏色
  })
複製程式碼

示例

程式碼

class _MyHomePageState extends State<MyHomePage> {
  bool isSelected = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SwitchListTile(
          value: isSelected,
          onChanged: (bool value){
            setState(() {
              isSelected = value;
            });
          },
          secondary: Icon(
            Icons.add_alarm,
//            color: Colors.orange[200],
          ),
          title: new Text("主標題"),
          subtitle: new Text("標題副s標題副s標題副s標題副s標題副s標題"),
          dense: false,
          activeColor: Colors.green[200],// 指定選中時的顏色
          activeTrackColor: Colors.blue[200],
          inactiveTrackColor: Colors.orange[200],
//          inactiveThumbColor: Colors.red[200],
          inactiveThumbImage: AssetImage("images/avatar.jpg"),
          isThreeLine: true,// 是否空出第三行
          selected: true,
        ),
      ),
    );
  }
}
複製程式碼