<li id="fw3su"></li>
  • <li id="fw3su"></li>
  • <div id="fw3su"><tr id="fw3su"></tr></div>
    <dl id="fw3su"></dl>
  • <div id="fw3su"><tr id="fw3su"></tr></div>
  • <sup id="fw3su"></sup>
    <progress id="fw3su"></progress><div id="fw3su"><tr id="fw3su"></tr></div><input id="fw3su"><ins id="fw3su"></ins></input>

    Flutter控件--Switch 和 SwitchListTile

    flutter控件练习demo地址: github

    Switch(开关)、SwitchListTile(带标题的开关) 和 AnimatedSwitch

    一 Switch

    1.1简介

    Switch “开关按钮”

    • 本身也是没有存储状态的 Widget 。需要通过有状态的父 Widget 来控制状态
    • 当 Switch 状态发生变化的时候 onChanged 会被调用 , 回调的参数是 bool ,true 表示 选中。 false 表示未选中
    • value 属性 表示 是否打开,通过控制这个来控制 Switch 的状态
    • 能点击。能滑动

    1.2属性

    • value: 来初始化此 Switch 是否被选中。true 表示选中 ,false 表示不选中
    • onChanged: 当 拖动改变状态时的回调。
    • activeColor: 当 value 是 true 时按钮的背景颜色。也就是开的状态时的颜色
    • activeTrackColor: 当 value 是 true 时 滑块的颜色
    • activeThumbImage: 当 value 是 true 时 滑块的图片
    • activeThumbImage: 当 value 是 true 时 滑块上的图片。 如果 activeColor 也设置了 , 以 activeThumbImage 为准 。如果设置的是网络图片的话。当 滑块 滑到这里 才开?#25216;?#36733;。所以 没加载出图片的之前 ,以 activeColor 为准
    • inactiveThumbColor: 当 value 是 false 时 滑块的颜色。也就是开的状态时的颜色
    • **inactiveTrackColor:**当 value 是 false 时 滑道的颜色
    • **inactiveThumbImage:**当 value 是 false 时 滑块上的图片。 如果 inactiveThumbColor 也设置了 , 以 inactiveThumbImage 为准

    二 SwitchListTile

    2.1简介

    SwitchListTile “带标题的开关”

    2.2属性

    • value: 是否选中 是否打开
    • onChanged: 当打开关闭的时候的回调
    • activeColor: 选中时 滑块的颜色
    • activeTrackColor: 选中时 滑道的颜色
    • inactiveThumbColor: 未选中时 滑块的颜色
    • inactiveTrackColor: 未选中时 滑道的颜色
    • activeThumbImage: 选中时 滑块的图片
    • inactiveThumbImage: 未选中时 滑块的图片
    • title: 标题 典型的是 Text
    • subtitle: 副标题 在标题下面的 典型的是 Text
    • isThreeLine = false: 是不是三行, true 时: subtitle 不能为null, false时可以为 null
    • dense: 是否垂直密集居中
    • secondary: 左边的一个东西
    • selected = false: 如果为 true ,则 text 和 icon 都用 activeColor 时的color

    三 demo图片

    四 demo代码

    import 'package:flutter/material.dart';
    import 'package:flutter/services.dart';
    import 'package:fluttertoast/generated/i18n.dart';
    
    class SwitchDemo extends StatefulWidget {
      @override
      State<StatefulWidget> createState() {
        return TextFieldStateDemo();
      }
    }
    
    class TextFieldStateDemo extends State {
      bool _isCheck;
    
      @override
      void initState() {
        super.initState();
        _isCheck = false;
      }
    
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return Scaffold(
          appBar: AppBar(
            title: Text("Switch 和 SwitchListTile"),
            centerTitle: true,
          ),
          body: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Row(),
                SizedBox(
                  height: 20,
                ),
                Text(
                  "一:普通的Switch",
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
                ),
                Switch(
                  value: _isCheck,
                  onChanged: _changed,
                ),
                Text(
                  "二:特质的Switch",
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
                ),
                Switch(
                  //来初始化此 Switch 是否被选中。true 表示选中 ,false 表示不选中
                  value: _isCheck,
                  //当 拖动改变状态时的回调。
                  onChanged: _changed,
                  //当 value 是 true 时 滑块的颜色。也就是开的状态时的颜色
                  activeColor: Colors.red,
                  // 当 value 是 true 时 滑道的颜色
                  activeTrackColor: Colors.blueAccent,
                  // 当 value 是 true 时 滑块上的图片。 如果 activeColor 也设置了  , 以 activeThumbImage 为准
                  // 如果设置的是网络图片的话。当 滑块 滑到这里 才开?#25216;?#36733;。所以 没加载出图片的之前 ,以 activeColor 为准
    
                  activeThumbImage: NetworkImage(
                      "https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3868620627,2694438302&fm=58"),
    
                  // 当 value 是 false 时 滑块的颜色。也就是开的状态时的颜色
                  inactiveThumbColor: Colors.amberAccent,
                  // 当 value 是 false 时 滑道的颜色
                  inactiveTrackColor: Colors.green,
                  // 当 value 是 false 时 滑块上的图片。 如果 inactiveThumbColor 也设置了  , 以 inactiveThumbImage 为准
                  inactiveThumbImage: AssetImage("images/hashiqi.jpg"),
                ),
                Text(
                  "三:SwitchListTile",
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
                ),
                SizedBox(
                  width: 200,
                  child: SwitchListTile(
                    // 是否选中 是否打开
                    value: _isCheck,
                    // 当打开关闭的时候的回调
                    onChanged: _changed,
                    // 选中时 滑块的颜色
                    activeColor: Colors.red,
                    // 选中时 滑道的颜色
                    activeTrackColor: Colors.black,
                    // 选中时 滑块的图片
    //              activeThumbImage: AssetImage("images/hashiqi.jpg"),
                    // 未选中时 滑块的颜色
                    inactiveThumbColor: Colors.green,
                    // 未选中时 滑道的颜色
                    inactiveTrackColor: Colors.amberAccent,
                    // 未选中时 滑块的颜色
                    inactiveThumbImage: AssetImage("images/hashiqi.jpg"),
                    // 标题
                    title: Text("标题"),
                    // 副标题 在标题下面的
    //              subtitle: Text("副标题"),
                    // 是不是三行, true 时: subtitle 不能为null, false时可以为 null
    //              isThreeLine: true,
                    // 如果为 true ,则 text 和 icon 都用 activeColor 时的color
    //              selected: true,
                    // 是否垂直密集居中
                    dense: true,
                    // 左边的一个东西
                    secondary: Icon(Icons.access_time),
                  ),
                ),
              ]),
        );
      }
    
      void _changed(isCheck) {
        setState(() {
          _isCheck = isCheck;
        });
      }
    }
    
    复制代码
    我来评几句
    登录后评论

    已发表评论数()

    相关站点

    +订阅
    热门文章
    11选五