Part1: 今日目標

1.前言
2.內容

Part2: 今日內容

1.前言

2.內容: Part_3: User interface, Widget catalog

Section_7. Input widgets

這個網頁主要介紹了Flutter中與輸入相關的組件（Input widgets）。

• 輸入組件（Input Widgets）
  這些組件主要用於處理用戶的輸入，包括Material Components和Cupertino中的輸入組件。

• 選擇輔助組件
  這個組件幫助用戶通過輸入一些文本並從選項列表中選擇來進行選擇。

• 表單容器（Form Field Container）
  這是一個可選的容器，用於將多個表單字段組件（例如，TextField組件）組合在一起。

• 單一表單字段（Single Form Field）
  這個組件維護表單字段的當前狀態，以便更新和驗證錯誤可以在視覺上反映出來。
  Question: 舉例說明
  Ans: 在Flutter中，FormField組件可以用來維護表單字段的當前狀態。這意味著，如果用戶輸入了無效的數據，或者沒有填寫必填字段，FormField可以用來顯示錯誤消息，並在視覺上突出顯示錯誤。以下是一個簡單的例子，展示了如何使用FormField來創建一個簡單的登錄表單

// 程式碼展示了一個簡單的Flutter應用，其中包含一個表單，該表單有一個文本輸入字段和一個提交按鈕。用戶可以在文本字段中輸入文本。如果用戶嘗試提交空文本，將會顯示錯誤消息提示用戶輸入一些文本。如果用戶輸入了有效的文本並提交，則會顯示一個SnackBar，表示正在處理數據。
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: MyForm(),
        ),
      ),
    );
  }
}

class MyForm extends StatefulWidget {
  @override
  _MyFormState createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> {
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          TextFormField(
            validator: (value) => (value == null || value.isEmpty) ? 'Please enter some text' : null,
          ),
          ElevatedButton(
            onPressed: () {
              if (_formKey.currentState?.validate() ?? false) {
                ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Processing Data')));
              }
            },
            child: Text('Submit'),
          ),
        ],
      ),
    );
  }
}

• 鍵盤操作回調組件
  這個組件會在用戶按下或釋放鍵盤上的一個鍵時調用一個回調。
  這些組件提供了豐富的功能，以滿足開發者在處理用戶輸入時的各種需求。
  Question: 舉例說明
  Ans: 在Flutter中，RawKeyboardListener是一個常用的組件，它可以監聽鍵盤事件，並在用戶按下或釋放鍵盤上的一個鍵時調用一個回調。以下是一個使用RawKeyboardListener的簡單例子

// RawKeyboardListener會監聽鍵盤事件，並在用戶按下一個鍵時，更新並顯示最後一個被按下的鍵的標籤
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: MyKeyboardListener(),
        ),
      ),
    );
  }
}

class MyKeyboardListener extends StatefulWidget {
  @override
  _MyKeyboardListenerState createState() => _MyKeyboardListenerState();
}

class _MyKeyboardListenerState extends State<MyKeyboardListener> {
  String _lastKeyPressed = "";

  @override
  Widget build(BuildContext context) {
    return RawKeyboardListener(
      focusNode: FocusNode(),
      onKey: (event) {
        if(event is RawKeyDownEvent) {
          setState(() {
            _lastKeyPressed = event.logicalKey.keyLabel ?? '';
          });
        }
      },
      child: Text('Last key pressed: $_lastKeyPressed'),
    );
  }
}

Question: 選取筆者感興趣了解的 class 詳細說明
(1) Autocomplete class
這個網頁介紹了Flutter中的Autocomplete類

• Autocomplete類（Autocomplete Class）

  • 這是一個組件，用於幫助用戶通過輸入一些文本並從選項列表中進行選擇。
  • 用戶的文本輸入是通過fieldViewBuilder參數建立的字段接收的。
  • 要顯示的選項是使用optionsBuilder確定的，並且使用optionsViewBuilder進行渲染。

• 構造函數（Constructors）
  這個類有一個構造函數，允許開發者創建Autocomplete的實例，並可以設置多個參數，如key、optionsBuilder、displayStringForOption等。

• 屬性（Properties）
  這個類有多個屬性，例如optionsMaxHeight用於設置選項列表的最大高度，initialValue用於設置文本字段的初始值等。

• 方法（Methods）
  包含build、createElement等方法，用於描述由此組件表示的用戶界面的一部分。

• 範例（Examples）
  網頁提供了幾個創建Autocomplete組件的範例，包括使用默認UI的基本Autocomplete組件，以及如何創建具有自定義類型、從網絡獲取選項的Autocomplete組件等。

• 參見（See also）

  • RawAutocomplete，Autocomplete是基於它構建的，它包含更詳細的範例。
  • 這個類提供了豐富的功能和靈活性，以滿足開發者在實現自動完成功能時的各種需求。

Section_8. Interaction Models

這個網頁介紹了Flutter中與交互模型相關的一些widgets。這些小部件提供了豐富的功能，以滿足開發者在處理用戶交互時的各種需求。

• 吸收指針小部件（AbsorbPointer）：
  當吸收為真時，此小部件會阻止其子樹接收指針事件，終止擊中測試。

• 可拖動小部件（Draggable）：
  此小部件可以從拖動到DragTarget。當識別到拖動手勢開始時，它會顯示反饋。

• 拖動目標小部件（DragTarget）：
  當一個可拖動的小部件被拖到拖動目標上時，會接收數據。

• 其他: 手勢檢測器小部件（GestureDetector）、英雄小部件（Hero）、導航器小部件（Navigator）、可滾動小部件（Scrollable）和放大和平移交互小部件（InteractiveViewer）等等。

Question: 選取筆者感興趣了解的 class 詳細說明
(1) AbsorbPointer class
這個小部件提供了一種簡單的方式來控制其子小部件是否可以接收用戶的指針事件，很適合需要臨時禁用某些界面元素的情境。

• 主要功能：
  AbsorbPointer 是一個在進行點擊測試（hit testing）時吸收指針的小部件（widget）。
  當 absorbing 為 true 時，此小部件會阻止其子樹接收指針事件，因為它會在自身終止點擊測試。
  它在佈局中仍然佔用空間，並像往常一樣繪製其子元素。它只是防止其子元素成為定位事件的目標。

• 使用情境：
  此小部件可用於防止其子小部件接收指針事件，例如，當您希望覆蓋一個按鈕以防止用戶點擊它時。

• 與 Semantics 的關聯：
  使用此小部件可能會影響此小部件下方的語義子樹（semantics subtree）的收集方式。
  如果 ignoringSemantics 為 true，子樹將對語義層（例如，輔助工具）不可見。

• 其他細節請參考官方文件: Link

賺錢隨時都可以，但創造回憶不是隨時都可以
You can always make money, you can’t always make memories.
準備去朋友家烤肉和度假，預祝大家中秋節愉快!