Flutter小部件不返回值并关注下一个/上一个元素

安德烈亚斯·亨特(Andreas Hunter)

我有OTP小部件,可将示例TextFields组合并返回结果。为什么在我的情况下不起作用FocusScopeonSuccess功能在控制台上没有返回任何响应或打印响应?

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(),
          ),
        ),
      ),
    );
  }
}
阿马杜·贝耶(Amadou Beye)

该探针是:

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

如果您不指定特定类型,则Dart引擎会根据值给出类型。在这种情况下,类型为codeMap<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;
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章