Flutter小部件不返回值并关注next/prev元素

Question

我有一个OTP小部件，它可以生成示例TextFields组合并返回结果。为什么在我的情况下FocusScope不工作，onSuccess函数在控制台上不返回任何响应或打印响应？

DartPad演示

代码：

import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: Home(),
);
}
}
class Home extends StatelessWidget {
void onFinish(res, code) {
print(code);
print(res);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home'),
),
body: Center(
child: Container(
margin: EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("Enter confirm code"),
SizedBox(height: 35.0),
OtpWidget(onFinish),
],
),
),
),
);
}
}
class OtpWidget extends StatefulWidget {
final Function onSuccess;
OtpWidget(this.onSuccess);
@override
_OtpWidgetState createState() => _OtpWidgetState();
}
class _OtpWidgetState extends State<OtpWidget> {
final code = {
'first': null,
'second': null,
'third': null,
'fourth': null,
};
bool checkResult() {
return code['first'] != null &&
code['second'] != null &&
code['third'] != null &&
code['fourth'] != null;
}
void firstVal(value) {
setState(() {
code['first'] = value;
});
print(code);
widget.onSuccess(checkResult(), code);
}
void secondVal(value) {
setState(() {
code['second'] = value;
});
print(code);
widget.onSuccess(checkResult(), code);
}
void thirdVal(value) {
setState(() {
code['third'] = value;
});
print(code);
widget.onSuccess(checkResult(), code);
}
void fourthVal(value) {
setState(() {
code['fourth'] = value;
});
print(code);
widget.onSuccess(checkResult(), code);
}
@override
Widget build(BuildContext context) {
return Material(
color: Colors.transparent,
child: Container(
padding: EdgeInsets.symmetric(horizontal: 25),
child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
OtpTextField(first: true, last: false, onChange: firstVal),
OtpTextField(first: false, last: false, onChange: secondVal),
OtpTextField(first: false, last: false, onChange: thirdVal),
OtpTextField(first: false, last: true, onChange: fourthVal),
],
)
]),
),
);
}
}
class OtpTextField extends StatelessWidget {
final bool first;
final bool last;
final Function onChange;
const OtpTextField(
{Key key, @required this.first, @required this.last, this.onChange})
: super(key: key);
@override
Widget build(BuildContext context) {
return Container(
height: 60.0,
width: 60.0,
child: AspectRatio(
aspectRatio: 1.0,
child: TextField(
autofocus: true,
onChanged: (value) {
this.onChange(value);
if (value.length == 1 && last == false) {
FocusScope.of(context).nextFocus();
}
if (value.length == 0 && first == false) {
FocusScope.of(context).previousFocus();
}
},
showCursor: true,
readOnly: false,
textAlign: TextAlign.center,
keyboardType: TextInputType.number,
maxLength: 1,
decoration: InputDecoration(
counter: Offstage(),
),
),
),
);
}
}

Answer 1

问题是：

final code = {
'first': null,
'second': null,
'third': null,
'fourth': null,
};

如果你没有给出一个特定的类型，Dart引擎会根据值给出一个类型。在这种情况下，code的类型是Map<String, Null>，因此即使您尝试更改，每个项目的值也将为null。

给出如下特定类型：

final Map<String, String> code = {
'first': null,
'second': null,
'third': null,
'fourth': null,
};

或

final code = {
'first': '',
'second': '',
'third': '',
'fourth': '',
};

对于上面的代码，您应该更改您的checkResult函数如下：

bool checkResult() {
return code['first'].length != 0 &&
code['second'].length != 0 &&
code['third'].length != 0 &&
code['fourth'].length != 0;
}