1. 基本介紹
FocusNode 主要提供焦點控制功能沐祷。
2. 示例代碼
代碼下載地址。如果對你有幫助的話記得給個關注情竹，代碼會根據我的 Flutter 專題不斷更新岸霹。
3. FocusNode 詳解
3.1 容器創(chuàng)建
我們先創(chuàng)建一個最簡單的可收起或者隱藏鍵盤的控件艇棕，在點擊完成按鈕時收起鍵盤。
import 'package:flutter/material.dart';
class FMFocusNodeVC extends StatefulWidget {
@override
FMFocusNodeState createState() => FMFocusNodeState();
}
class FMFocusNodeState extends State <FMFocusNodeVC> {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(title: Text('FocusNode'),),
body: _normalField(),
);
}
TextField _normalField(){
FocusNode normalNode = FocusNode();
return TextField(
focusNode: normalNode,
onSubmitted: (string){
print(string);
// normalNode.unfocus();
FocusManager.instance.primaryFocus.unfocus();
},
);
}
}
FocusNode normal.gif
以下兩種方式均可隱藏鍵盤设凹。
normalNode.unfocus(); // 拿到對應的 FocusNode
FocusManager.instance.primaryFocus.unfocus();
3.2 自動跳轉焦點
我們使用 FocusScope 控件，以及 FocusScopeNode 來對焦點進行管理忱详。話不多說围来，直接上代碼。
import 'package:flutter/material.dart';
class FMFocusNodeVC extends StatefulWidget {
@override
FMFocusNodeState createState() => FMFocusNodeState();
}
class FMFocusNodeState extends State <FMFocusNodeVC> {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(title: Text('FocusNode'),),
// body: _normalField(),
body: _focusScope(),
);
}
FocusScopeNode _scopeNode = FocusScopeNode();
FocusScope _focusScope(){
return FocusScope(
node: _scopeNode,
child: ListView(
padding: EdgeInsets.all(20),
children: [
_textField(),
_textField(),
_textField(),
_btnField(),
_textField(),
_btnField(),
_textField(),
_textField(),
],
),
);
}
TextField _textField(){
return TextField(
decoration: InputDecoration(
hintText: "請輸入文本"
),
onEditingComplete: (){
_scopeNode.nextFocus();
},
);
}
Row _btnField(){
return Row(
children: [
Expanded(child: _textField()),
RaisedButton(
onPressed: (){},
child: Text("我可以點的"),
)
],
);
}
TextField _normalField(){
FocusNode normalNode = FocusNode();
return TextField(
focusNode: normalNode,
onSubmitted: (string){
print(string);
// normalNode.unfocus();
FocusManager.instance.primaryFocus.unfocus();
},
);
}
}
其實這里已經實現了光標自動下跳的功能了匈睁，但是在 flutter 中很多子控件其實也有 focusNode 屬性监透，與 TextField 一樣。在這里 FocusScopeNode 就一視同仁了航唆，認為他也是可以聚焦的一份子胀蛮，所以有時候會卡在某一個不是 TextField 的控件上。
FocusNode error.gif
3.3 跳過部分控件的 FocusNode
設置 skipTraversal 屬性糯钙，FocusScopeNode 會自動跳過設置為 true 的控件粪狼。
Row _btnField(){
return Row(
children: [
Expanded(child: _textField(false)),
RaisedButton(
onPressed: (){},
focusNode: FocusNode(skipTraversal: true),
child: Text("我可以點的"),
)
],
);
}
Focus complete.gif
4. 技術小結
- FocusNode 主要就是用來控制焦點，還算比較常用任岸。
- 熟練掌握鍵盤收起更為實用一點再榄，其他部分可以有需要時再做了解。
