Flutter基础九：表单

最新推荐文章于 2024-05-19 16:56:04 发布
最新推荐文章于 2024-05-19 16:56:04 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27597629/article/details/108858338
版权

文章目录


重温上节的路由。
在这里插入图片描述

Theme：定制、使用、重置、覆盖主题

main.dart

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        //home: Home(), //Home()自定义的
        //home: NavigatorDemo(),
        initialRoute: '/form', //初始路由
        routes: {
          '/': (context) => NavigatorDemo(), //初始路由
          '/about': (context) => MyPage(title: 'About'), 
          '/form': (context) => FormDemo(),
        },
        theme: ThemeData(
          primarySwatch: Colors.yellow, //主题颜色
          highlightColor: Color.fromRGBO(255, 255, 255, 0.5), //白色，不透明度是0.5
          splashColor: Colors.white70, //水波纹不透明度是70的白色
          accentColor: Color.fromRGBO(3, 54, 255, 1.0),
        ));
  }
}

form_demo.dart

import 'package:flutter/material.dart';

class FormDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Theme(
      data: Theme.of(context).copyWith(
        //除了要替代的主题primaryColor，其他的主题会保留
        //ThemeData(//专门又设置里ThemeData的颜色，会完全替代之前的主题
        primaryColor: Colors.black,
      ),
      child: ThemDemo(),
    ));
  }
}

class ThemDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Theme.of(context).accentColor,
      /*Theme.of(context)
          .primaryColor, //main.dart里设置了ThemeData的primarySwatch黄色，如果没有另外设置，这里会是黄色*/
    );
  }
}

TextField：文本字段

用StatefulWidget创建一个textFieldDemo类

import 'package:flutter/material.dart';

class FormDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Theme(
            data: Theme.of(context).copyWith(
              //除了要替代的主题primaryColor，其他的主题会保留
              //ThemeData(//专门又设置里ThemeData的颜色，会完全替代之前的主题
              primaryColor: Colors.black,
            ),
            child: Container(
              padding: EdgeInsets.all(16.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  TextFieldDemo(),
                ],
              ),
            )));
  }
}

class ThemDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Theme.of(context).accentColor,
      /*Theme.of(context)
          .primaryColor, //main.dart里设置了ThemeData的primarySwatch黄色，如果没有另外设置，这里会是黄色*/
    );
  }
}

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

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

class _TextFieldDemoState extends State<TextFieldDemo> {
  @override
  Widget build(BuildContext context) {
    return TextField();//默认样式的
  }
}

6 TextField：文本字段样式（InputDecoration）

class _TextFieldDemoState extends State<TextFieldDemo> {
  @override
  Widget build(BuildContext context) {
    return TextField(
      decoration: InputDecoration(
        icon: Icon(Icons.subject), //图标
        labelText: 'Title', //题目
        hintText: 'Enter the post title.', //提示文字
        //border: InputBorder.none, //隐藏边框
        //border: OutlineInputBorder(),//有边框
        filled: true, //启用背景颜色边框，可用color属性设置颜色
        fillColor: Colors.green,
      ),
    );
    //return  TextField();//默认样式的
  }
}

在这里插入图片描述

TextField：监视文本字段的值的变化与提交

class _TextFieldDemoState extends State<TextFieldDemo> {
  @override
  Widget build(BuildContext context) {
    return TextField(
      onChanged: (value) {//文本框内容改变时
        debugPrint('input:$value');
      },
      onSubmitted: (value) {//按下确认按钮后
        debugPrint('submit:$value');
      },
      decoration: InputDecoration(
        icon: Icon(Icons.subject), //图标
        labelText: 'Title', //题目
        hintText: 'Enter the post title.', //提示文字
        //border: InputBorder.none, //隐藏边框
        //border: OutlineInputBorder(),//有边框
        filled: true, //启用背景颜色边框，可用color属性设置颜色
        fillColor: Colors.green,
      ),
    );
    //return  TextField();//默认样式的
  }
}

TextField：使用 TextEditingController 监听文本字段变化_

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

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

class _TextFieldDemoState extends State<TextFieldDemo> {
  final textEditingController = TextEditingController();//文本监听器

  @override
  void dispose() {
    textEditingController.dispose(); //消化掉textEditingController，不然会浪费资源
    super.dispose();
  }

