Flutter学习笔记：常用的表单组件

6. 表单组件

1. Switch开关

• Switch是一个受控组件，需要传递value(布尔类型)决定显示的状态，通过回调onChange对状态改变时进行操作(类似React受控组件)
• Switch默认撑满整个外部容器，长度需要通过外部的容器控制

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

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

class _SwitchComponentState extends State<SwitchComponent> {
  bool _switchSelected = false;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Switch(
        value: _switchSelected,
        onChanged: (value) {
          print(value);
          setState(() {
            _switchSelected = value;
          });
        },
        activeColor: Colors.red,
        hoverColor: Colors.greenAccent,
      ),
      width: 120,
    );
  }
}

2. 单选框

单选框分为Radio 和RadioListTile ,RadioListTile主要和ListView中的ListTile一样，是一个详细的列表块。

使用方法：

1. Radio的使用

// Radio的定义  
const Radio({
    Key key,
    @required this.value,
    @required this.groupValue,
    @required this.onChanged,
    this.activeColor,
    this.focusColor,
    this.hoverColor,
    this.materialTapTargetSize,
    this.focusNode,
    this.autofocus = false,
})

• value:单选框定义的值
• groupValue: 一个如果value等于groupValue变量中的值表现为选中状态
• onChange: 点击发生状态改变时的回调
• 其他参数大多是控制样式大小的

// 外部定义了
String _radioData = "";

// 组件中使用
Row(
    children: <Widget>[
        Text('男'),
        Radio(
            value: '男',
            groupValue: this._radioData,
            onChanged: (value) {
                setState(() {
                    this._radioData = value;
                });
            }),
        Text('女'),
        Radio(
            value: '女',
            groupValue: this._radioData,
            onChanged: (value) {
                setState(() {
                    this._radioData = value;
                });
            })
    ],
),

2. RadioListTile的使用

class RadioListTile<T> extends StatelessWidget {
  const RadioListTile({
    Key key,
    @required this.value,
    @required this.groupValue,
    @required this.onChanged,
    this.activeColor,
    this.title,
    this.subtitle,
    this.isThreeLine = false,
    this.dense,
    this.secondary,
    this.selected = false,
    this.controlAffinity = ListTileControlAffinity.platform,
  })

• value: 和Radio类似
• groupValue: 和Radio中的一样
• title： 类似ListTile中的主标题
• subtitle: 类似Listile中的副标题

// 定义的_radioData为String
RadioListTile(
    value: '男',
    groupValue: this._radioData,
    subtitle: Text('性别选择'),
    title: Text('选择您的性别（单选）'),
    onChanged: (value) {
        setState(() {
            this._radioData = value;
        });
    }),
RadioListTile(
    value: '女',
    groupValue: this._radioData,
    subtitle: Text('性别选择'),
    title: Text('选择您的性别（单选）'),
    onChanged: (value) {
        setState(() {
            this._radioData = value;
        });
    }),

3. 多选框

多选框和单选框一样，有Checkbox和CheckboxListTile两种

使用方法：

class Checkbox extends StatefulWidget {
  const Checkbox({
    Key key,
    @required this.value,
    this.tristate = false,
    @required this.onChanged,
    this.activeColor,
    this.checkColor,
    this.focusColor,
    this.hoverColor,
    this.materialTapTargetSize,
    this.focusNode,
    this.autofocus = false,
  });

• value: bool，代表是否被选中
• onChange: 该选项框改变时的回调函数
• tristate: 为true的时候显示为第三态

List<Map<String, Object>> hobbies = [
    {"name": '抽烟', "selected": false},
    {"name": "喝酒", "selected": false},
    {"name": "烫头", "selected": false}
];
List<Widget> checkSelection = [];

// 使用Checkbox的方法，没有第三台只需设置
hobbies.forEach((item) {
    checkSelection.add(
        Container(
            child: Row(children: [
                Checkbox(
                    value: item['selected'],
                    onChanged: (bool isSelected) {
                        setState(() {
                            item['selected'] = isSelected;
                        });
                    }),
                Text('${item['name']}')
            ])),
    );
});

• 使用CheckboxListTile的例子

api和之前的RadioListTile的基本相似

hobbies.forEach((item) {
    checkBoxListileSelection.add(CheckboxListTile(
        value: item['selected'],
        onChanged: (value) {
            setState(() {
                item['selected'] = value;
            });
        },
        title: Text('${item['name']}'),
    ));
});

4. 输入框

处理输入文本

