【Flutter】入门15-输入

Checkbox

class _MyHomeState extends State<MyHome> with SingleTickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this);
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }
  bool _checkBoxState=true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('Gecer')),
        body: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Checkbox(
                value: _checkBoxState,
                onChanged: (value) {
                  setState(() {
                    _checkBoxState=value;
                  });
                },                
                activeColor: Colors.redAccent,//选中颜色
              )
            ]));
  }
}

CheckboxListTile

 CheckboxListTile(
                value: _checkBoxState,
                onChanged: (value) {
                  setState(() {
                    _checkBoxState = value;
                  });
                },
                title: Text('Title'),
                subtitle: Text('Description'),
                secondary: Icon(Icons.favorite),
                selected: _checkBoxState,
                activeColor: Colors.redAccent,
              )

Radio

 //选中的值
  int _selectedValue = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('Gecer')),
        body: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Radio(
                value: 0,
                groupValue: _selectedValue,
                onChanged: (value) {
                  setState(() {
                    _selectedValue = value;
                  });
                },               
              ),
               Radio(
                value: 1,
                groupValue: _selectedValue,
                onChanged: (value) {
                  setState(() {
                    _selectedValue = value;
                  });
                },               
              )
            ]));
  }

RadioListTile

int _selectedValue = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('Gecer')),
        body: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              RadioListTile(
                value: 0,
                groupValue: _selectedValue,
                onChanged: (value) {
                  setState(() {
                    _selectedValue = value;
                  });
                },
                title: Text('Item0'),
                subtitle: Text('Description'),
                secondary: Icon(Icons.favorite),
                selected: _selectedValue == 0,//是否显示显示样式
                activeColor: Colors.red,
              ),
              RadioListTile(
                value: 1,
                groupValue: _selectedValue,
                onChanged: (value) {
                  setState(() {
                    _selectedValue = value;
                  });
                },
                title: Text('Item1'),
                subtitle: Text('Description'),
                secondary: Icon(Icons.star),
                selected: _selectedValue == 1,
                activeColor: Colors.red,
              )
            ]));
  }

Switch

 Switch(
                activeColor: Theme.of(context).primaryColor,
                value: _isSwitched,
                onChanged: (value) {
                  setState(() {
                    _isSwitched = value;
                  });
                },
              ),

SwitchListTile

 SwitchListTile(
                activeColor: Theme.of(context).primaryColor,
                value: _isSwitched,
                onChanged: (value) {
                  setState(() {
                    _isSwitched = value;
                  });
                },
                title: Text('To be or not to be?'),
                subtitle: Text('This is a queation.'),
                secondary:
                    Icon(_isSwitched ? Icons.favorite : Icons.favorite_border),//切换图标
                selected: _isSwitched,//样式是否激活
              ),

Slider

              Slider(
                value: _sliderValue,
                onChanged: (value) {
                  setState(() {
                    _sliderValue = value;
                  });
                },
                activeColor: Theme.of(context).primaryColor,//激活的颜色
                inactiveColor: Theme.of(context).primaryColor.withOpacity(0.3),//未激活的颜色
                min: 0.0,
                max: 10.0,
                divisions: 10,//分割成份数
                label: '${_sliderValue.toInt()}',//拖动时显示的lable
              ),

showTimePicker 

TimeOfDay _selectedTime = TimeOfDay.now();
  //异步显示选择时间
  Future<void> _selectTime() async {
    final TimeOfDay time = await showTimePicker(
      context: context,
      initialTime: _selectedTime,
    );

    if (time == null) return;

    setState(() {
      _selectedTime = time;
    });
  } 

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('Gecer')),
        body: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              //使用InkWell 是为了给子元素添加点击事件
              InkWell(
                onTap: _selectTime,
                child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Icon(
                        Icons.favorite,
                        color: Colors.redAccent,
                      ),
                      //DateFormat 引用于intl
                      Text(_selectedTime.format(context))
                    ]),
              )
            ]));
  }

showDatePicker

DateTime _selectedDate = DateTime.now();
  //异步显示选择日期
  Future<void> _selectDate() async {
    final DateTime date = await showDatePicker(
      context: context,
      initialDate: _selectedDate,//初始选中的日期
      firstDate: DateTime(1900),//开始日期
      lastDate: DateTime(2100),//结束日期作为选择范围
    );

    if (date == null) return;

    setState(() {
      _selectedDate = date;
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('Gecer')),
        body: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              //使用InkWell 是为了给子元素添加点击事件
              InkWell(
                onTap: _selectDate,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                   Icon(Icons.favorite,color: Colors.redAccent,),
                   //DateFormat 引用于intl
                   Text(DateFormat.yMMMMd().format(_selectedDate))
                ]),
              )
            ]));
  }