  @override
  void initState() {
    //初始数据
    // TODO: implement initState
    super.initState();
    textEditingController.text = 'hi';

    textEditingController.addListener(() {
      //监听文本框,变化时会输出
      debugPrint('input:${textEditingController.text}');
    });
  }

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: textEditingController,
      /*onChanged: (value) {
        //文本框内容改变时
        debugPrint('input:$value');
      },*/ //用textEditingController的话需要注释掉onChanged
      onSubmitted: (value) {
        //按下确认按钮后
        debugPrint('submit:$value');
      },
      decoration: InputDecoration(
        icon: Icon(Icons.subject), //图标
        labelText: 'Title', //题目
        hintText: 'Enter the post title.', //提示文字
        //border: InputBorder.none, //隐藏边框
        //border: OutlineInputBorder(),//有边框
        filled: true, //启用背景颜色边框，可用color属性设置颜色
        fillColor: Colors.green,
      ),
    );
    //return  TextField();//默认样式的
  }
}

9 Form：表单

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

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

class _RegisterFormState extends State<RegisterForm> {
  @override
  Widget build(BuildContext context) {
    return Form(
      child: Column(
        children: [
          TextFormField(
            decoration: InputDecoration(
              labelText: 'Username',
            ),
          ),
          TextFormField(
            obscureText: true, //密码比较敏感，启用这一项，输入的内容就不会直接显示出来
            decoration: InputDecoration(
              labelText: 'Password',
            ),
          ),
          SizedBox(
            height: 32.0,
          ), //用SizedBox添加点距离
          Container(
            width: double.infinity,
            child: RaisedButton(
                color: Theme.of(context).accentColor,
                child: Text(
                  'Register',
                  style: TextStyle(color: Colors.white),
                ),
                elevation: 0.0,
                onPressed: () {}),
          )
        ],
      ),
    );
  }
}

在这里插入图片描述

Form：保存与获取表单里的数据

save

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

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

class _RegisterFormState extends State<RegisterForm> {
  final registerFormKey = GlobalKey<FormState>();
  String username, password;
  void submitRegisterForm() {
    if (registerFormKey.currentState.validate()) {
      registerFormKey.currentState.save();

      debugPrint('username: $username');
      debugPrint('password: $password');

      Scaffold.of(context).showSnackBar(SnackBar(
        content: Text('Registering...'),
      ));
    } else {}
  }

  @override
  Widget build(BuildContext context) {
    return Form(
      key: registerFormKey,
      child: Column(
        children: [
          TextFormField(
            decoration: InputDecoration(
              labelText: 'Username',
            ),
            onSaved: (newValue) {
              username = newValue;
            },
          ),
          TextFormField(
            obscureText: true, //密码比较敏感，启用这一项，输入的内容就不会直接显示出来
            decoration: InputDecoration(
              labelText: 'Password',
            ),
            onSaved: (newValue) {
              password = newValue;
            },
          ),
          SizedBox(
            height: 32.0,
          ), //用SizedBox添加点距离
          Container(
              width: double.infinity,
              child: RaisedButton(
                color: Theme.of(context).accentColor,
                child: Text(
                  'Register',
                  style: TextStyle(color: Colors.white),
                ),
                elevation: 0.0,
                onPressed: submitRegisterForm,
              ))
        ],
      ),
    );
  }
}

在这里插入图片描述
在这里插入图片描述

11 Form：验证表单里的数据

validate

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

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

class _RegisterFormState extends State<RegisterForm> {
  final registerFormKey = GlobalKey<FormState>();
  String username, password;
  void submitRegisterForm() {
    if (registerFormKey.currentState.validate()) {
      registerFormKey.currentState.save();

      debugPrint('username: $username');
      debugPrint('password: $password');

      Scaffold.of(context).showSnackBar(SnackBar(
        content: Text('Registering...'),
      ));
    } else {}
  }

  String validateUsername(value) {
    if (value.isEmpty) {
      return 'Username is required.';
    } else
      return null;
  }

  String validatePassword(value) {
    if (value.isEmpty) {
      return 'Password is required.';
    } else
      return null;
  }

  @override
  Widget build(BuildContext context) {
    return Form(
      key: registerFormKey,
      child: Column(
        children: [
          TextFormField(
            decoration: InputDecoration(
              labelText: 'Username',
              //helperText: '', //表单验证的时候会自动出现helperText内容，设置成空，看起来正常点
            ),
            onSaved: (newValue) {
              username = newValue;
            },
            validator: validateUsername,
          ),
          TextFormField(
            obscureText: true, //密码比较敏感，启用这一项，输入的内容就不会直接显示出来
            decoration: InputDecoration(
              labelText: 'Password',
            ),
            onSaved: (newValue) {
              password = newValue;
            },
            validator: validatePassword,
          ),
          SizedBox(
            height: 32.0,
          ), //用SizedBox添加点距离
          Container(
              width: double.infinity,
              child: RaisedButton(
                color: Theme.of(context).accentColor,
                child: Text(
                  'Register',
                  style: TextStyle(color: Colors.white),
                ),
                elevation: 0.0,
                onPressed: submitRegisterForm,
              ))
        ],
      ),
    );
  }
}

