6、Flutter Widget(IOS Style) - CupertinoSlider和CupertinoSwitch;

CupertinoSlider

  iOS风格的拖动条。用于从一系列值中进行选择。

  可用于从连续值或离散值集中进行选择。默认值是使用从min到max的连续值范围。要使用离散值，使用divisions的非空值，它表示离散间隔的数量。

  例如，如果min为0.0max为50.0且divisions为5，则可以采用离散值0.0,10.0,20.0,30.0,40.0和50.0的值。

class CupertinoSliderDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context)  =>CupertinoApp(
    home: _HomePage(),
  );
}


class _HomePage extends StatefulWidget{
  @override
  State<StatefulWidget> createState()=>_HomePageState();
}

class _HomePageState extends State<_HomePage>{
  double _value = 25.0;
  double _discreteValue = 20.0;

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: const Text('Sliders'),
      ),
        child: SafeArea(
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: <Widget>[
                Column(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget> [
                    CupertinoSlider(
                      value: _value,
                      min: 0.0,
                      max: 100.0,
                      onChanged: (double value) {
                        setState(() {
                          _value = value;
                        });
                      },
                    ),
                    Text('Cupertino Continuous: ${_value.toStringAsFixed(1)}'),
                  ],
                ),
                Column(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget> [
                    CupertinoSlider(
                      value: _discreteValue,
                      min: 0.0,
                      max: 100.0,
                      divisions: 5,
                      onChanged: (double value) {
                        setState(() {
                          _discreteValue = value;
                        });
                      },
                    ),
                    Text('Cupertino Discrete: $_discreteValue'),
                  ],
                ),
              ],
            ),
          ),
        ),
    );
  }
}
复制代码

其构造函数如下:

 const CupertinoSlider({
    Key key,
    @required this.value,
    @required this.onChanged,
    this.onChangeStart,
    this.onChangeEnd,
    this.min = 0.0,
    this.max = 1.0,
    this.divisions,
    this.activeColor,
  }) 
复制代码

value确定此滚动条的当前选定值。 onChanged值改变的回掉。 onChangeStart对于在值更改开始时调用的回调。 min用户可以选择的最小值，默认为0.0。max用户可以选择的最大值，默认为1.0。divisions划分区域的数量。activeColor用于已选定滚动条部分的颜色,默认为CupertinoColors.activeBlue。

CupertinoSwitch

  iOS风格的开关,用于切换单个设置的开/关状态。Switch本身不保持任何状态。相反，当Switch的状态发生变化时，小部件会调用onChanged回调。大多数使用Switch的小部件都会监听onChanged回调并使用新的value重建Switch以更新Switch的可视外观。

class CupertinoSwitchApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) => CupertinoApp(
    home: _HomePage(),
  );
}


class _HomePage extends StatefulWidget{
  @override
  State<StatefulWidget> createState() =>_HomePageState();

}

class _HomePageState extends State<_HomePage>{
  bool _isOpen = false;

  @override
  Widget build(BuildContext context)  =>  CupertinoPageScaffold(
      child:Center(
        child:  GestureDetector(
          onTap: (){
            setState(() {
              _isOpen = !_isOpen;
            });
          },
          child: CupertinoSwitch(value: _isOpen, onChanged: (value){
            print("the value is $value");
            setState(() {
              _isOpen =value;
            });
          }),
        ),
      )
  );
}
复制代码

其构造函数如下:

const CupertinoSwitch({
    Key key,
    @required this.value,
    @required this.onChanged,
    this.activeColor,
  }) 
复制代码

bool value开关是否开启。ValueChanged<double> onChanged值改变的回掉。