futter 通过判定输入框组件是否都有值，对按钮进行禁用/启用。

onPressed 函数为空则按钮禁用，不为空则可操作。

于是想到三元操作，以下是踩坑踩完爬上来的结果

 onPressed: checkInput() ? null :  tapFunction,

坑一 onPressed:

onPressed:调用的是函数签名，而不是执行函数，也就是带括号和不带括号的区别，带上括号是执行函数，然后得到的返回值塞到 onPressed:后面去了，所以当然不行。由于dart继承了js的良好（草率）风格，导致像我这样的新手就很容易踩坑。

坑二获取输入值

光在onchanged里面赋值是没用的，要用setState，大概是由于statefulwidget的属性是放在 state里面的。

//从TextFormField中获取值onChanged: (val) {setState(() {print(number);number = val;});},
···onChanged: (val) {setState(() {password = val;});print('$password');},

坑三输入框组件是否都有值

调试了一大圈，判断每次输入框输入的值才发现了

输入框最开始的时候是null，输入输入再删除删除之后，不会再回到null 的状态。哎，我这笨脑袋。
所以判定是否同时都有值的方法如下

 checkInput(){return number==null||number==''||password==null||password=='';}

方法比较笨，但是挺好使
贴一下源码吧 ,免得我忘记了

//  Description 仿钉钉登录页面
//  Author Mr.wang
//  Date 2020-05-05 17:38
import 'package:flutter/material.dart';main() => runApp(MaterialApp(home: Login(),));class Login extends StatefulWidget {Login({Key key}) : super(key: key);@override_LoginState createState() => _LoginState();
}class _LoginState extends State<Login> {TextEditingController _phoneNumberController;TextEditingController _passwordController;//账号String number;//密码String password;@overrideWidget build(BuildContext context) {@overridevoid initState() {_phoneNumberController = TextEditingController();_passwordController = TextEditingController();var size = MediaQuery.of(context).size;}return Scaffold(appBar: buildAppBar(),body: Container(padding: EdgeInsets.only(left: 40, right: 40),child: Column(crossAxisAlignment: CrossAxisAlignment.start,children: <Widget>[buildIcon(),Container(child: Text('欢迎使用老年宝', style: TextStyle(fontSize: 28)),),Container(padding: EdgeInsets.only(top: 40),child: Text('手机号码', style: TextStyle(fontSize: 14)),),buildNumber(),Container(padding: EdgeInsets.only(top: 10),child: Text('密码', style: TextStyle(fontSize: 14)),),buildPassWord(),buildLoginButton(),GestureDetector(child: Text('忘记密码',style: TextStyle(fontSize: 14, color: Colors.grey)),onTap: () {print('忘记密码');
//                   Navigator.push(context, MaterialPageRoute(builder: (context) =>Agreement()));},),buildRegisterButton()]),));}Container buildLoginButton() {return Container(padding: EdgeInsets.only(top: 20, bottom: 20), child: LoginButton());}Container buildRegisterButton() {return Container(width: double.infinity,alignment: Alignment(0.0, -1.0),padding: EdgeInsets.only(top: 50),child: GestureDetector(child: Text('注册账号',textAlign: TextAlign.center,style: TextStyle(fontSize: 18, color: Colors.grey)),onTap: () {print('注册账号');
//                   Navigator.push(context, MaterialPageRoute(builder: (context) =>Agreement()));},),);}Container buildIcon() {return Container(padding: EdgeInsets.only(bottom: 20),child: CircleAvatar(backgroundImage: NetworkImage('https://t8.baidu.com/it/u=3571592872,3353494284&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1589212401&t=35519f0def1b6d8e99be80a142dea0f3')
//                    AssetImage('assets/images/app'),//debug用网络图片),);}Container buildNumber() {return Container(decoration: BoxDecoration(border: Border(bottom: BorderSide(width: 0.4, color: Colors.grey))),child: Row(
//                      mainAxisAlignment: MainAxisAlignment.spaceAround,children: <Widget>[Expanded(flex: 2,child: Container(decoration: BoxDecoration(border: Border(right: BorderSide(width: 0.4, color: Colors.grey))),child: Container(child: Text('+86',style: TextStyle(color: Colors.grey,fontSize: 18,)),)),),Expanded(flex: 1,child: Text(' '),),Expanded(flex: 8,child: TextFormField(onChanged: (val) {setState(() {print(number);number = val;});},keyboardType: TextInputType.number,
//                                focusNode: passwordFocusNode,controller: _phoneNumberController,decoration: InputDecoration(hintText: "请输入手机号码",border: InputBorder.none,),))],));}Container buildPassWord() {return Container(decoration: BoxDecoration(border: Border(bottom: BorderSide(width: 0.4, color: Colors.grey))),child: TextFormField(onChanged: (val) {print('$password');setState(() {password = val;});},keyboardType: TextInputType.number,
//                                focusNode: passwordFocusNode,controller: _passwordController,decoration: InputDecoration(hintText: "请输入密码",border: InputBorder.none,),),);}AppBar buildAppBar() {return AppBar(brightness: Brightness.light,elevation: 0,backgroundColor: Colors.transparent,iconTheme: IconThemeData(color: Colors.black),);}checkInput(){return number==null||number==''||password==null||password=='';}//按钮是否禁用，返回为函数，nullVoidCallback tapFunction() {//    print(_phoneNumberController.text);
//    print(_passwordController.text);
//    print(context);//  输入账号密码检测showDialog(context: context,child: AlertDialog(title: Text('登录失败'),content: Text('账号或密码错误'),));}Widget LoginButton() => Container(width: double.infinity,child: FlatButton(disabledColor: Colors.lightBlueAccent,disabledTextColor: Colors.white,onPressed: checkInput() ? null :  tapFunction,child: Container(padding: EdgeInsets.all(15),child:Text("登录", style: TextStyle(fontSize: 16, letterSpacing: 2))),color: Colors.blue,textColor: Colors.white,shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(10.0)),),));
}

