前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >每日tips:FocusScopeNode移动焦点你用对了吗?

每日tips:FocusScopeNode移动焦点你用对了吗?

作者头像
用户1974410
发布2022-09-20 16:54:21
8400
发布2022-09-20 16:54:21
举报
文章被收录于专栏:flutter开发精选

在 Flutter中,FormTextFormField是输入文本时非常有用的Widget。

我们如何在键盘上按“下一步”时,正确的移动输入焦点的呢?

使用FocusScopeNode就很容易做到这种效果。下面我们通过一个例子演示下:

代码语言:javascript
复制
class EmailPasswordSignInForm extends StatefulWidget {
  @override
  _EmailPasswordSignInFormState createState() =>
      _EmailPasswordSignInFormState();
}

class _EmailPasswordSignInFormState extends State<EmailPasswordSignInForm> {
  final FocusScopeNode _node = FocusScopeNode();
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

  @override
  void dispose() {
    _node.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: FocusScope(
        node: _node,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            // email
            TextFormField(
              decoration: InputDecoration(
                labelText: 'Email',
                hintText: 'john@doe.com',
              ),
              textInputAction: TextInputAction.next,
              keyboardType: TextInputType.emailAddress,
              // move to the next field
              onEditingComplete: _node.nextFocus,
            ),
            // password
            TextFormField(
              decoration: InputDecoration(
                labelText: 'Password',
              ),
              obscureText: true,
              textInputAction: TextInputAction.done,
              // move to the next field
              onEditingComplete: _node.nextFocus,
            ),
            // submit
            RaisedButton(
              child: Text('Sign In'),
              onPressed: () {/* submit code here */},
            ),
          ],
        ),
      ),
    );
  }
}

通过添加 一个FocusScopeNodeFocusScope关联,通过使用_node.nextFocus就可以轻松地将焦点移动到下一个TextFormField

如果想移动到上一个焦点,使用_node.previousFocus()就可以轻松办到。

❝注意:这些方法也使用TextField,即使没有Form也同样可以. ❞

细节很重要,这些小tips可以节省时间并且也会让我们的用户满意。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2022-01-16,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 flutter开发精选 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档