Flutter學習-9-1 switch及SwitchListTile組件

一、switch  開關按鈕

swith為一開關形式的按鈕。

首先要知道的是當第一個vaue的屬性值設為true，那畫面中控制鈕就會在右邊，相反的vaue的屬性值為false，控制鈕就會在左邊。預設值為true，所以在沒有任何設定的情況時，一開始出現在畫面時，swith會是在右方的狀態。

只是如果value這個屬性直接設成true或false，那這個switch  開關按鈕狀態就永遠固定了，不會改變。因為在寫程式的時候，多半把這裡設成一個變數，可在程式中的任意地方寫程式，來改變這個值，這樣就可以達到改變左和右的效果。(因為要在程式的某個地方執行，因為這個變數一般設為全域變數，這樣才能達到通知改變的效果。)如:

bool _switchSelected = true; //設定單選開關狀態，初始值為true

我們可以在任何一個地方，寫程式來改變這個值，但最常會用到需要改變，基本上就是這個switch  開關按鈕的onchange:(value){}裡，當拉動時，switch  開關會傳一個值給onchange裡的value，拉成右邊時，value為true，相反的拉成左邊時，valus為false。因此只要在改變時，將原本value的變數設為這個swith現在拉動的狀態傳回來的value值，並在這裡設上setState，那就可以將畫面中switch  開關按鈕的狀態更新。延續上面的變數_switchSelected，可以寫成下列的寫法:

onChanged: (value) {
  //改變時要進行的活動,可以寫在這裡
  print('switch現在的狀態是$value');  //印出這裡的狀態值看看
  //將_switchSelected設成剛才改變的傳過來的value，並更新畫面。
  setState(() {  
    _switchSelected = value;
  });
},

當原本switch的value值原本是false時，switch狀態改變會產生一個true給onchange裡的參數，

當原本switch的value值原本是true時，switch有改變邊會產生一個false給onchange裡的參數。

switch 中的value值等於true，如果有setState畫面就會變在右邊。

switch 中的value值等於true，如果有setState畫面就會變在右邊。

上面就是大概swith按鈕程式的寫法。其它屬性說明如下，有些屬性是在網頁或是電腦上使用，手機上不會顯現:

const Switch({
  Key? key,
  required this.value, //狀態值
  required this.onChanged, //改變狀態時執行的回調
  this.activeColor, //狀態為'真'時的背景顏色 activeColor:Colors.red,
  this.activeTrackColor,  //狀態為'真'時的滑動按鈕顏色 activeTrackColor:Colors.green,
  this.inactiveThumbColor, //狀態為'假'時的背景顏色 inactiveThumbColor:Colors.red[200],
  this.inactiveTrackColor, //狀態為'假'時的滑動按鈕顏色 inactiveTrackColor:Colors.green[200]
  this.activeThumbImage, //狀態為'真'時的滑動處的圖片 activeThumbImage: AssetImage('images/1.png',)
  this.onActiveThumbImageError,
  this.inactiveThumbImage, //狀態為'假'時的滑動處的圖片 inactiveThumbImage: AssetImage('images/1.png',)
  this.onInactiveThumbImageError,
  this.thumbColor, //軌道的顏色
  this.trackColor, //滑塊的顏色
  this.materialTapTargetSize, //可點選範圍大小 MaterialTapTargetSize.shrinkWrap
  this.dragStartBehavior = DragStartBehavior.start, //一開始滑動按鈕的位置
  this.mouseCursor,
  this.focusColor,
  this.hoverColor,
  this.overlayColor, 
  this.splashRadius,
  this.focusNode,
  this.autofocus = false,

程式範例:

Switch(
  value: _switchSelected,
  //設定它的狀態
  //狀態值
  onChanged: (value) {
    //改變時要進行的活動,可以寫在這裡
    print('switch現在的狀態是$value');  //印出這裡的狀態值看看
    //將_switchSelected設成剛才改變的傳過來的value，並更新畫面。
    setState(() {
      _switchSelected = value;
    });
  },
  activeColor: Colors.red,
  //狀態為true時滑動圓點的的顏色
  activeTrackColor: Colors.green,
  //狀態為true時，滑動處(長條部份的顏色)
  inactiveThumbColor: Colors.red[200],
  //狀態為false時滑動圓點的的顏色
  inactiveTrackColor: Colors.green[200],
  //狀態為false時，滑動處(長條部份的顏色)
  dragStartBehavior: DragStartBehavior.start,
),
//利用SwitchListTile進行加標題字練習

二、SwitchListTile

SwitchListTile與Switch差不多，主要是多了title、subtitle。如果需要在開關按鈕前設定文字說明它的用途，或用文字顯示它目前的狀態就可以用到title和subtitle。title是滑動前的文字說明，而subtitle則是文字說明下面的小標題。

const SwitchListTile({
  Key? key,
  required this.value,
  required this.onChanged,
  this.tileColor,
  this.activeColor,
  this.activeTrackColor,
  this.inactiveThumbColor,
  this.inactiveTrackColor,
  this.activeThumbImage,
  this.inactiveThumbImage,
  this.title,  //主標題
  this.subtitle,  //主標題下的小標
  this.isThreeLine = false,  //告知文字是否為三行，title和subtitle要一起使用，否則會報錯
  this.dense,  //title是否為密集整體的一部份，若設為true，因要配合按鍵高度，會縮小一些。
  this.contentPadding,  //內容的內距 contentPadding: EdgeInsets.all(10)
  this.secondary,  //設定小圖的圖案 secondary: Icon(Icons.access_time)
  this.selected = false, //設成true整個大範圍被選都會改變，否則就只有點選swith按鈕本身才會改變
  this.autofocus = false,
  this.controlAffinity = ListTileControlAffinity.platform,  //文字、小圖和按鈕本身排列的方式
  this.shape,  //形狀
  this.selectedTileColor,  //被選擇後title整個背景的顏色(含文字和小圖)，selected設定為true才會有變化
  this.visualDensity, //畫面適應方式一般為 VisualDensity.comfortable，適手機情況自行調整
  this.focusNode,
  this.enableFeedback,
  this.hoverColor,

範例:

在前先設定變數

bool _switchSelectedListTile = true; //帶標題單選開關狀態的變數，預設為true
String _switchSelectedListTiletext = "允許"; //帶標題單選開關狀態顯現文字的變數

程式寫法

SwitchListTile(
  value: _switchSelectedListTile,
  //設定狀態值
  onChanged: (value) {
    //此設了一個變數決定後面標題文字顯示允許或不充許
    //當滑到真的時候為允許，不為不允許，三元運算子
    value
        ? _switchSelectedListTiletext = "允許"  
        : _switchSelectedListTiletext = "不允許";
    //更新畫面值
    setState(() {
      _switchSelectedListTile = value;
    });
  },
  title: Text('是否允許:$_switchSelectedListTiletext'),
  //標題字要顯現的文字
  //主標題
  dense: false,
  subtitle: Text("小標"),
  //小標題要顯現的文字
  //副標
  secondary: Icon(Icons.access_time), //左邊像icons的小圖
  contentPadding: EdgeInsets.all(10), //內距
  selected: true,
  selectedTileColor: Colors.green,  //整體背景顏色
),

參考資料:

https://blog.csdn.net/ruoshui_t/article/details/93586543

https://cloud.tencent.com/developer/article/1771596

https://iter01.com/419234.html 

https://juejin.cn/post/6844904035833643015  flutter笔记（七） 复选框CheckBox、CheckboxListTile

https://blog.csdn.net/EthanCo/article/details/122282066 第三方checkbox