Flutter移动应用：按钮输入

原文地址：https://siques.cn/p/34

下面再去创建一个复选框的演示文件 …
在 lib … demo 的下面，新建一个文件，名字是 checkbox_demo.dart …
在文件里面，先导入 flutter 里面的 material …

复选框

CheckBox：复选框

结构解析

示例代码如下：

import 'package:flutter/material.dart';
class CheckBoxDemo extends StatefulWidget {
  CheckBoxDemo({Key key}) : super(key: key);

  @override
  _CheckBoxDemoState createState() => _CheckBoxDemoState();
}
~开始~
class _CheckBoxDemoState extends State<CheckBoxDemo> {
  bool _checkboxItemA = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('CheckBoxDemo'),
          elevation: 0.0,
        ),
        body: Container(
          padding: EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Checkbox(
                    value: _checkboxItemA,
                    onChanged: (value) {
                      setState(() {
                        _checkboxItemA = value;
                      });
                    },
                    activeColor: Colors.black,
                  )
                ],
              ),
            ],
          ),
        ));
  }
}
~结束~

CheckBoxListTile：带标签与图标的复选框

结构解析

代码块

import 'package:flutter/material.dart';
class CheckBoxDemo extends StatefulWidget {
  CheckBoxDemo({Key key}) : super(key: key);

  @override
  _CheckBoxDemoState createState() => _CheckBoxDemoState();
}
~开始~
class _CheckBoxDemoState extends State<CheckBoxDemo> {
  bool _checkboxItemA = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('CheckBoxDemo'),
          elevation: 0.0,
        ),
        body: Container(
          padding: EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              CheckboxListTile(
                value: _checkboxItemA,
                onChanged: (value) {
                  setState(() {
                    _checkboxItemA = value;
                  });
                },
                title: Text("Checkbox Item A"),
                subtitle: Text('Descripption'),
                secondary: Icon(Icons.bookmark),
                selected: _checkboxItemA,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  // Checkbox(
                  //   value: _checkboxItemA,
                  //   onChanged: (value) {
                  //     setState(() {
                  //       _checkboxItemA = value;
                  //     });
                  //   },
                  //   activeColor: Colors.black,
                  // )
                ],
              ),
            ],
          ),
        ));
  }
}
~结束~

单选按钮

Radio：单选按钮

结构解析

代码块

import 'package:flutter/material.dart';

class CheckBoxDemo extends StatefulWidget {
  CheckBoxDemo({Key key}) : super(key: key);

  @override
  _CheckBoxDemoState createState() => _CheckBoxDemoState();
}

~开始~
class _CheckBoxDemoState extends State<CheckBoxDemo> {
  int _radioGroupA = 0;

  void _handleRadioValueChanged(int value) {
    setState(() {
      _radioGroupA = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('CheckBoxDemo'),
          elevation: 0.0,
        ),
        body: Container(
          padding: EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Radio(
                    value: 0,
                    groupValue: _radioGroupA,
                    onChanged: _handleRadioValueChanged,
                    activeColor: Colors.black,
                  ),
                  Radio(
                    value: 1,
                    groupValue: _radioGroupA,
                    onChanged: _handleRadioValueChanged,
                    activeColor: Colors.black,
                  )
                ],
              ),
            ],
          ),
        ));
  }
}
~结束~

RadioListTile：带标签与图标的单选按钮

结构

代码块

import 'package:flutter/material.dart';

class CheckBoxDemo extends StatefulWidget {
  CheckBoxDemo({Key key}) : super(key: key);

  @override
  _CheckBoxDemoState createState() => _CheckBoxDemoState();
}
~开始~
class _CheckBoxDemoState extends State<CheckBoxDemo> {
  int _radioGroupA = 0;

  void _handleRadioValueChanged(int value) {
    setState(() {
      _radioGroupA = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('CheckBoxDemo'),
          elevation: 0.0,
        ),
        body: Container(
          padding: EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('RadioGroupValue:$_radioGroupA'),
              SizedBox(height: 32),
              RadioListTile(
                value: 0,
                groupValue: _radioGroupA,
                onChanged: _handleRadioValueChanged,
                title: Text("Options A"),
                subtitle: Text('Description'),
                secondary: Icon(Icons.filter_1),
                selected: _radioGroupA == 0,
              ),
              RadioListTile(
                value: 1,
                groupValue: _radioGroupA,
                onChanged: _handleRadioValueChanged,
                title: Text("Options B"),
                subtitle: Text('Description'),
                secondary: Icon(Icons.filter_2),
                selected: _radioGroupA == 1,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  // Radio(
                  //   value: 0,
                  //   groupValue: _radioGroupA,
                  //   onChanged: _handleRadioValueChanged,
                  //   activeColor: Colors.black,
                  // ),
                  // Radio(
                  //   value: 1,
                  //   groupValue: _radioGroupA,
                  //   onChanged: _handleRadioValueChanged,
                  //   activeColor: Colors.black,
                  // )
                ],
              ),
            ],
          ),
        ));
  }
}
~结束~

开关

Switch：开关

结构

代码块

import 'package:flutter/material.dart';

class SwitchDemo extends StatefulWidget {
  SwitchDemo({Key key}) : super(key: key);

  @override
  _SwitchDemoState createState() => _SwitchDemoState();
}
~开始~
class _SwitchDemoState extends State<SwitchDemo> {
  bool _switchItemA = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('CheckBoxDemo'),
          elevation: 0.0,
        ),
        body: Container(
          padding: EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                _switchItemA ? '笑脸' : '苦脸',
                style: TextStyle(fontSize: 32.0),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Switch(
                    value: _switchItemA,
                    onChanged: (value) {
                      setState(() {
                        _switchItemA = value;
                      });
                    },
                  )
                ],
              ),
            ],
          ),
        ));
  }
}
~结束~

