flutter滑动按钮

作者: 跨界师 | 来源:发表于2021-06-28 20:36 被阅读0次

    对于想实现滑动按钮功能的人来说,其实还是非常简单的设置,如下图:

    image.png

    实现这样功能的代码其实不难,这里谢了一个demo,供参考:

    import 'package:flutter/material.dart';
    import 'package:flutter/cupertino.dart';
    
    /**
     * 滑动按钮
     */
    void main() {
      runApp(myApp());
    }
    
    class myApp extends StatelessWidget{
    
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return MaterialApp(
          title: 'fade demo',
          theme: ThemeData(
            primarySwatch: Colors.blue
          ),
          home: CupertinoSliderDemo()
        );
      }
    }
    
    class CupertinoSliderDemo extends StatefulWidget{
      @override
      State<StatefulWidget> createState() {
        // TODO: implement createState
        return _CupertinoSliderDemo();
      }
    }
    
    class _CupertinoSliderDemo extends State<CupertinoSliderDemo>{
    
      double _value = 1.0;
    
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return Center(
          child: CupertinoSlider(
            value: _value,
            onChanged: (double value) {
              setState(() {
                print('$value');
                _value = value;
              });
            },
            min: 1.0,
            max: 10.0,
            divisions: 5,
            activeColor: Colors.red,
          ),
        );
      }
    
    }
    
    
    

    相关文章

      网友评论

        本文标题:flutter滑动按钮

        本文链接:https://www.haomeiwen.com/subject/kzwurltx.html