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'),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

目錄大全：
http://www.flutterj.com/?post=79#toc-01