精华内容
参与话题
问答
  • Flutter 开关按钮封装

    2020-10-31 14:33:15
    文章目录Flutter 开关按钮封装实现思路实现代码 Flutter 开关按钮封装 实现思路 利用自定义按钮组件FlatButton,设置开关状态对应的颜色。 实现代码 /// /// Author: chengzan /// Date: 2020-6-4 /// Describe: ...

    Flutter 开关按钮封装

    效果

    实现效果

    实现思路

    利用自定义按钮组件FlatButton,设置开关状态对应的颜色。

    实现代码

    ///
    /// Author: chengzan
    /// Date: 2020-6-4
    /// Describe: 圆形按钮,适用开关按钮
    ///
    
    class PowerSwitch extends StatefulWidget {
      var value;
      var on;
      var off;
      Color mainThemeColor;
      String onText;
      String offText;
      Function changed;
      PowerSwitch(
          {Key key,
          @required this.value,
          @required this.on,
          @required this.off,
          @required this.mainThemeColor,
          @required this.onText,
          @required this.offText,
          @required this.changed});
    
      @override
      _PowerSwitchState createState() => _PowerSwitchState();
    }
    
    class _PowerSwitchState extends State<PowerSwitch> {
      var value;
    
      @override
      void initState() {
        super.initState();
        value = widget.value;
      }
    
      @override
      Widget build(BuildContext context) {
        return FlatButton(
            color: value == widget.on ? widget.mainThemeColor : Color(0xffffffff),
            splashColor: widget.mainThemeColor,
            highlightColor: widget.mainThemeColor,
            child: Icon(
              Icons.power_settings_new,
              color: value == widget.on ? Color(0xffffffff) : widget.mainThemeColor,
            ),
            onPressed: () {
              setState(() {
                value = value == widget.on ? widget.off : widget.on;
              });
              widget.changed(value);
            },
            shape: new CircleBorder(
              side: new BorderSide(
                //设置 界面效果
                width: 1,
                color:
                    value == widget.on ? widget.mainThemeColor : Color(0xffe7e7e7),
                style: BorderStyle.solid,
              ),
            ));
      }
    }
    
    展开全文
  • 各位同学大家好,有段时间没有给大家更新文章了 ,今天写了一个flutter 开关闭合的案例就想着分享给家 ,原生安卓和iOS 这种效果网上也有很多文章讲到 我就不展开讲了, 今天我们就讲一下flutter的实现方式,那么废话...

    前言:

    各位同学大家好,有段时间没有给大家更新文章了 ,今天写了一个flutter 开关闭合的案例就想着分享给家 ,原生安卓和iOS 这种效果网上也有很多文章讲到 我就不展开讲了, 今天我们就讲一下flutter的实现方式,那么废话不多说 我们正式开始

    准备工作:

    需要安装flutter的开发环境:大家可以去看看之前的教程:
    1 win系统flutter开发环境安装教程: https://www.jianshu.com/p/152447bc8718
    2 mac系统flutter开发环境安装教程:https://www.jianshu.com/p/bad2c35b41e3

    效果图:

    Screenrecorder-2020-11-03-13-56-19-872[00_00_02--00_00_22].gif
    screenrecorder-2020-11-03-13-56-29-558[00_00_02--00_00_22].gif

    具体实现:

    单个开关闭合效果:

    Screenrecorder-2020-11-03-13-56-19-872[00_00_02--00_00_22].gif

    import 'package:flutter/material.dart';
    /***
     *
     * 创建人:xuqing
     * 创建时间:2020年11月3日14:00:48
     * 类说明: 单个开关页面
     *
     */
    class ExpansionTileDemo extends StatefulWidget {
      ExpansionTileDemo({Key key}) : super(key: key);
      @override
      _ExpansionTileDemoState createState() {
        return _ExpansionTileDemoState();
      }
    }
    class _ExpansionTileDemoState extends State<ExpansionTileDemo> {
      @override
      void initState() {
        super.initState();
      }
      @override
      void dispose() {
        super.dispose();
      }
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return Scaffold(
          appBar: AppBar(
            title: Text("expansion tile demo"),
          ),
          body: Center(
           child: ExpansionTile(
            title: Text("Expansion tile"),
             leading: Icon(Icons.ac_unit),
             backgroundColor: Colors.white12,
             children: [
               ListTile(
                 title: Text("list  tile"),
                 subtitle: Text("subtitle"),
               )
             ],
             initiallyExpanded: true,
           ),
          ),
        );
      }
    }
    

    这边是用了 ExpansionTile 来实现的 我们在 ExpansionTile组件中设置 title 和 leading 属性
    以及 children 中添加 title 和subtitle 然后我们设置 initiallyExpanded属性 设置成true则默认是打开状态 设置成false 则默认是闭合状态

    列表开关闭合效果

    screenrecorder-2020-11-03-13-56-29-558[00_00_02--00_00_22].gif

       body: SingleChildScrollView(
            child: ExpansionPanelList(
              expansionCallback: (index,bol){
                _setCurrentIndex(index,bol);
              },
              children:mList.map((index){
                return ExpansionPanel(
                  headerBuilder: (context, isExpanded){
                    return ListTile(
                      title: Text("this is no $index"),
                    );
                  },
                  body: ListTile(
                    title: Text("expandsion no $index"),
                  ),
                  isExpanded: expandStateList[index].isopen
                );
              }).toList(),
            ),
          ),
    

    列表的开关闭合我们需要用到 ExpansionPanelList 组件 我们在外层嵌套一个SingleChildScrollView
    处理滑动的效果 和显示我们 ExpansionPanelList
    然后我们在 ExpansionPanelList 的里面 处理 expansionCallback 回调方法 和children 属性
    expansionCallback 回调方法里面有 index 下标和bol 开关开启和闭合布尔值
    children 中我们遍历我们虚拟的死数据mList
    死数据 我们定义2个数组 list在构造方法中赋值for循往里面添加10条数据

     List<int>mList;
      List<ExpandStateBean>expandStateList;
      _ExpansionPanelListDemoState(){
        mList=new List();
        expandStateList=new List();
        for(int  i=0 ;i<10;i++){
          mList.add(i);
          expandStateList.add(ExpandStateBean(false, i));
        }
      }
    

    自定义bean类 里面定义了是否开发的属性和下标

    class  ExpandStateBean{
      var isopen;
      var  index;
      ExpandStateBean(this.isopen,this.index);
    }
    

    我们还需要定义一个方法在 ExpansionPanelList 组件里面的 expansionCallback 回调方法里面使用

      _setCurrentIndex(int  index, isExpand){
        setState(() {
          expandStateList.forEach((item) {
            if(item.index==index){
              item.isopen=!isExpand;
            }
          });
        });
      }
    

    我们遍历 expandStateList 数组然后将他里面的 item.isopen 属性赋值给 isExpand 方法中的isExpand 需要取反一下 这样我们在 开关开启和闭合属性中直接获取expandStateList 里面的 isopen 属性 然后能在开启和关闭的状态下来回切换 否则不能点击

      isExpanded: expandStateList[index].isopen
    

    完整代码:

    import 'package:flutter/material.dart';
    /**
     *
     * 创建人:xuqing
     * 创建时间:2020年11月3日14:03:15
     * 类说明:列表开关页面
     *
     *
     */
    class ExpansionPanelListDemo extends StatefulWidget {
      ExpansionPanelListDemo({Key key}) : super(key: key);
    
      @override
      _ExpansionPanelListDemoState createState() {
        return _ExpansionPanelListDemoState();
      }
    }
    class _ExpansionPanelListDemoState extends State<ExpansionPanelListDemo> {
      List<int>mList;
      List<ExpandStateBean>expandStateList;
      _ExpansionPanelListDemoState(){
        mList=new List();
        expandStateList=new List();
        for(int  i=0 ;i<20;i++){
          mList.add(i);
          expandStateList.add(ExpandStateBean(false, i));
        }
      }
      _setCurrentIndex(int  index, isExpand){
        setState(() {
          expandStateList.forEach((item) {
            if(item.index==index){
              item.isopen=!isExpand;
            }
          });
        });
      }
      @override
      void initState() {
        super.initState();
      }
      @override
      void dispose() {
        super.dispose();
      }
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return Scaffold(
          appBar: AppBar(
            title: Text(
              "expansion panel list"
            ),
          ),
          body: SingleChildScrollView(
            child: ExpansionPanelList(
              expansionCallback: (index,bol){
               _setCurrentIndex(index,bol);
              },
              children:mList.map((index){
                return ExpansionPanel(
                  headerBuilder: (context, isExpanded){
                    return ListTile(
                      title: Text("this is no $index"),
                    );
                  },
                  body: ListTile(
                    title: Text("expandsion no $index"),
                  ),
                  isExpanded: expandStateList[index].isopen
                );
              }).toList(),
            ),
          ),
        );
      }
    }
    class  ExpandStateBean{
      var isopen;
      var  index;
      ExpandStateBean(this.isopen,this.index);
    }
    

    到此flutter的 开关开启闭合案例实现就讲完。

    最后总结:

    类似这种开关开启和闭合的效果其他方式也是可以实现的 我们这边只是用了flutter sdk里面提供比较好用的 ExpansionTile 组件和 ExpansionPanelList 组件来实现单个开关和多个列表的开关 实现起来相对比较容易 。还有更多其他酷炫效果这边就不展开讲了,有兴趣的同学可以自己多尝试, 最后希望我的文章能帮助到各位解决问题 ,以后我还会贡献更多有用的代码分享给大家。各位同学如果觉得文章还不错 ,麻烦给关注和star,小弟在这里谢过啦

    项目地址:

    码云 :https://gitee.com/qiuyu123/flutter_expansiontiledemo

    QQ 交流群:

    92437359.png

    展开全文
  • flutter 开关Switch与复选框Checkbox

    千次阅读 2019-06-30 18:48:26
    Switch and Checkbox activeColor → Color - 激活时原点的颜色。 activeThumbImage → ImageProvider - 原点还支持图片,激活时的效果。 activeTrackColor → Color - 激活时横条的颜色。 inactiveThumbColor ...

    Flutter 移动跨平台开发技术分享

    目前在西瓜视频上免费刊登 Flutter 系列教程,每日更新,欢迎关注接收提醒

    【x1】点击查看提示

    【x2】各种系列的教程

    【x3】Flutter文章积累目录


    【Flutter组件精讲【79】复选框CheckBox 1】

    1 Switch 与 Checkbox 的共有属性配置说明

       activeColor → Color - 激活时原点的颜色。
       activeThumbImage → ImageProvider - 原点还支持图片,激活时的效果。
       activeTrackColor → Color - 激活时横条的颜色。
       inactiveThumbColor → Color - 非激活时原点的颜色。
       inactiveThumbImage → ImageProvider - 非激活原点的图片效果。
       inactiveTrackColor → Color - 非激活时横条的颜色。
       onChanged → ValueChanged - 改变时触发。
       value → bool - 切换按钮的值。
    

    在接下来的文章篇幅中将定义两个变量来维护开关的状态以及复选框的状态,如下所示:

        bool _switchSelected = false; //维护单选开关状态
        bool _checkboxSelected = false; //维护复选框状态
    

    2 开关 Switch

    在这里插入图片描述

        Switch(
              //当前状态
              value: _switchSelected,
              // 激活时原点颜色
              activeColor: Colors.blue,
              inactiveTrackColor: Colors.blue.shade50,
              onChanged: (value) {
                //重新构建页面
                setState(() {
                  _switchSelected = value;
                });
              },
            )
    
    

    3 IOS 风格的 CupertinoSwitch

    在这里插入图片描述

            CupertinoSwitch(
              value: _switchSelected,
              onChanged: (value) {},
            ),
    

    4 SwitchListTile

    SwitchListTile 是将 开关 Switch 、文本 Text 、还有图标水平线性排列的便捷组件

    在这里插入图片描述

     new SwitchListTile(
       secondary: const Icon(Icons.shutter_speed),
       title: const Text('硬件加速'),
       value: _switchSelected,
       onChanged: (bool value) {
         setState(() {
           _switchSelected = !_switchSelected;
         });
       },
     ),
    


    5 复选框 Checkbox

    在这里插入图片描述

        Checkbox(
              value: _checkboxSelected,
              //选中时的颜色
              activeColor: Colors.red,
              onChanged: (value) {
                setState(() {
                  _checkboxSelected = value;
                });
              },
            )
    
    

    6 CheckboxListTile

    在这里插入图片描述

    
          CheckboxListTile(
              secondary: const Icon(Icons.shutter_speed),
              title: const Text('硬件加速'),
              value: _checkboxSelected,
              onChanged: (bool value) {
                setState(() {
                  _checkboxSelected = !_checkboxSelected;
                });
              },
            ),
    
    

    目前在西瓜视频上免费刊登 Flutter 系列教程,每日更新,欢迎关注接收提醒

    【x1】点击查看提示

    【x2】各种系列的教程

    【x3】Flutter文章积累目录


    展开全文
  • Flutter 移动跨平台开发技术Switch 是一个切换按钮组件,通常用于设置的选项里。Switch 的原点颜色,横条颜色都可以设置,此外原点可以以图片形式显示.Checkbox 是一个复选框组件,通常用于设置的选项里.Switch与复...

    Flutter 移动跨平台开发技术

    Switch 是一个切换按钮组件,通常用于设置的选项里。Switch 的原点颜色,横条颜色都可以设置,此外原点可以以图片形式显示.

    Checkbox 是一个复选框组件,通常用于设置的选项里.


    Switch与复选框 Checkbox 共有属性一览:

    activeColor → Color - 激活时原点的颜色。
    activeThumbImage → ImageProvider - 原点还支持图片,激活时的效果。
    activeTrackColor → Color - 激活时横条的颜色。
    inactiveThumbColor → Color - 非激活时原点的颜色。
    inactiveThumbImage → ImageProvider - 非激活原点的图片效果。
    inactiveTrackColor → Color - 非激活时横条的颜色。
    onChanged → ValueChanged - 改变时触发。
    value → bool - 切换按钮的值。

    Switch 核心使用方法

    c5d8fde10bb7285b919eabf99c90d246.png

    bool _switchSelected = false; //维护单选开关状态

    Switch(
    //当前状态
    value: _switchSelected,
    // 激活时原点颜色
    activeColor: Colors.blue,
    inactiveTrackColor: Colors.blue.shade50,
    onChanged: (value) {
    //重新构建页面
    setState(() {
    _switchSelected = value;
    });
    },
    )

    IOS 风格的 CupertinoSwitch

    3ae7eb3962576ad0ebc53af8f5bf039e.png

    CupertinoSwitch(  value: _switchSelected,  onChanged: (value) {},),

    SwitchListTile

    17065e4e33df9434e0eca07b9df394f8.png

    new SwitchListTile(  secondary: const Icon(Icons.shutter_speed),  title: const Text('硬件加速'),    value: _switchSelected,      onChanged: (bool value) {        setState(() {                 _switchSelected = !_switchSelected;                 });  },),

    Checkbox

    71ff5009884c2c09d87cca4d63a64e1f.png

    Checkbox(  value: _checkboxSelected,  //选中时的颜色  activeColor: Colors.red,  onChanged: (value) {  setState(() {           _checkboxSelected = value;           });},)

    CheckboxListTile

    e0207831b2545c2136cd359773ba654f.png

    CheckboxListTile(    secondary: const Icon(Icons.shutter_speed),    title: const Text('硬件加速'),    value: _checkboxSelected,    onChanged: (bool value) {      setState(() {        _checkboxSelected = !_checkboxSelected;      });    },  ),
    展开全文
  • 文章目录开关 Switch复选框 Checkbox伪代码实现 开关 Switch 通过 Switch组件可以实现如下图中开关的打卡和关闭。当Switch被点击时,会触发onChanged回调。 复选框 Checkbox 当Checkbox被点击时,会触发的...
  • Flutter Switch 开关控制

    2019-10-21 10:08:45
    Flutter Switch 开关控制
  • flutter_switch_plus是对官方Switch控件的功能加强,其实官方提供在Switch已经很优秀了,样式跟iOS的开关样式也比较像,唯一的缺点是没法改大小(控件宽高在代码中写死了可还行),因此结合官方的控件做了一个加强版...
  • 本文章实现的Demo为SwitchListTile的基本使用
  • FlutterFlutter之表单开关——Switch、SwitchListTile一、Switch1.1 Switch构造器1.2 Switch属性说明1.3 Switch示例二、SwitchListTile2.1 SwitchListTile构造器2.2 SwitchListTile属性说明2.3 SwitchListTile...
  • Flutter中用Switch来表示开关组件。 主要属性如下: 1. value 启用时的值; 2. onChanged 改变时触发的事件; 3. activeColor 启用时的颜色; 代码示例: import 'package:flutter/material.dart'; class ...
  • Flutter - GPS开关检测

    2020-08-27 17:23:19
    Android端: ... import android.content.Context import android.content.Intent import android.location.LocationManager import android.provider.Settings import android.widget.Toast ...import io.flutter.emb
  • 说明Switch 是一个切换按钮组件,通常用于设置的选项里。Switch 的原点颜色,横条颜色都可以设置,此外原点可以以图片形式显示。可以使用Switch.adaptive构建组件:Switch.adaptive(value: switchValue,activeColor:...
  • 此动画效果是我在浏览文章时发现的一个非常酷炫的效果,于是就使用 Flutter 实现了。 更多动画效果及Flutter资源:https://github.com/781238222/flutter-do 添加依赖 在项目的 pubspec.yaml 文件中添加依赖: ...
  • 本片博文没啥技术含量,就是简单的介绍一下CupertinoSwitch组件的使用方式。先来看看具体的运行效果: 单从运行效果来看我们可以知道: ...value:布尔类型的值,true表示打开开关,false表示关闭开关 a...
  • import 'package:flutter/material.dart'; class RadioDemo extends StatefulWidget { @override _RadioDemoState createState() => _RadioDemoState(); } class _RadioDemoState extends State<RadioDemo...
  • 5.单选、复选按钮和开关的使用 1.源代码 import 'package:flutter/material.dart'; void main () => runApp(MyApp()); class MyApp extends StatefulWidget { @override _MyAppState createState() => _...

空空如也

1 2 3 4 5
收藏数 81
精华内容 32
关键字:

flutter开关