2024 最新 Flutter 教學 － Flutter 終極指南： 連結
從零開始學 Dart 程式設計： 連結
Flutter 程式設計入門實戰 30 天： 連結

哈囉～大家好，我是 KT ，今天【iT邦幫忙鐵人賽】挑戰第十二天，KT 將為大家來介紹，如何使用 TextField 文字輸入框元件。

TextField 文字輸入框元件

TextField 文字輸入框元件，提供給用戶輸入文字的元件。

TextField 文字輸入框元件，常用的屬性

• controller： 監聽文字輸入內容(★最重要★)
• onChanged：當文字有改變觸發事件
• onSubmitted：當按下鍵盤Entenr觸發事件
• enable：是否禁用
• maxLength：最大長度
• maxLines：最大行數
• style：文字輸入框樣式
• textAlign：文字對齊方式
• obscureText：設定是否為隱碼，設定為true文字將會被隱碼，false則會顯示明文正常文字內容
• inputFormatters：設定允許輸入的文字格式
• decoration：文字輸入框元件裝飾效果

起手式範例

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('HKT線上教室'),
        ),
        body: HomePage(),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //↓↓↓更改此處程式碼↓↓↓
    return Center(child: TextField());
  }
}

範例：輸入文字框，顯示提示文字

TextField(
            decoration: InputDecoration(hintText: '請輸入...'),
        )

執行畫面

範例：按鈕按下印出輸入文字框內容

宣告一個 TextEditingController 用來註冊文字框的 controller 來監聽文字輸入框內容，當按鈕按下印出輸入文字框文字內容。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('HKT線上教室'),
        ),
        body: HomePage(),
      ),
    );
  }
}
class HomePage extends StatelessWidget {
  final TextEditingController myController = new TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: <Widget>[
          TextField(
            controller: myController,
            decoration: InputDecoration(hintText: '請輸入...'),
          ),
          RaisedButton(
            child: Text('印出輸入框內容'),
            onPressed: btnEvent,
          )
        ],
      ),
    );
  }
  void btnEvent() {
    print(myController.text);
  }
}

執行畫面

那今天【iT邦幫忙鐵人賽】就介紹到這邊囉～

順帶一提，KT 線上教室，臉書粉絲團，會不定期發佈相關資訊，不想錯過最新資訊，不要忘記來按讚，加追蹤喔！也歡迎大家將這篇文章分享給更多人喔。

我們明天見囉！！！掰掰～

參考資料

HKT 線上教室
http://tw-hkt.blogspot.com/

Background vector created by freepik
https://www.freepik.com