Flutter基础-050-SwitchListTile

546 阅读1分钟
构造方法
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也可以设定自己的颜色
  })
示例

image.png

代码
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,
        ),
      ),
    );
  }
}