在这里插入图片描述

12 Form：自动验证

autovalidate: true,

可用用一个bool型属性来控制自动验证功能的开启，点击提交功能后开启
在这里插入图片描述

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

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

class _RegisterFormState extends State<RegisterForm> {
  final registerFormKey = GlobalKey<FormState>();
  String username, password;
  bool autovalidate = false;
  void submitRegisterForm() {
    if (registerFormKey.currentState.validate()) {
      //如果验证成功，保存数据
      registerFormKey.currentState.save();

      debugPrint('username: $username');
      debugPrint('password: $password');
      
      Scaffold.of(context).showSnackBar(SnackBar(
        content: Text('Registering...'),
      ));
    } else {
      setState(() {
        autovalidate = true; //打开表单自动验证
      });
    }
  }

  String validateUsername(value) {
    if (value.isEmpty) {
      return 'Username is required.';
    } else
      return null;
  }
  String validatePassword(value) {
    if (value.isEmpty) {
      return 'Password is required.';
    } else
      return null;
  }
  @override
  Widget build(BuildContext context) {
    return Form(
      key: registerFormKey,
      child: Column(
        children: [
          TextFormField(
            decoration: InputDecoration(
              labelText: 'Username',
              //helperText: '', //表单验证的时候会自动出现helperText内容，设置成空，看起来正常点
            ),
            onSaved: (newValue) {
              username = newValue;
            },
            validator: validateUsername,
            autovalidate: autovalidate,
          ),
          TextFormField(
            obscureText: true, //密码比较敏感，启用这一项，输入的内容就不会直接显示出来
            decoration: InputDecoration(
              labelText: 'Password',
            ),
            onSaved: (newValue) {
              password = newValue;
            },
            validator: validatePassword,
            autovalidate: autovalidate,
          ),
          SizedBox(
            height: 32.0,
          ), //用SizedBox添加点距离
          Container(
              width: double.infinity,
              child: RaisedButton(
                color: Theme.of(context).accentColor,
                child: Text(
                  'Register',
                  style: TextStyle(color: Colors.white),
                ),
                elevation: 0.0,
                onPressed: submitRegisterForm,
              ))
        ],
      ),
    );
  }
}

13 SnackBar：在屏幕底部动画弹出提示栏

在这里插入图片描述

