Flutter 开关 Switch、复选框 Checkbox、进度条 Indicator 使用例子

古城微笑少年丶 2023-05-28 15:54 17阅读 0赞

### 文章目录 ###

*   *   *  开关 Switch
         *  复选框 Checkbox
         *   *  Switch、Checkbox 例子伪代码实现
         *  进度条 Indicator
         *   *  水平进度条 LinearProgressIndicator
             *  圆形进度条 CircularProgressIndicator
             *  刷新进度条 RefreshIndicator

### 开关 Switch ###

通过 `Switch`组件可以实现如下图中开关的打卡和关闭。当`Switch`被点击时，会触发`onChanged`回调。  
![在这里插入图片描述][20200315233426247.png] ![在这里插入图片描述][20200315233444849.png]

### 复选框 Checkbox ###

当`Checkbox`被点击时，会触发的`onChanged`回调  
![在这里插入图片描述][20200315233513475.png] ![在这里插入图片描述][20200315233526132.png]

#### Switch、Checkbox 例子伪代码实现 ####

class _MyHomePageState extends State<MyHomePage> {
      bool _switchSelected = true; //维护单选开关状态
      bool _checkboxSelected = true; //维护复选框状态
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Switch(
                      value: _switchSelected, //当前状态
                      onChanged: (value) {
                        //重新构建页面
                        setState(() {
                          _switchSelected = value;
                        });
                      },
                    )
                  ],
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text(
                      _switchSelected ? "打开" : "关闭",
                      style: TextStyle(fontSize: 14.0, color: Colors.grey),
                    )
                  ],
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Checkbox(
                      value: _checkboxSelected,
                      activeColor: Colors.red, //选中时的颜色
                      onChanged: (value) {
                        setState(() {
                          _checkboxSelected = value;
                        });
                      },
                    )
                  ],
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text(
                      _checkboxSelected ? "勾选" : "未勾选",
                      style: TextStyle(fontSize: 14.0, color: Colors.grey),
                    )
                  ],
                ),
              ],
            ),
          ),
        );
      }
    }

### 进度条 Indicator ###

水平进度条`LinearProgressIndicator`和圆形进度条`CircularProgressIndicator`，刷新进度条`RefreshIndicator`。

#### 水平进度条 LinearProgressIndicator ####

查看源码可发现`LinearProgressIndicator`有以下属性：

const LinearProgressIndicator({
        Key key,
        // 表示当前的进度，取值范围为[0,1]，如 value:null 则表示是加载中的进度条
        double value,
        // 进度条的背景色
        Color backgroundColor,
        // 进度条的颜色
        Animation<Color> valueColor,
        // 后两个字段，暂时还未理解，字面意思是语意相关
        String semanticsLabel,
        String semanticsValue,
      })

**加载中进度条**  
![在这里插入图片描述][20200316001145241.gif]

LinearProgressIndicator(
      backgroundColor: Colors.grey[200],
      valueColor: AlwaysStoppedAnimation(Colors.blue),
    ),

**进度条显示50%**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70]

LinearProgressIndicator(
      backgroundColor: Colors.grey[200],
      valueColor: AlwaysStoppedAnimation(Colors.blue),
      value: .5, 
    )

#### 圆形进度条 CircularProgressIndicator ####

查看源码可发现`CircularProgressIndicator`有以下属性：其他属性和`LinearProgressIndicator`相同，默认设置了`this.strokeWidth = 4.0,`表示进度条的粗细。

const CircularProgressIndicator({
        Key key,
        double value,
        Color backgroundColor,
        Animation<Color> valueColor,
        this.strokeWidth = 4.0,
        String semanticsLabel,
        String semanticsValue,
      })

**加载中圆形进度条**  
![在这里插入图片描述][2020031600220018.gif]

CircularProgressIndicator(
      backgroundColor: Colors.grey[200],
      valueColor: AlwaysStoppedAnimation(Colors.blue),
    ),

**进度条显示50%，会显示一个半圆**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 1]

CircularProgressIndicator(
      backgroundColor: Colors.grey[200],
      valueColor: AlwaysStoppedAnimation(Colors.blue),
      value: .5,
    ),

#### 刷新进度条 RefreshIndicator ####

查阅资料了解到`RefreshIndicator`有如下属性：

const RefreshIndicator({
        Key key,
        @required this.child,// 布局
        this.displacement = 40.0,// 指示器显示时距顶部位置
        @required this.onRefresh,// 下拉刷新回调
        this.color,// 指示器颜色
        this.backgroundColor,// 指示器背景颜色
        this.notificationPredicate = defaultScrollNotificationPredicate,
        // 语意化字段
        this.semanticsLabel,
        this.semanticsValue,
      })

**下拉刷新例子**  
![在这里插入图片描述][2020031600425523.gif]  
伪代码如下：

class _MyHomePageState extends State<MyHomePage> {
      
      var listData = List<String>.generate(30, (i) => "$i");
    
      Future<Null> _pullToRefresh() async {
        print("下拉刷新");
        return null;
      }
      
      Widget _buildListView(BuildContext context){
        return ListView.builder(
          itemCount: listData.length,
          itemBuilder: (context, i) {
            return Container(
              height: 45.0,
              child: Text(
                "$i",
                style: TextStyle(fontSize: 18.0),
              ),
            );
          },
        );
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
          ),
          body: RefreshIndicator(child: _buildListView(context), onRefresh: _pullToRefresh)
        );
      }
    }

完~

[20200315233426247.png]: https://img-blog.csdnimg.cn/20200315233426247.png
[20200315233444849.png]: /images/20230528/f1ce20b26c264acba6647e972b9fef6d.png
[20200315233513475.png]: https://img-blog.csdnimg.cn/20200315233513475.png
[20200315233526132.png]: /images/20230528/85e003dcaa1744b8be2cee2ce07c48d0.png
[20200316001145241.gif]: /images/20230528/0b6c24448d7f44e9bc274959435d62d0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70]: /images/20230528/7195bab28f8a48d8a8f2c113cf106e64.png
[2020031600220018.gif]: /images/20230528/da8491ffaca4423eacf10a8c96075e30.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 1]: /images/20230528/e198f01d483f42c0be95de147b0bb5f9.png
[2020031600425523.gif]: /images/20230528/ddb2af329ec545f1a4d75c063a8f6a70.png