futter 通过判定输入框组件是否都有值，对按钮进行禁用/启用。相关推荐

Vue 组件开发 - 数据输入框组件
目录设计通用组件的一般思路组件效果 1. HTML结构 2. index.js 3. input-number.js 3.1 input-number.js代码注解设计通用组件的一般思路明确需 ...
value数字 vue_基于Vue开发数字输入框组件
随着 vue 越来越火热, 相关组件库也非常多啦, 只用轮子怎么够, 还是要造起来!!! 1.概述 vue组件开发的api:props.events和slots 2.组件代码效果: (1)index ...
带emoji表情的react输入框组件
简介博客项目重构后留言和评论功能一直没有emoji表情输入功能,在网上也没有找到比较好用的react组件,于是作者用了两周时间封装了一个输入框组件并发布到npm. 项目上线初期或多或少存在一些问题, ...
flutter TextField 输入框组件
TextField 顾名思义文本输入框,类似于iOS中的UITextField和Android中的EditText和Web中的TextInput.主要是为用户提供输入文本提供方便.相信大家在原生客户端 ...
Vue.js学习笔记—input-number:实战：开发一个数字输入框组件
参考<Vue,js>实战(梁灏编著) input-number:实战:开发一个数字输入框组件 git代码 index.html <!DOCTYPE html> <html ...
第二百一十三节，jQuery EasyUI，NumberBox(数值输入框)组件
jQuery EasyUI,NumberBox(数值输入框)组件功能:只能输入数值,和各种数值的计算学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表本节课重点了解 EasyUI ...
Flutter 输入框组件
文章目录 Flutter 输入框组件基本属性自动换行限制输入简单使用焦点控制自定义样式1 自定义样式2 Flutter 输入框组件基本属性 autofocus:是否自动获取焦点.obsc ...
Vue组件封装 ——input 输入框组件
一.基础准备工作 1.创建一个基础的vue项目包 2.创建components文件夹,用于存放组件,新建input.vue组件,可以自己取个名字 <script> export def ...
reac——父组件向子组件传递值，子组件何时能同步获得父组件改变后的值
//这里是父组件的代码:export default class HeaderCom_son extends React.Component {constructor(props) {super(pr ...

futter 通过判定输入框组件是否都有值，对按钮进行禁用/启用。

onPressed 函数为空则按钮禁用，不为空则可操作。

于是想到三元操作，以下是踩坑踩完爬上来的结果

坑一 onPressed:

坑二获取输入值

坑三输入框组件是否都有值

futter 通过判定输入框组件是否都有值，对按钮进行禁用/启用。相关推荐

最新文章

热门文章

futter 通过判定输入框组件是否都有值，对按钮进行禁用/启用。

onPressed 函数 为空则按钮禁用，不为空则可操作。

于是想到三元操作 ， 以下是踩坑踩完爬上来的结果

坑一 onPressed:

坑二 获取输入值

坑三 输入框组件是否都有值

futter 通过判定输入框组件是否都有值，对按钮进行禁用/启用。相关推荐

最新文章

热门文章

onPressed 函数为空则按钮禁用，不为空则可操作。

于是想到三元操作，以下是踩坑踩完爬上来的结果

坑二获取输入值

坑三输入框组件是否都有值