煮酒Shae
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flutter 中的表单
manerzi的博客
01-10 588
Flutter 中的表单
Flutter开发之——表单组件
我的博客
04-12 1814
一 表单组件 表单组件时Flutter中用来进行用户输入，提交用户输入信息的组件。在使用表单组件时，需要将其放入表单容器中，使用时类似于H5中的form。常用表单组件有： Form FormField TextFormField 二 表单组件介绍 2.1 Form Form类似于H5中的form，是表单控件的容器 Form的child通常为多组件容器，比如Column，Row 2.2 FormField FormField是一个表单控件，此控件包含表单的状态，方便更新UI 通常情况下，我们不会直
Flutter 中的 Form 小部件：全面指南
最新发布
smileKH的博客
05-19 371
Form是 Flutter 中的一个 widget，它负责管理表单的数据和验证逻辑。Form通常与等子 widget 结合使用，以创建输入字段并处理用户的输入。},),),// 执行提交操作},),],),
flutter 中 Form 和 FormField 实现表单验证
weixin_43575775的博客
03-14 2万+
在Flutter中，可以通过使用`FormField`类来实现表单字段的输入和验证。其实内部就是对FormField(builder: 方法 进行传递 只是一个简单封装。类，可以轻松实现各种表单字段的输入和验证功能，从而创建交互性强大且用户友好的表单。通过使用这些不同类型的。
flutter-表单
c_liufeng的博客
12-14 2697
Switch - 开关 安卓 安卓属性 类型 说明 value bool 开关得值，一般与状态字段绑定 onChanged Function 开关状态变更时调用 activeColor Colors 开关开启时得圆圈颜色 activeTrackColor Colors 开关开启时得轨道颜色 inactiveThumbColor Colors 开关关闭时得圆圈颜色 inactiveTrackColor Colors 开关关闭时得轨道颜色 ios ios属性 类型
Flutter开发（十八）—— 表单
RedKeyer的博客
05-07 1028
Flutter开发（十八）—— 表单
flutter_basic：Flutter基础入门
02-15
为初学者列出Flutter Basic： 输入小部件：表单，TextFormField SnackBar：全局，可重复使用Box装潢旋转盒ListView水平SingleChildScrollView 网格视图PageView：PageController，viewportFraction BackdropFilter：...
Flutter-Master:一些有用的代码片段
03-08
颤振大师卷盘入职屏幕个人理财耐克（Nike）Store 动画制作隐式动画 补间动画生成器 显式动画 组合动画代码段表单验证的基础未来构建者基础知识 警报对话框的基础 底部appbar 基础Cupertino App 基础知识可拖放目标...
flutterDemo:flutter常用组件demo
05-16
首先，`Text` 组件是展示文本的基础，可以设置字体、大小、颜色、对齐方式等属性。`RaisedButton` 和 `FlatButton` 是常用的按钮类型，它们提供了一种直观的交互方式，可以通过点击执行相应的操作。`IconButton` ...
form_and_validation_flutter:了解Flutter中的制作表单和验证表单
03-14
首先，Flutter提供了`FormField`类作为构建表单的基础组件。开发者可以使用这个类来创建自定义的表单字段，例如文本输入框、选择器等。`FormField`包含了状态管理、错误显示和验证逻辑等核心功能。 1. 创建表单： ...
flutter_ui:设计颤抖，登录，注册
03-10
1. **Flutter的基础架构** Flutter的核心是其“层叠”架构，由Widgets、Elements和RenderObjects组成。Widgets定义了UI的视觉和行为，Elements将Widgets与运行时状态关联，而RenderObjects负责实际的绘制和布局工作...
Flutter实战一Flutter聊天应用（一）
热门推荐
咖啡花园
06-05 3万+
不知不觉，进阶的教程已经写了几十篇了，通过前面的学习，大家已经打下了良好的基础，接下来我们就开始进行项目实战吧！我们现在要写一个叫“谈天说地”的应用程序，这是一个简单、可扩展的聊天应用程序，能实时显示信息，用户可以输入文本信息，也可以通过按返回键或发送图标发送，还可以在iOS和Android设备上运行。首先我们要在IntelliJ编辑器中启动一个新的Flutter项目： 启动IntelliJ IDE
Flutter Table 表格
马志武的博客
07-23 1万+
Table 是一个表格布局组件，官方有话说：如果您只有一行，则Row小部件更合适。如果您只有一列，则SliverList或Column小部件将更合适。 参数详解 属性 说明 children List<TableRow>表的行 columnWidths 所有列宽 默认平均等分 FixedColumnWidth 宽度 ...
Flutter开发：利用表单实现登录页面
一个程序员-二白的博客
07-09 1247
class Page extends StatefulWidget { @override State<StatefulWidget> createState() { // TODO: implement createState return _PageState(); } } class _PageState extends State<Page> { final registerFormKey = GlobalKey<Form...
【Flutter】五、Flutter之表单输入框——TextField
MAXLZ的博客
08-24 4895
【Flutter】五、Flutter之表单输入框——TextFieldTextField1.1 TextField构造器1.2 TextFiled属性说明1.2.1 InputDecoration属性说明1.2.2 TextInputAction1.2.3 inputFormatters的使用1.2.4 buildCounter的使用 Flutter中关于表单的相关控件有：TextField、C...
flutter 自定义弹框
weixin_43294560的博客
04-18 3948
自定义弹框 在Material组件中定义内容,这样能实现弹框出现屏幕透明的效果 1、定义组件类来继承Dialog,添加build方法，return 自定义内容 2、通过 showDialog方法调用弹出框 showDialog( context: context, builder: (context){ return 类组件...
flutter 实时获取文本框值
qq_36071410的博客
02-25 8007
需求：可带默认值的文本编辑框 组件：TextFormField。 initialValue默认值 onSaved中的返回则是实时的文本内容 代码： final _textKey = GlobalKey();//声明组件的key String code;//接收文本框的值 执行输入操作之后 通过key调用组件的方法：_textKey.currentState.save(); 此时code的值会变成组...
Flutter 填坑之 表单数据哪里去了？
weixin_34244102的博客
05-18 537
为什么80%的码农都做不了架构师？>>> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值