SwitchListTile：带标签与图标的开关

结构

代码块

import 'package:flutter/material.dart';

class SwitchDemo extends StatefulWidget {
  SwitchDemo({Key key}) : super(key: key);

  @override
  _SwitchDemoState createState() => _SwitchDemoState();
}
~开始~
class _SwitchDemoState extends State<SwitchDemo> {
  bool _switchItemA = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('CheckBoxDemo'),
          elevation: 0.0,
        ),
        body: Container(
          padding: EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              SwitchListTile(
                value: _switchItemA,
                onChanged: (value) {
                  setState(() {
                    _switchItemA = value;
                  });
                },
                title: Text('Switch Item A'),
                subtitle: Text('Description'),
                secondary: Icon(
                    _switchItemA ? Icons.visibility : Icons.visibility_off),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[],
              ),
            ],
          ),
        ));
  }
}
~结束~

Slider：滑动选择器

结构

代码块

import 'package:flutter/material.dart';

class SlideDemo extends StatefulWidget {
  SlideDemo({Key key}) : super(key: key);

  @override
  _SlideDemoState createState() => _SlideDemoState();
}
~开始~
class _SlideDemoState extends State<SlideDemo> {
  double _sliderItemA = 0.0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('SlideDemo'),
          elevation: 0.0,
        ),
        body: Container(
          padding: EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Slider(
                    value: _sliderItemA,
                    onChanged: (value) {
                      setState(() {
                        _sliderItemA = value;
                      });
                    },
                    activeColor: Theme.of(context).accentColor,
                    inactiveColor:
                        Theme.of(context).accentColor.withOpacity(0.3),
                    min: 0.0,
                    max: 10.0,
                    divisions: 10,
                    label: '${_sliderItemA.toInt()}',
                  )
                ],
              ),
              SizedBox(height: 16.0),
              Text('SliderValue:$_sliderItemA')
            ],
          ),
        ));
  }
}
~结束~

日期与时间

安装第三方包（安装 Intl 包）

可以在https://pub.dartlang.org上找到需要安装的包。

在本地安装

显示格式化日期

结构

代码块

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';

class DateTimeDemo extends StatefulWidget {
  DateTimeDemo({Key key}) : super(key: key);

  @override
  _DateTimeDemoState createState() => _DateTimeDemoState();
}
~开始~
class _DateTimeDemoState extends State<DateTimeDemo> {
  final DateTime selectedDate = DateTime.now();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('CheckBoxDemo'),
          elevation: 0.0,
        ),
        body: Container(
          padding: EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  InkWell(
                    onTap: () {},
                    child: Row(
                      children: <Widget>[
                        Text(DateFormat.yMMMd().format(selectedDate)),
                        Icon(Icons.arrow_drop_down)
                      ],
                    ),
                  )
                ],
              ),
            ],
          ),
        ));
  }
}
~结束~

showDatePicker：选择日期

给onTap添加一个方法

代码块

 _selectDate() {
    showDatePicker(
        context: context,
        initialDate: selectedDate,
        firstDate: DateTime(1900),
        lastDate: DateTime(2100));
  }

showDatePicker：获取选择的日期（async）

用户在这个日期选择器上选择了一个日期，按了 ok，会返回一个 Future 类型的值，Future 跟 JavaScript 里的 Promise 差不多 …

用户如果按的是 cancel，日期选择器会返回 null …

想要通过选择器更改界面显示的时间，需要这样处理
导入一个dart:async包，将方法修改为async方法。

代码块

 DateTime selectedDate = DateTime.now();

  _selectDate() async {
    final DateTime date = await showDatePicker(
        context: context,
        initialDate: selectedDate,
        firstDate: DateTime(1900),
        lastDate: DateTime(2100));

    if (date == null) return;

    setState(() {
      selectedDate = date;
    });
  }

showTimePicker：时间选择器

showTimePicker 可以打开一个 Material 风格的时间选择器对话窗口 …
再添加一个 InkWell …
可以直接复制一份 …
onTap 设置成 _selectTime ，等会儿去定义这个方法 …
显示的文字是 selectedTime …
用一下 format …
再把 context 交给这个方法 …

结构

代码块

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'dart:async';

class DateTimeDemo extends StatefulWidget {
  DateTimeDemo({Key key}) : super(key: key);

  @override
  _DateTimeDemoState createState() => _DateTimeDemoState();
}
~开始~
class _DateTimeDemoState extends State<DateTimeDemo> {
  DateTime selectedDate = DateTime.now();
  TimeOfDay selectedTime = TimeOfDay(hour: 9, minute: 30);

  _selectDate() async {
    final DateTime date = await showDatePicker(
        context: context,
        initialDate: selectedDate,
        firstDate: DateTime(1900),
        lastDate: DateTime(2100));

    if (date == null) return;

    setState(() {
      selectedDate = date;
    });
  }

  _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('CheckBoxDemo'),
          elevation: 0.0,
        ),
        body: Container(
          padding: EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  InkWell(
                    onTap: _selectDate,
                    child: Row(
                      children: <Widget>[
                        Text(DateFormat.yMMMd().format(selectedDate)),
                        Icon(Icons.arrow_drop_down)
                      ],
                    ),
                  ),
                  InkWell(
                    onTap: _selectTime,
                    child: Row(
                      children: <Widget>[
                        Text(selectedTime.format(context)),
                        Icon(Icons.arrow_drop_down)
                      ],
                    ),
                  )
                ],
              ),
            ],
          ),
        ));
  }
}
~结束~

效果演示