前言

更改用戶交互中的文本字段顏色。

預(yù)覽

當(dāng)選擇一個(gè)文本字段并接受輸入時(shí)，它被稱為具有“焦點(diǎn)”通常，用戶通過(guò)點(diǎn)擊將焦點(diǎn)轉(zhuǎn)移到文本字段，開(kāi)發(fā)人員通過(guò)使用本菜譜中描述的工具以編程方式將焦點(diǎn)轉(zhuǎn)移到文本字段。

管理焦點(diǎn)是創(chuàng)建具有直觀流程的表單的基本工具。例如，假設(shè)您有一個(gè)帶有文本字段的搜索屏幕。當(dāng)用戶導(dǎo)航到搜索屏幕時(shí)，可以將焦點(diǎn)設(shè)置為搜索詞的文本字段。這允許用戶在屏幕可見(jiàn)時(shí)立即開(kāi)始鍵入，而無(wú)需手動(dòng)點(diǎn)擊文本字段。

正文

1. Focus Widget 組件

一個(gè) Widget ，它管理一個(gè) FocusNode，以允許將鍵盤焦點(diǎn)賦予此 Widget 及其后代。

api.flutter.dev/flutter/wid…

• 包裹 TextFormField 與 Focus Widget

2. Builder Widget 組件

一個(gè)無(wú)狀態(tài)實(shí)用工具 widget ，其構(gòu)建方法使用其構(gòu)建器回調(diào)來(lái)創(chuàng)建 widget 的子級(jí)。

api.flutter.dev/flutter/wid…

api.flutter.dev/flutter/wid…

• 它有兩個(gè)變量。
  • FocusNode:
  • 可由有狀態(tài) widget 用于獲取鍵盤焦點(diǎn)和處理鍵盤事件的對(duì)象。
  • hasFocus:
  • 此節(jié)點(diǎn)是否具有輸入焦點(diǎn)。

• 創(chuàng)建要在其中更改顏色的三元運(yùn)算符。

3. FocusScope Widget 組件

FocusScope 類似于 Focus，但也作為其后代的作用域，將焦點(diǎn)遍歷限制為作用域控件。例如，在推送路由時(shí)會(huì)自動(dòng)創(chuàng)建一個(gè)新的 FocusScope，以防止焦點(diǎn)遍歷移動(dòng)到前一個(gè)路由中的控件。

• 用 FocusScope widget 包裝整個(gè)列 column (文本表單字段所在的位置)。

完成了!

作者：會(huì)煮咖啡的貓
鏈接：
https://juejin.cn/post/7160869996422905893
來(lái)源：稀土掘金