flutter笔记（八）-----单选开关Switch、SwitchListTile

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;
          });
        }
      )
    );
  }
}

可以看见模拟器中心有个蓝色的小开关，点击可以改变状态，这是最基础的用法。
这里需要注意的是value只能是bool类型，并且写死之后点击开关是没有效果的。

activeColor & activeTrackColor & inactiveThumbColor & inactiveTrackColor

先看一下这几个颜色，active对应开关打开，也就是value为true的状态，inactive对应开关关闭，value为false的状态。

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

image.png

activeThumbImage & inactiveThumbImage

这两个放一起，开关圆点的图片，和颜色一样active、inactive对应开关的两种状态。

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

同一张图片，为啥不放两个不同的图片，因为我懒。

image.png

materialTapTargetSize

有效点击区域的大小，在flutter笔记（六）-----按钮各种Button介绍过

dragStartBehavior

这个需要注意一下，直接写会报错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;
          });
        }
      )
    );
  }
}

可以设置成start或者down。
源码里边对这个的解释是设置为start的时候拖拽会在开始拖动时开始触发，设置为down则在手指按下时开始触发，区别是start动画更平滑，down反应更灵敏。
试了一下，start和down并没有看出有什么区别。。。

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笔记（七）-----复选框CheckBox、CheckboxListTile
）。。。这里就不重复了。

最后编辑于：2019.12.29 17:11:37