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

Melrose發表於2019-03-13
FlutteriOSIDE

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值改變的回掉。

相關文章