flutter登录界面TextField的焦点及动做(带视频)

视频连接：https://www.bilibili.com/video/av44936399/?p=2

在多个TextField中获取焦点，并经过键盘跳到下一个焦点的demo，主要讲解获取焦点，

    第一个文件，main.dart
复制代码

效果图：

import 'package:flutter/material.dart';
import 'textfields_focus_demo.dart'; // 导包

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final Widget child;

  MyApp({Key key, this.child}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: MaterialApp(
        title: 'Flutter demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
          primaryColor: Colors.blue,
        ),
        home: TextFieldDemo(),
      ),
    );
  }
}
复制代码

导包以后，定义username和password的控制器和焦点，

而后给他初始化，初始化完以后就开始调用了，

/**

• 实现原理：
• 使用FocusNode获取当前textField焦点
• 在TextNode的textInputAction属性中选择键盘action（next/down）
• 对于最后一个以前的TextField：在onSubmitted属性中解除当前focus状态
• 再聚焦下一个FocusNode:FocusScope.of(context).requestFocus( nextFocusNode );
• 对于最后一个TextField,直接解除focus并提交表单
  */

textfields_focus_demo.dart 
import 'package:flutter/material.dart';

class TextFieldDemo extends StatefulWidget {
  _TextFieldDemoState createState() => _TextFieldDemoState();
}

class _TextFieldDemoState extends State<TextFieldDemo> {
  FocusNode _namefocusNode, _pwfocusNode;
  TextEditingController _nameController, _pwController;

  @override
  void initState() {
    super.initState();
    _nameController = TextEditingController();
    _pwController = TextEditingController();
    _namefocusNode = FocusNode();
    _pwfocusNode = FocusNode();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(//安全区，主要兼容屏幕
        child: ListView(
          children: <Widget>[
            SizedBox(height: 80.0),// 空出80高度
            Center(//居中
              child: Text(
                'Login',
                style: TextStyle(fontSize: 30.0),
              ),
            ),
            SizedBox(height: 80.0),
            Padding(
              padding: EdgeInsets.all(16.0),
              child: Material(
                borderRadius: BorderRadius.circular(10.0),
                child: TextField(
                  focusNode: _namefocusNode,
                  controller: _nameController,
                  obscureText: false,
                  textInputAction: TextInputAction.next,
                  onSubmitted: (input) {
                    _namefocusNode.unfocus();
                    FocusScope.of(context).requestFocus(_pwfocusNode);
                  },
                  decoration: InputDecoration(
                    labelText: 'name',
                  ),
                ),
              ),
            ),
            Padding(
              padding: EdgeInsets.all(16.0),
              child: Material(
                borderRadius: BorderRadius.circular(10.0),
                child: TextField(
                  focusNode: _pwfocusNode,
                  controller: _pwController,
                  obscureText: true,
                  textInputAction: TextInputAction.done,
                  onSubmitted: (input) {
                    _pwfocusNode.unfocus();
                  },
                  decoration: InputDecoration(
                    labelText: 'password'
                  ),
                ),
              ),
            ),
            ButtonBar(
              children: <Widget>[
                RaisedButton(
                  onPressed: (){},
                  child: Text('login'),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}
复制代码

目录大全：
www.flutterj.com/?post=124#t…