Flutter入门进阶之旅（十一）Index&Chose

时间  2019-11-05
标签 flutter 入门 进阶 之旅 十一 index&chose index chose 繁體版
原文   原文链接

延续上一节的内容，上一节咱们讲解了各类Dialog跟提示，其中包括轻量级跟非轻量级，咱们了解到了像SnackBar、Tooltip、Dialog等各类具备提示交互做用的Widget，今天咱们继续上一篇的内容，来一块了解一下各类用于进度显示的Widget跟checkBox等选择做用的Widget。java

今天咱们来一块了解一下各类Index跟Chose控件，像CircularProgressIndicator圆环进度条， LinearProgressIndicator水平进度条，Slider滑杆，还有Checkbox，Switch等，下面咱们就一块来进入今天的分享。app

1. CircularProgressIndicator

老规矩，先从构造方法入手less

const CircularProgressIndicator({ Key key, double value, //进度（0-1）之间，不设置进度会一直循环 Color backgroundColor, Animation<Color> valueColor, //圆环进度颜色 this.strokeWidth = 4.0, //圆环进度条宽度 String semanticsLabel, String semanticsValue, }) 复制代码

从上述CircularProgressIndicator的方法签名中，咱们首先能够获得的信息是，圆环进度条能够自定义指定背景颜色跟宽度，能够设置进度，我贴上几个简单的例子来直观体验一下。ide

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(home: new FlutterDemo()));
}

class FlutterDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Flutter进阶之旅"),
      ),
      body: new Center(
          child: new Column(
        children: <Widget>[
          SizedBox(height: 30.0),
          Text("设置进度比为80%(0.8)"),
          SizedBox(height: 30.0),
          CircularProgressIndicator(
            value: 0.8, //
            backgroundColor: Colors.green,
            strokeWidth: 10.0,
          ),
          SizedBox(height: 30.0), //设置间隔
          Text("未作任何处理，默认一直循环"),
          CircularProgressIndicator(),

          Text("设置圆环进度颜色为红色"),
          CircularProgressIndicator(
            valueColor: AlwaysStoppedAnimation(Colors.deepOrange),
          ),
        ],
      )),
    );
  }
}

//const CircularProgressIndicator({
//Key key,
//double value, //进度（0-1）之间，不设置进度会一直循环
//Color backgroundColor,
//Animation<Color> valueColor, //圆环进度颜色
//this.strokeWidth = 4.0, //圆环进度条宽度
//String semanticsLabel,
//String semanticsValue,
//})
复制代码

效果图 函数

CircularProgressIndicator

2.LinearProgressIndicator

对比LinearProgressIndicator的构造方法学习

const LinearProgressIndicator({ Key key, double value, Color backgroundColor, Animation<Color> valueColor, String semanticsLabel, String semanticsValue, }) 复制代码

咱们发现LinearProgressIndicator与CircularProgressIndicator除了少了一个strokeWidth不支持设置进度条宽度以外，其余彻底一致，因此我就很少作讲解了，直接看下效果吧。测试

效果图 ui

LinearProgressIndicator
样例代码 

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(home: new FlutterDemo()));
}

class FlutterDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Flutter进阶之旅"),
      ),
      body: new Center(
          child: new Column(
        children: <Widget>[
          SizedBox(height: 30.0),
          Text("设置进度比为80%(0.8)"),
          SizedBox(height: 30.0),
          LinearProgressIndicator(
            value: 0.8, //
            backgroundColor: Colors.green,
          ),
          SizedBox(height: 30.0), //设置间隔
          Text("未作任何处理，默认一直循环"),
          LinearProgressIndicator(),

          Text("设置进度颜色为红色,背景透明"),
          LinearProgressIndicator(
            backgroundColor: Colors.transparent,
            valueColor: AlwaysStoppedAnimation(Colors.deepOrange),
          ),
        ],
      )),
    );
  }
}
复制代码

3.Slider

构造方法this

const Slider({ Key key, @required this.value,//滑块的值 @required this.onChanged, //改变时触发。 this.onChangeStart, //改变前触发。 this.onChangeEnd, //改变后触发。 this.min = 0.0, //用户能够选择的最小值。 this.max = 1.0, //用户能够选择的最大值。 this.divisions, //离散部分的数量 this.label, //滑块处于活动状态时显示在滑块上方的标签。 this.activeColor,//激活时的颜色 this.inactiveColor,//滑块轨道的非活动部分的颜色。 this.semanticFormatterCallback, }) 复制代码

Slider滑杆进度条，支持用户手动拖拽定位，若是不涉及到用户拖拽交互，咱们能够把他认为就是一个静态的LinearProgressIndicator，使用起来也比较简单。可是若是需用跟用户交互，涉及到用户的拖拽手势而后动态的改变Slider的值，就须要借助咱们以前讲到的StatefullWidget，经过setState来完成用户交互的数据从新更新渲染到Slider上，咱们来一块儿体验一下。spa

3.1 静态Slider

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(home: new FlutterDemo()));
}

class FlutterDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Flutter进阶之旅"),
      ),
      body: new Center(
        child: new Slider(
          value: 0.4,
          onChanged: null,
        ),
      ),
    );
  }
}
复制代码

效果图

静态Slider
如上图，就仅仅只是一个指示做用，不支持用户手指拖拽滑动，下面咱们来借助StatefullWidget来作一下简单交互。

3.2 动态Slider

咱们来模拟一下用户拖拽Slider能够设置当前是星期几的效果。 效果图

Slider
这里提到一个小细节，有读者给我反馈说 在使用Slider的时候，在Slider上方的label一直不显示，这里是由于label在指定了 divisions也就是指定当前进度被离散成多少份以后才会显示，读者注意到这个细节便可。下面是上图的样例代码，供你们参考。 

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(home: new FlutterDemo()));
}

class FlutterDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => SliderState();
}

class SliderState extends State {
  double _currentIndex = 0.0;
  void _onSliderStateChanged(double value) {
    setState(() {
      _currentIndex = value;
      print(_currentIndex.toString() + '-------------------');
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Flutter进阶之旅"),
      ),
      body: new Center(
        child: new Slider(
          value: _currentIndex,
          label: '星期${(_currentIndex*10).floor().toString()}',
          activeColor: Colors.redAccent,
          inactiveColor: Colors.grey,
          max: 0.7,
          min: 0.0,
          onChanged: _onSliderStateChanged,
          onChangeStart: (value){
            print('开始滑动-------------$value');
          },
          onChangeEnd: (value){
            print('结束滑动-------------$value');
          },
          divisions: 7,
        ),
      ),
    );
  }
}
//
//const Slider({
//Key key,
//@required this.value,滑块的值
//@required this.onChanged, //改变时触发。
//this.onChangeStart, //改变前触发。
//this.onChangeEnd, //改变后触发。
//this.min = 0.0, //用户能够选择的最小值。
//this.max = 1.0, //用户能够选择的最大值。
//this.divisions, //离散部分的数量
//this.label, //滑块处于活动状态时显示在滑块上方的标签。
//this.activeColor,//激活时的颜色
//this.inactiveColor,//滑块轨道的非活动部分的颜色。
//this.semanticFormatterCallback,
//})

复制代码

上面说完了经常使用的进度展现控件，咱们经过上面的学习基本能处理业务上不一样场景下若是选用进度Widget，下面咱们来进入本篇的第二部分，关于Chose控件的介绍。

4.Checkbox

Checkbox跟Slider同样，由于须要处理或者说须要记录用户的选择状态，而后去更新Checkbox的选中状态，因此理所固然咱们也须要使用StatefullWidget来完成这一操做。不然Checkbox只能跟上面分析Slider同样，只能一个静态展现，不能完成或者说记录用户的行为操做。

Checkbox使用跟原生Android同样，没有什么须要特别注意的知识点，我就很少作讲解了，下面咱们一块儿来看一个例子。

CheckBox

样例代码

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(home: new FlutterDemo()));
}

class FlutterDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => SliderState();
}

class SliderState extends State {
  bool isChecked = false;

  void _onCheckStateChanged(bool value) {
    setState(() {
      isChecked = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Flutter进阶之旅"),
      ),
      body: new Center(
        child: new Checkbox(
          value: isChecked,
          onChanged: _onCheckStateChanged,
          activeColor: Colors.green,
        ),
      ),
    );
  }
}
复制代码

5.Switch

Switch跟Checkbox用户上相似，都是为了记录用户的选中状态，只不过是Switch可定制的部分比Checkbox更多一些，开发者能够加入更多的个性化定制，咱们仍是先从构造方法提及。

const Switch({ Key key, @required this.value,//切换按钮的值。 @required this.onChanged,//改变时触发。 this.activeColor, //激活时圆点的颜色。 this.activeTrackColor, //激活时横条的颜色 this.inactiveThumbColor,//非激活时原点的颜色。 this.inactiveTrackColor, // 非激活时原点的颜色。 this.activeThumbImage, //圆点还支持图片，激活时的效果 this.inactiveThumbImage,//非激活原点的图片效果。 this.materialTapTargetSize, }) 复制代码

下面我把几个配置不一样样式的Switch效果图贴上了，读者可根据代码自行分析其具体实现细节，我就不逐一讲解构造方法中各个属性的做用了。

效果图

Switch

这里说明一下，上图为何点击其中一个Switch另外两个也会跟着联动，缘由是我在写测试代码的时候，为了减小代码的书写量，尽量的让代码清晰，因此给三个Switch在onChanged的时候绑定的是同一个函数回调，没有分开单独处理每一个Swtich的回调事件，读者知道便可，不用过于纠结。

如上图： 第一个Switch我指定了，激活跟非激活状态的圆点颜色跟滑动轨迹的颜色 第二个Switch我指定了，激活跟非激活状态下圆点是资源图片。 第三个Swtich没有作任何处理。

上述效果图代码以下：

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(home: new FlutterDemo()));
}

class FlutterDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => SliderState();
}

class SliderState extends State {
  bool isChecked = false;

  void _onCheckStateChanged(bool value) {
    setState(() {
      isChecked = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Flutter进阶之旅"),
      ),
      body: new Center(
        child: Column(
          children: <Widget>[
            new Switch(
              value: isChecked,
              inactiveThumbColor: Colors.redAccent,
              inactiveTrackColor: Colors.brown,
              activeTrackColor: Colors.blue,
              onChanged: _onCheckStateChanged,
              activeColor: Colors.green,
            ),
            Text("指定激活跟非激活状态下，圆点都为图片"),
            new Switch(
              value: isChecked,
             inactiveThumbImage: AssetImage('images/a.png'),
              activeThumbImage: AssetImage('images/aaa.png'),
              onChanged: _onCheckStateChanged,
              activeColor: Colors.green,
            ),
            new Switch(
              value: isChecked,
              onChanged: _onCheckStateChanged,
            )
          ],
        ),
      ),
    );
  }
}
//
//const Switch({
//Key key,
//@required this.value,//切换按钮的值。
//@required this.onChanged,//改变时触发。
//this.activeColor, //激活时圆点的颜色。
//this.activeTrackColor, //激活时横条的颜色
//this.inactiveThumbColor,//非激活时原点的颜色。
//this.inactiveTrackColor, // 非激活时原点的颜色。
//this.activeThumbImage, //圆点还支持图片，激活时的效果
//this.inactiveThumbImage,//非激活原点的图片效果。
//this.materialTapTargetSize,
//})

复制代码

6.Radio

在项目开发或者真实案例中Radio一般都是成组出现，好比性别选择、爱好选择等等场景中，Flutter充分考虑到了这一场景需求，给咱们提供了便捷使用Radio的API。利用flutter的Radio能知足咱们在原生Android中各个使用Radio的场景。下面咱们来一块儿看下构造方法，顺便有一点小细节须要讲解一下。

const Radio({ Key key, @required this.value, //单选的值。 @required this.groupValue, //选择组的值。 @required this.onChanged, //改变时触发。 this.activeColor, //激活时的颜色 this.materialTapTargetSize, }) 复制代码

看下Radio中的这段代码

/// The value represented by this radio button.
  final T value;

  /// The currently selected value for this group of radio buttons.
  ///
  /// This radio button is considered selected if its [value] matches the
  /// [groupValue].
  final T groupValue;
复制代码

从Radio的这段源码注释中咱们能够看到Radio在处理分组时，value跟groupValue是做为一个泛型参数，也就是说咱们能够指定value的类型为int、或者String等类型，而且当value和groupValue一致的时候则选中

根据这些咱们就能够自由发挥去处理咱们实际开发中须要使用Radio分组的业务逻辑了。下面我贴上一个选择性别跟选择数字的样例代码供你们参考，读者可结合上述关于Radio的源码分析和下面的代码对比学习。

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(home: new FlutterDemo()));
}

class FlutterDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => SliderState();
}

class SliderState extends State {
  int _value = 0;
  String _sex = '男';

  void _onRadioChanged(int value) {
    setState(() {
      _value = value;
    });
  }

  void _onSexRadioChanged(String value) {
    setState(() {
      _sex = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Flutter进阶之旅"),
      ),
      body: new Center(
        child: Column(children: <Widget>[
          Radio(
            value: 0,
            groupValue: _value,
            onChanged: _onRadioChanged,
          ),
          Radio(
            value: 1,
            groupValue: _value,
            onChanged: _onRadioChanged,
          ),
          Radio(
            value: 2,
            groupValue: _value,
            onChanged: _onRadioChanged,
          ),

          Text("选择的数字为$_value"),
          SizedBox(height: 50.0),
          Text("选择性别"),
          new Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Radio(
                value: '男',
                groupValue: _sex,
                onChanged: _onSexRadioChanged,
              ),
              Radio(
                value: '女',
                groupValue: _sex,
                onChanged: _onSexRadioChanged,
              ),
            ],
          ),
          Text(_sex),

        ]),
      ),
    );
  }
}

//当value和groupValue一致的时候则选中
//const Radio({
//Key key,
//@required this.value, //单选的值。
//@required this.groupValue, //选择组的值。
//@required this.onChanged, //改变时触发。
//this.activeColor, //激活时的颜色
//this.materialTapTargetSize,
//})

复制代码

效果图

Radio
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程