flutter - How can I disable texformfield input in flutter?
问题描述
In my application, written in Flutter, I need an icon button to enable/disable input to it. I declared bool variables which are holding information to TextFormField to be enabled/disabled. But, it is not working as expected. It looks that it depends on type of keyboard, so until all characters keyboard is in use, it is not validated. So, if I disable field which allows only numeric keyboard, field input is not disabled until I switch to field with all characters kexboard. So, how can I disable input to TextFomField immediatelly?
`import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:aisscanning/data/database_helper.dart';
import 'package:aisscanning/data/inventoryitem.dart';
import 'package:aisscanning/data/masteritem.dart';
class InventoryScanning extends StatefulWidget {
InventoryScanning({Key key, this.title}) : super(key: key);
final String title;
@override
_InventoryScanningState createState() => new _InventoryScanningState();
}
class _InventoryScanningState extends State<InventoryScanning> {
static GlobalKey<FormState> _formKey = new GlobalKey<FormState>();
final TextEditingController teSku = TextEditingController();
final TextEditingController teDesc = TextEditingController();
final TextEditingController teLoc = TextEditingController();
final TextEditingController teSubLoc = TextEditingController();
final TextEditingController teQty = TextEditingController();
final TextEditingController tePrice = TextEditingController();
bool lockLoc = true;
bool lockSubLoc = true;
bool lockQty = true;
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Item Scanning"),
backgroundColor: Colors.black,
),
resizeToAvoidBottomPadding: false,
body: Padding(
padding: const EdgeInsets.only(top: 12.0),
child: new Form(
key: _formKey,
autovalidate: true,
child: new ListView(
// padding: const EdgeInsets.symmetric(horizontal: 16.0),
padding: new EdgeInsets.all(8.0),
itemExtent: 60.0,
children: <Widget>[
new Row(
// Location
mainAxisSize: MainAxisSize.min,
children: <Widget>[
IconButton(
icon: const Icon(
Icons.lock,
color: const Color(0xFF167F67),
size: 25.0,
),
onPressed: () {
if (lockLoc == false) {
lockLoc = true;
} else {
lockLoc = false;
}
},
),
Expanded(
child: TextFormField(
controller: teLoc,
keyboardType: TextInputType.number,
enabled: lockLoc,
style: new TextStyle(
color: const Color(0xFF0f2638),
fontFamily: 'ProximaNova',
fontStyle: FontStyle.normal,
fontSize: 20.0,
),
decoration: new InputDecoration(
hintText: 'Enter Location or press Search Icon',
labelText: 'Location',
fillColor: Colors.white,
contentPadding: new EdgeInsets.symmetric(
vertical: 15.0, horizontal: 10.0),
border: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(25.0),
borderSide: new BorderSide(),
),
labelStyle: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w600,
fontSize: 20.0,
),
),
),
),
IconButton(
icon: const Icon(
Icons.search,
color: const Color(0xFF167F67),
size: 25.0,
),
onPressed: () {},
),
],
),
new Row(
// SubLocation
mainAxisSize: MainAxisSize.min,
children: <Widget>[
IconButton(
icon: const Icon(
Icons.lock,
color: const Color(0xFF167F67),
size: 25.0,
),
onPressed: () {
if (lockSubLoc == false) {
lockSubLoc = true;
} else {
lockSubLoc = false;
} },
),
Expanded(
child: TextFormField(
controller: teSubLoc,
enabled: lockSubLoc,
style: new TextStyle(
color: const Color(0xFF0f2638),
fontFamily: 'ProximaNova',
fontStyle: FontStyle.normal,
fontSize: 20.0,
),
decoration: new InputDecoration(
hintText: 'Enter SubLocation',
labelText: 'SubLocation',
contentPadding: new EdgeInsets.symmetric(
vertical: 15.0, horizontal: 10.0),
fillColor: Colors.white,
border: OutlineInputBorder(
borderRadius: new BorderRadius.circular(25.0),
borderSide: new BorderSide(),
),
//fillColor: Colors.green
labelStyle: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w600,
fontSize: 16.0,
),
),
),
),
IconButton(
icon: const Icon(
Icons.search,
color: const Color(0xFF167F67),
size: 25.0,
),
onPressed: () {},
),
],
),
new Row(
// QTY
mainAxisSize: MainAxisSize.min,
children: <Widget>[
IconButton(
icon: const Icon(
Icons.lock,
color: const Color(0xFF167F67),
size: 25.0,
),
onPressed: () {
if (lockQty == false) {
lockQty = true;
} else {
lockQty = false;
}},
),
Expanded(
child: TextFormField(
controller: teQty,
textAlign: TextAlign.right,
keyboardType: TextInputType.number,
enabled: lockQty,
style: new TextStyle(
color: const Color(0xFF0f2638),
fontFamily: 'ProximaNova',
fontStyle: FontStyle.normal,
fontSize: 18.0,
),
decoration: new InputDecoration(
hintText: 'Enter Quantity',
labelText: 'Quantity',
contentPadding: new EdgeInsets.symmetric(
vertical: 15.0, horizontal: 10.0),
border: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(30.0),
borderSide: new BorderSide(),
),
labelStyle: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w600,
fontSize: 20.0,
),
),
),
),
],
),
new Row(
// Buttons
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
new RaisedButton(
child: new Text("Save"),
onPressed: () {
addRecord();
},
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0)),
color: Colors.green,
elevation: 4.0,
),
new RaisedButton(
child: new Text("Cancel"),
onPressed: () {},
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0)),
color: Colors.red,
elevation: 4.0,
),
],
),
]),
),
),
);
}
`
解决方案
当我们需要更新屏幕 UI 时,我们需要调用 SetState()。所以在 onPressed 方法中的代码中。
onPressed: () {
setState(() {
if (lockLoc == false) {
lockLoc = true;
} else {
lockLoc = false;
}
});
},
推荐阅读
- c# - c# ext.net:无法获取动态添加的字段集项目
- kotlin - Kotlin 标准函数:run、with、let、also 和 apply
- python - Python opencv/cv2 错误着色
- linux - 对 docker build 感到困惑以永远运行 docker 容器
- c# - 如何在 Activity 中访问 app:headerLayout (axml)?Xamarin Android
- c - BLAS中具有单精度和双精度矩阵的GEMM
- android - 如何在颤动中隐藏布局溢出消息
- cordova - 从 idChamp® RS4 BLE RFID 设备获取卡信息
- php - 从 php webservice 打印值(json 对象)
- python - 警告:(1265,“第 1 行的“日期”列的数据被截断”)