Flutter 表单组件

文件结构

内容承接：https://blog.csdn.net/u013227399/article/details/103787189

routes.dart

import 'package:flutter/material.dart';
import '../pages/tabs.dart';
import '../pages/TextField.dart';
import '../pages/Radio.dart';
import '../pages/CheckBox.dart';
import '../pages/Switch.dart';

final routes = {
  '/': (context) => Tabs(),
  '/text':(context) => TextFieldPage(),
  '/radio':(context) => RadioPage(),
  '/checkbox':(context) => CheckBoxPage(),
  '/switch':(context) => SwitchPage(),
};

var onGenerateRoute=(RouteSettings settings){
  //统一处理
  final String name = settings.name;
  final Function pageContentBuilder = routes[name];
  if (pageContentBuilder != null) {
    if (settings.arguments != null) {
      final Route route = MaterialPageRoute(
        builder: (context) =>
            pageContentBuilder(context, arguments: settings.arguments),
      );
      return route;
    } else {
      final Route route = MaterialPageRoute(
        builder: (context) => pageContentBuilder(context),
      );
      return route;
    }
  }
};

home.dart

import 'package:flutter/material.dart';

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

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

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              child: Text('Text演示'),
              onPressed: (){
                Navigator.pushNamed(context, '/text');
              },
            ),
            SizedBox(height: 10),
            RaisedButton(
              child: Text('Radio演示'),
              onPressed: (){
                Navigator.pushNamed(context, '/radio');
              },
            ),
            SizedBox(height: 10),
            RaisedButton(
              child: Text('CheckBox演示'),
              onPressed: (){
                Navigator.pushNamed(context, '/checkbox');
              },
            ),
            SizedBox(height: 10),
            RaisedButton(
              child: Text('Switch演示'),
              onPressed: (){
                Navigator.pushNamed(context, '/switch');
              },
            ),
          ],
        ),
      );
  }
}

textfield.dart

import 'package:flutter/material.dart';

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

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

class _TextFieldPageState extends State<TextFieldPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Text演示'),
        ),
        body: ListView(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.all(10),
              // child: TextDemo(),
              // child: TextDemo2(),
              child: Column(
                children: <Widget>[
                  TextDemo(),
                  SizedBox(height: 10),
                  TextDemo2(),
                ],
              ),
            ),
          ],
        ));
  }
}

//文本框赋初始值并获得其内容
class TextDemo2 extends StatefulWidget {
  TextDemo2({Key key}) : super(key: key);

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

class _TextDemo2State extends State<TextDemo2> {
  var _username = new TextEditingController(); //初始化给表单赋值
  var _password;
  @override
  void initState() {
    super.initState();
    _username.text = '初始值';
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Text('以下为设置初始值并获取值'),
        SizedBox(height: 10),
        TextField(
          decoration: InputDecoration(hintText: '请输入用户名'),
          controller: _username, //赋初始值
          onChanged: (value) {
            setState(() {
              _username.text = value; //将文本内容赋值
            });
          },
        ),
        SizedBox(height: 10),
        TextField(
          obscureText: true, //设置为密码框
          decoration: InputDecoration(
            hintText: '密码框',
            border: OutlineInputBorder(), //文本框边框
          ),
          onChanged: (value){
            setState(() {
              _password = value;
            });

          },
        ),
        SizedBox(height: 10),
        Container(
          width: double.infinity, //自适应宽度
          child: RaisedButton(
            child: Text('提交'),
            onPressed: () {
              //获取文本框的值
              print(_username.text);
              print(_password);
            },
            color: Colors.blue,
            textColor: Colors.white,
          ),
        )
      ],
    );
  }
}

class TextDemo extends StatelessWidget {
  const TextDemo({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        TextField(),
        SizedBox(height: 10),
        TextField(
          maxLines: 4, //多行文本框
          decoration: InputDecoration(
            hintText: '多行文本框', //placeholder 提示信息
            border: OutlineInputBorder(), //文本框边框
          ),
        ),
        SizedBox(height: 10),
        TextField(
          decoration: InputDecoration(
            prefixIcon: Icon(Icons.people),
            labelText: '用户名',
            // labelStyle: TextStyle(), //label样式
            border: OutlineInputBorder(), //文本框边框
          ),
        ),
        SizedBox(height: 10),
        TextField(
          obscureText: true, //设置为密码框
          decoration: InputDecoration(
            hintText: '密码框',
            border: OutlineInputBorder(), //文本框边框
          ),
        ),
      ],
    );
  }
}

效果展示：

checkbox.dart

import 'package:flutter/material.dart';

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

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

class _CheckBoxPageState extends State<CheckBoxPage> {
  var _state = true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Checkbox演示'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Row(
            children: <Widget>[
              Checkbox(
                value: this._state,
                onChanged: (v) {
                  setState(() {
                    this._state = v; //更改选中状态
                  });
                },
                activeColor: Colors.red, //选中背景颜色
                checkColor: Colors.white, //选中的✔颜色
              ),
            ],
          ),
          Row(
            children: <Widget>[
              Text(this._state?"选中":"未选中"),
            ],
          ),
          SizedBox(height: 10),
          CheckboxListTile(
            value: this._state,
            onChanged: (v) {
              setState(() {
                this._state = v; //更改选中状态
              });
            },
            title: Text('标题'),
            subtitle: Text('二级标题'),
          ),
          Divider(), //横线
          CheckboxListTile(
            value: this._state,
            onChanged: (value){
              setState(() {
                this._state = value;
              });

            },
            title: Text('标题1'),
            subtitle: Text('二级标题1'),
            secondary: Icon(Icons.help),
            selected: this._state,
          )
        ],
      ),
    );
  }
}

效果展示：

radio.dart

import 'package:flutter/material.dart';

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

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

class _RadioPageState extends State<RadioPage> {
  int _sex = 1;
  int _class = 1;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Radio演示'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Row(
            children: <Widget>[
              Radio(
                value: 1, //值
                onChanged: (v) {
                  setState(() {
                    this._sex = v;
                  });
                },
                groupValue: this._sex, //选择组的值
              ),
              Text('男'),
              SizedBox(width: 20),
              Radio(
                value: 2,
                onChanged: (v) {
                  setState(() {
                    this._sex = v;
                  });
                },
                groupValue: this._sex,
              ),
              Text('女'),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text("${this._sex}"),
              Text(this._sex == 1 ? "男" : "女"),
            ],
          ),
          SizedBox(height: 10),
          RadioListTile(
            value: 1,
            onChanged: (v) {
              setState(() {
                this._class = v;
              });
            },
            groupValue: this._class,
            title: Text('一年级'),
            subtitle: Text('一年级描述'),
            selected: this._class == 1,
          ),
          RadioListTile(
            value: 2, //单选值
            onChanged: (v) {
              setState(() {
                this._class = v;
              });
            },
            groupValue: this._class, //组值
            title: Text('二年级'),
            subtitle: Text('二年级描述'),
            secondary: Image.network('https://www.itying.com/images/flutter/1.png'), //配置图片
            selected: this._class == 2, //文字是否高亮
          ),
        ],
      ),
    );
  }
}

效果展示：

switch.dart

import 'package:flutter/material.dart';

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

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

class _SwitchPageState extends State<SwitchPage> {
  bool _state = true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Switch演示'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Switch(
            value: this._state,
            onChanged: (v) {
              setState(() {
                this._state = v;
              });
            },
            activeColor: Colors.red,
          )
        ],
      ),
    );
  }
}

效果展示：