  const TextField({
    Key key,
    this.controller,
    this.focusNode,
    this.decoration = const InputDecoration(),
    TextInputType keyboardType,
    this.textInputAction,
    this.textCapitalization = TextCapitalization.none,
    this.style,
    this.strutStyle,
    this.textAlign = TextAlign.start,
    this.textAlignVertical,
    this.textDirection,
    this.readOnly = false,
    ToolbarOptions toolbarOptions,
    this.showCursor,
    this.autofocus = false,
    this.obscureText = false,
    this.autocorrect = true,
    this.enableSuggestions = true,
    this.maxLines = 1,
    this.minLines,
    this.expands = false,
    this.maxLength,
    this.maxLengthEnforced = true,
    this.onChanged,
    this.onEditingComplete,
    this.onSubmitted,
    this.inputFormatters,
    this.enabonEditingCompleteled,
    this.cursorWidth = 2.0,
    this.cursorRadius,
    this.cursorColor,
    this.keyboardAppearance,
    this.scrollPadding = const EdgeInsets.all(20.0),
    this.dragStartBehavior = DragStartBehavior.start,
    this.enableInteractiveSelection = true,
    this.onTap,
    this.buildCounter,
    this.scrollController,
    this.scrollPhysics,
  })

介绍几个常用的

• controller: 定义的controller控制文本的初始信息，监听数值变化等等

• focusNode: 用于聚焦到该文本框

• decoration: 设置文本框的样式，包括前后的图表，类似于placeholder的水印显示文本

• keyboardType: 规定弹出键盘的类型，电话号码还是文本

• style: 输入文本的样式

• obscureText: 对于密码来说，需要隐藏文本， 展示为*

• autofocus: 进入页面后自动聚焦

• onChange: 文本框改变的回调函数

• inputFormatters可以通过正则来控制输入文本的类型，比如只能输入文字

• 使用Focus聚焦的方法

  • 定义一个focusNode节点
  • 重写dispose方法
  • 将focusNode
  • 需要聚集焦点的时候使用FocusScope.of(context).requestFocus(_focusNode);

// 定义
TextEditingController _userName = TextEditingController(text: "");
TextEditingController _phoneNumber = TextEditingController();

// TextField
class _MyHomePageState extends State<MyHomePage> {
  TextEditingController _userName = TextEditingController(text: "");
  TextEditingController _phoneNumber = TextEditingController();
  FocusNode _focusNode;

  @override
  void initState() {
    super.initState();
    // _focusNode
    _focusNode = FocusNode();
  }

  @override
  void dispose() {
    _focusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Container(
        child: Column(
          children: <Widget>[
            TextField(
              controller: _userName,
              decoration: InputDecoration(
                  hintText: '请输入您的姓名',
                  labelText: '用户名',
                  prefixIcon: Icon(Icons.person)),
              autofocus: true,
              style: TextStyle(
                color: Colors.red[200],
              ),
              focusNode: _focusNode,
            ),
            TextField(
              controller: _phoneNumber,
              decoration: InputDecoration(
                  hintText: '请输入电话',
                  labelText: '联系电话',
                  icon: Icon(Icons.phone)),
              inputFormatters: [
                WhitelistingTextInputFormatter(RegExp("[0-9]")),
              ],
            )
          ],
        ),
        padding: EdgeInsets.all(10),
      ),
    );
  }
}

在开发iOS应用时，使用appuploader可以方便地管理应用上传和测试过程。appuploader是一款iOS开发助手工具，能帮助开发者快速上传应用到App Store Connect，生成测试版本，管理证书和描述文件等。与Flutter表单组件开发类似，好的工具能大大提高开发效率。